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》)