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),性能提升还是很明显的。

时间: 2024-11-05 02:16:56

DOM编程技巧以及重排和重绘的相关文章

浏览器渲染页面过程描述,DOM编程技巧以及重排和重绘。

一.浏览器渲染页过程描述 1.浏览器解析html源码,然后创建一个DOM树. 在DOM树中,每一个HTML标签都有一个对应的节点(元素节点),并且每一个文本也都有一个对应的节点(文本节点). DOM树的根节点就是documentElement,对应的是html标签. 2.浏览器解析CSS代码,计算出最终的样式数据. 对CSS代码中非法的语法它会直接忽略掉. 解析CSS的时候会按照如下顺序来定义优先级:浏览器默认设置,用户设置,外联样式,内联样式,html中的style(嵌在标签中的行间样式).

高性能WEB开发:重排与重绘

DOM编程可能最耗时的地方,重排和重绘. 1.什么是重排和重绘 浏览器下载完页面中的所有组件--HTML标记.JavaScript.CSS.图片之后会解析生成两个内部数据结构--DOM树和渲染树. DOM树表示页面结构,渲染树表示DOM节点如何显示.DOM树中的每一个需要显示的节点在渲染树种至少存在一个对应的节点(隐藏的DOM元素disply值为none 在渲染树中没有对应的节点).渲染树中的节点被称为"帧"或"盒",符合CSS模型的定义,理解页面元素为一个具有填充

高性能JavaScript 重排与重绘

转自(学习之用) 作者:韩子迟 网址:http://www.cnblogs.com/zichi/p/4720000.html 先回顾下前文高性能JavaScript DOM编程,主要提了两点优化,一是尽量减少DOM的访问,而把运算放在ECMAScript这一端,二是尽量缓存局部变量,比如length等等,最后介绍了两个新的API querySelector()以及querySelectorAll(),在做组合选择的时候可以大胆使用.而本文主要讲的是DOM编程可能最耗时的地方,重排和重绘. 1.什

哪些情况下会导致重排或重绘的发生?请给出性能优化的建议。

1.简述重排的概念浏览器下载完页面中的所有组件(HTML.JavaScript.CSS.图片)之后会解析生成两个内部数据结构(DOM树和渲染树),DOM树表示页面结构,渲染树表示DOM节点如何显示.重排是DOM元素的几何属性变化,DOM树的结构变化,渲染树需要重新计算.2.简述重绘的概念重绘是一个元素外观的改变所触发的浏览器行为,例如改变visibility.outline.背景色等属性.浏览器会根据元素的新属性重新绘制,使元素呈现新的外观.由于浏览器的流布局,对渲染树的计算通常只需要遍历一次就

css的重排与重绘

一直在做pc页面的部分,由于网速快,看上去css的写法并没有什么影响所以对css的要求也没怎么注意过,最近在做一些手机端的东西,发现真的差好多,特别是再搭配上js效果时一些延迟更是让人接受不了.在这个快餐的时代,确实导致手机端更具有市场,搭乘地铁的时间变成人们浏览新闻,玩游戏,甚至是购物的时间,此时用户应用的设备多数会是手机,而手机与电脑比起来最大的差距就是网速,这对开发者的要求也就提高了,如何能够加快加载减少响应时间就变成了开发者永恒不变的话题.目前虽然有很多的前辈们已经针对这个现状提出了很多

浏览器渲染页面的过程,以及重排和重绘(转)

前言 写得比我的文字好,有逻辑! 浏览器的渲染过程 1,浏览器解析html源码,然后创建一个 DOM树.在DOM树中,每一个HTML标签都有一个对应的节点,并且每一个文本也都会有一个对应的文本节点.DOM树的根节点就是 documentElement,对应的是html标签. 2,浏览器解析CSS代码,计算出最终的样式数据.对CSS代码中非法的语法她会直接忽略掉.解析CSS的时候会按照如下顺序来定义优先级:浏览器默认设置,用户设置,外链样式,内联样式,html中的style. 3,构建出DOM树,

浏览器重排与重绘

前几天内推某街,被问到了酱紫一个问题,了解浏览器的重绘与重排吗?瞬间蒙住了,的确好像没有怎么听说过.于是今天抽了点时间研究了下重排和重绘,这里分享给大家. 浏览器在页面渲染过程中非常重要的两个概念,即重排和重绘.了解这两个概念对于你在今后写代码过程中,尤其是对性能要求比较高的话,有非常大的帮助.来看看这两个概念: 重排(reflow) - 浏览器构建渲染树完成时不包含位置和大小信息.计算元素位置和其他几何信息的过程称为重绘. 重绘(repaint) - 当布局结束后,浏览器遍历呈现树,调用呈现器

浏览器的渲染页面过程和重排、重绘

渲染页面的过程: 1.解析html源码,创建dom树.每个标签都是一个节点. 2.解析css 3.构建dom树,并且计算出样式(padding.margin等),然后构建 渲染树.对于渲染树和dom树的不同是:dom树的每一个标签都是一个节点,但是渲染树会忽略掉不需要渲染的元素,例如head.display:none的元素.渲染树中的每一个节点都存储有对应的css属性. 4.渲染树创建好后,浏览器就可以根据渲染树直接把页面绘制到屏幕上. 重排和重绘: 重排:就是渲染树的一部分必须要更新 并且节点

前端性能优化之重排和重绘

一.重排 & 重绘 有经验的大佬对这个概念一定不会陌生,"浏览器输入URL发生了什么".估计大家已经烂熟于心了,从计算机网络到JS引擎,一路飞奔到浏览器渲染引擎. 经验越多就能理解的越深. 感兴趣的同学可以看一下这篇文章,深度和广度俱佳: <从输入 URL 到页面加载的过程?如何由一道题完善自己的前端知识体系!> 切回正题,我们继续探讨何为重排.浏览器下载完页面所有的资源后,就要开始构建DOM树,与此同时还会构建渲染树(Render Tree).(其实在构建渲染树之