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 += “

    123

    “;

    }

    el.innerHTML = str;console.timeEnd(“time1”);2 .使用innerHTML和數組console.time(“time2”);var arr = [];

    for{ arr.push(“

    123

    “); }

    el.innerHTML = arr.join(“”);console.timeEnd(“time2”);3 .使用DOM API console.time(“time3”);var str = “”;for{ var p = document.createElement(“p”); p.textContent = “123”; el.appendChild(p); }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 += "

    123

    “那js解析器如何解析呢?1 新建一個臨時字符串2 把str和後面的字符串拼接賦給新的臨時字符串3 銷毀原始字符串str並賦值給str這樣子的效率是低下的。

發佈留言