本文代码约定

• 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");

 

结果

在这里有必要知道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》)