console.time 简单分析javascript动态加入Dom节点的性能

时间：2022-10-14 18:51:37

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命令的作用，请看链接

hl=zh-CN#consoletimelabel">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》)

相关文章