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),性能提升还是很明显的。
时间: 2024-11-05 02:16:56