如何减少浏览器repaint和reflow(上)

发布网友发布时间：2022-05-07 08:49

共2个回答

懂视网时间：2022-04-21 10:07

1.避免在document上直接进行频繁的DOM操作，如果确实需要可以采用off-document的方式进行，具体的方法包括但不完全包括以下几种：
(1). 先将元素从document中删除，完成修改后再把元素放回原来的位置
(2). 将元素的display设置为”none”，完成修改后再把display修改为原来的值
(3). 如果需要创建多个DOM节点，可以使用DocumentFragment创建完后一次性的加入document
2.集中修改样式
(1). 尽可能少的修改元素style上的属性
(2). 尽量通过修改className来修改样式
(3). 通过cssText属性来设置样式值
3. 缓存Layout属性值
对于Layout属性中非引用类型的值（数字型），如果需要多次访问则可以在一次访问时先存储到局部变量中，之后都使用局部变量，这样可以避免每次读取属性时造成浏览器的渲染。
var width = el.offsetWidth; var scrollLeft = el.scrollLeft;
4.设置元素的position为absolute或fixed
在元素的position为static和relative时，元素处于DOM树结构当中，当对元素的某个操作需要重新渲染时，浏览器会渲染整个页面。将元素的position设置为absolute和fixed可以使元素从DOM树结构中脱离出来独立的存在，而浏览器在需要渲染时只需要渲染该元素以及位于该元素下方的元素，从而在某种程度上缩短浏览器渲染时间，这在当今越来越多的Javascript动画方面尤其值得考虑。

热心网友时间：2022-04-21 07:15

页面在加载的过程中，需要对文档结构进行解析，同时需要结合各种各样的样式来计算这个页面长什么样子，最后再经过浏览器的渲染页面就出现了。这整个过程细说起来还是比较复杂，其中充满了repaint和reflow。对于DOM结构中的各个元素都有自己的盒子（模型），这些都需要浏览器根据各种样式（浏览器的、开发人员定义的等）来计算并根据计算结果将元素放到它该出现的位置，这个过程称之为reflow；当各种盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来后，浏览器于是便把这些元素都按照各自的特性绘制了一遍，于是页面的内容出现了，这个过程称之为repaint。以上提到的只是在页面加载时必然会出现的repaint和reflow，除此之外，在页面加载完成后，用户的一些操作、脚本的一些操作都会导致浏览器发生这种行为，具体在后文阐述。另外，关于浏览器渲染的更为详细的资料可以参考以下，涵盖了IE以及Firefox：Understanding Internet Explorer Rendering BehaviourNotes on HTML Reflow 二、什么情况下会触发浏览器的repaint/reflow?除了页面在首次加载时必然要经历该过程之外，还有以下行为会触发这个行为：DOM元素的添加、修改（内容）、删除( Reflow + Repaint) 仅修改DOM元素的字体颜色（只有Repaint，因为不需要调整布局）应用新的样式或者修改任何影响元素外观的属性 Resize浏览器窗口、滚动页面读取元素的某些属性（offsetLeft、offsetTop、offsetHeight、offsetWidth、scrollTop/Left/Width/Height、clientTop/Left/Width/Height、getComputedStyle()、currentStyle(in IE)) 在继续下面的文章之前，先介绍一款强大的性能分析工具-dynaTrace，借助该功能能够清晰的得到页面中的资源消耗情况，从而对症下药。另外，更细节的方面是它可以跟踪每个函数调用所造成的CPU消耗、Repaint/Reflow。接下来就借助该工具来测试一下以上描述的几点情况。 DOM元素的增删改先看代码HTML:这里是第1个节点这里是第2个节点这里是第3个节点Javascript: function $(id){ return document.getElementById(id); } function addNode(){ var n = document.createElement('div'); n.innerHTML = 'New Node'; $('test1').appendChild(n); } function modNode(){ $('test2').innerHTML = 'hello'; } function delNode(){ $('test3').parentNode.removeChild($('test3')); } 在依次点击完每一个按钮后，我们来看看dynaTrace的情况，首先是一目了然的点击事件分布放大之后来看一下每个事件的repaint/reflow情况：增加节点：修改节点：删除节点：图中的绿色部分表示的是reflow和repaint过程，其中比较短的绿条标示的reflow过程，后面长条部分表示的是repaint过程。