DOM编程技巧以及重排和重绘

Posted 2020-08-05

html集合&遍历DOM

操作DOM另一个耗能点就是遍历DOM，在平时获取一组元素的时候(getElementsByTagName方法)，收集的结果是一个类数组对象，它处于一种“实时状态”实时存在，这意味着当底层文档对象更新时，它也会自动更新。

例子：

而这正是低效之源！很简单，跟数组的优化操作一样，缓存一个length变量就OK了(读取一个集合的length比读取一个普通数组的length要慢很多，因为每次都要查询)：

console.time(‘time0‘);

var lis0 = document.getElementsByTagName(‘li‘);

var str0 = ‘‘;

for(var i=0; i<lis0.length; i++){

　　str0 +=lis0[i].innerHTML;

}

console.timeEnd(‘time0‘);

console.time(‘time1‘);

 

var lis1 = document.getElementsByTagName(‘li‘);

var str1 = ‘‘;

for(var i=0; len=lis1.length; i<len; i++){

　　str1 += lis1[i].innerHTML;

}

console.timeEnd(‘time1‘);

结果：time0:0.237ms/time1:0.099ms

当获取的这个类数组对象长度值特别大的时候(如1000)，性能提升还是很明显的。