console.time 簡單分析javascript動態添加Dom節點的效能

Bullshit

本來想每天都更新下部落格的，但是最近要考試，還有就是自己還是停留在暗自竊喜中吧(這種想法要改變)。其實最近總在想，自己要怎麼去管理自己的資料，每天的生活都是對自己的資料的增刪查改。昨天把自己的電腦重裝了，確實很多軟體的存放要改地方了，之前不知道怎麼去管理軟體安裝，所以放得亂七八糟的。說好一大堆廢話之後，我最後再說一遍，管好自己的時間、資料真的比你學習東西重要。

Method

本文代碼約定

• 1 el: 指的是增加直接點的DOM節點
• 2 totalNum: 為100000(值越大越能體現差距)指的是迴圈建立的DOM節點
• 3 for(var i=0;i<totalNum;i++){}: 我們用for來表示就好了，簡寫代碼

如果叫你用javascript動態增加DOM節點，你有哪幾種思路呢？

1 .使用innerHTML和字串拼接

console.time("time1");

var str = "";

for{ 

str += "<div>123<div>"; 

}

el.innerHTML = str;

console.timeEnd("time1");

2 .使用innerHTML和數組

console.time("time2");

var arr = [];

for{

arr.push("<div>123<div>");

}

el.innerHTML = arr.join("");

console.timeEnd("time2");

3 .使用DOM API

console.time("time3");

var str = "";

for{

var div = document.createElement("div");

div.textContent = "123";

el.appendChild(div);

}

console.timeEnd("time3");

result

在這裡有必要知道console.time命令的作用，請看連結console.time(label)。我簡單介紹下吧，就是在console.time函數中傳入一個參數，這個參數就是一個標記，當chrome運行到這裡就開始計時，那什麼時候結束計時呢，這個就有關另外一個函數console.timeEnd，參數就是剛才那個標記。這樣子我們就知道中間那段javascript代碼究竟跑了多久了，記住它是以毫秒為單位的。

那好我們現在猜測下究竟哪段代碼跑的時間最短呢？

不賣關子了，時間長短逐漸上升分別是：time2<time3<time1(我只是在chrome上面測試，可能在其他瀏覽器不一樣)

Summary

為什麼會出現上面的情況呢？

• 一 首先我們要知道我們用的chrome是webkit核心，他們對操作DOM節點已經最佳化得很好了，所以DOM API與innerHTML兩著在效能上是沒多大區別的(引用於《高效能javascript》)
• 二 就是既然DOM API與innerHTML效能上沒多大區別的話，為什麼time3<time1呢？這個就是有關字串串連的效能問題了。

  就上面的例子 str += "<div>123</div>"那js解析器如何解析呢？

  1 建立一個臨時字串

  2 把str和後面的字串拼接賦給新的臨時字串

  3 銷毀原始字串並賦值給str

  這樣子的效率是低下的。

• 三 而作為第一個數組原生的方法為什麼會最快呢？。這個因為javascript的原生部分是在你寫代碼的時候它們已經在瀏覽器中了，它們是用底層的語言寫的，比如C++，這個就意味著這些方法會被編譯成機器碼(《高效能javascript》)