日期:2014-05-16  浏览次数:20432 次

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