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