首页 > 代码库 > DOM编程技巧以及重排和重绘
DOM编程技巧以及重排和重绘
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),性能提升还是很明显的。
DOM编程技巧以及重排和重绘
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。