簡單的幾個案例，對動態新增HTML進行了效能比較（包括innerHTML)
阿新 • • 發佈：2019-02-01
在網上查閱了不少關於innerHTML的效能比較，一直只是間接的得到結果，今天就自己動手寫了下非常簡單的幾個動態新增HTML方法的效能比較，當然，這其中的有許多考慮不周的地方，純粹是為了比較執行時間，並沒有考慮記憶體等資源的消耗，算不上真正的效能比較！下次有時間，進行個完整的效能測試，包括CPU,記憶體等資源消耗...
廢話不多說了，程式碼裡面有動態新增HTML的方法的簡單說明，少了幾種比較複雜的方法，例如：利用cloneNode（），理論上比直接create效能能提高30%左右，當然不同的瀏覽器實際測試時間很大不同。下面看看詳細的測試程式碼！
<html><head> <title></title> </head> <body> <div id="div1"></div> <script> /*-------------------------------- 第一大類 ------------------------------------*/ //方法一、innerHTML迴圈操作：取值賦值 (6200ms) functioncomparePerformance1(){ var startDate = new Date(), doc = window.document; for(var i=0; i < 500; ++i){ var str = "<div id='div'" + i + " style='width:100px;height:30px;background-color:#eee;'>test" + i + "</div>"; doc.body.innerHTML+= str; } alert("Run times: " + (new Date() - startDate) + "ms"); } //方法二、改良方法一，將字串賦值給變數，避免innerHTML迴圈操作：取值賦值 (18ms) function comparePerformance2(){ var startDate = new Date(), doc = window.document, temp; for(var i=0; i < 500; ++i){ var str = "<div id='div'" + i + " style='width:100px;height:30px;background-color:#eee;'>test" + i + "</div>"; temp += str; } doc.body.innerHTML = temp; alert("Run times: " + (new Date() - startDate) + "ms"); } //方法三、改良方法一，將字串迴圈放入陣列，然後將陣列的所有字串Join()拼接，同樣避免DOM（innerHTML）迴圈操作：取值賦值 (20s) function comparePerformance3(){ var startDate = new Date(), doc = window.document, array = []; for(var i=0; i < 500; ++i){ //push()和賦值效能相當 array.push("<div id='div'" + i + " style='width:100px;height:30px;background-color:#eee;'>test" + i + "</div>"); } doc.body.innerHTML = array.join(''); alert(); } /*--------------------------------------- 第二大類 -------------------------------------*/ //多次DOM操作建立節點，然後指定它們之間關係 （122ms) function comparePerformance4(){ var startDate = new Date(), doc = window.document; for(var i=0; i < 500; ++i){ var div = doc.createElement("div"); var text = doc.createTextNode("text" + 1); div.appendChild(text); doc.body.appendChild(div); div.style.id = "div" + i; div.style.width = "100px"; div.style.height = "30px"; div.style.backgroundColor = "#eee"; } alert("Run times: " + (new Date() - startDate) + "ms"); } //createDocumentFragment (31ms) function comparePerformance5(){ var startDate = new Date(), doc = window.document, fragment = document.createDocumentFragment(); for(var i=0; i < 500; ++i){ var div = doc.createElement("div"); var text = doc.createTextNode("text" + i); div.appendChild(text); fragment.appendChild(div); div.style.id = "div" + i; div.style.width = "100px"; div.style.height = "30px"; div.style.backgroundColor = "#eee"; } doc.body.appendChild(fragment); alert("Run times: " + (new Date() - startDate) + "ms"); } //使用模板元素clone (28ms) function comparePerformance(){ var startDate = new Date(), doc = window.document, fragment = document.createDocumentFragment(), copyDiv = document.getElementById("div1"); for(var i=0; i < 500; ++i){ var div = copyDiv.cloneNode(false); var text = doc.createTextNode("text" + i); div.appendChild(text); div.style.id = "div" + i; div.style.width = "100px"; div.style.height = "30px"; div.style.backgroundColor = "#eee"; fragment.appendChild(div); } doc.body.appendChild(fragment); alert("Run times: " + (new Date() - startDate) + "ms"); } //usage test comparePerformance(); </script> </body> </html>