下面哪些操作不会触发浏览器重排和重绘

来源：蜘蛛抓取(WebSpider) 时间：2016-04-21 05:20 标签： 浏览器重排和重绘

重绘不一定需要重排（比如颜色的改变），重排必然导致重绘（比如改变网页位置）

DOM的变化影响了元素的几何属性，浏览器需要重新计算元素的几何属性，同时其他元素的几何属性和位置也会受到影响，浏览器会使渲染树中受到影响的部分失效，并重新构造渲染树，这个过程是重排，浏览器会重新绘制受到影响的部分到屏幕，这个过程叫重绘。

1>重排(Reflow)：当渲染树的一部分必须更新并且节点的尺寸发生了变化，浏览器会使渲染树中受到影响的部分失效，并重新构造渲染树。

2>重绘(Repaint)：是在一个元素的外观被改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。比如改变某个元素的背景色、文字颜色、边框颜色等等

1.添加、删除可见的dom

3.元素的尺寸改变(外边距、内边距、边框厚度、宽高、等几何属性)

5.浏览器窗口尺寸改变

6.获取某些属性。当获取一些属性时，浏览器为取得正确的值也会触发重排,它会导致队列刷新，这些属性包括：offsetTop、offsetLeft、

浏览器会维护1个队列，把所有会引起重排，重绘的操作放入这个队列，等队列中的操作到一定数量或者到了一定时间间隔，浏览器就会flush队列，进行一批处理，这样多次重排，重绘变成一次重排重绘

（2）不要把 DOM 结点的属性值放在一个循环里当成循环里的变量。
（4）千万不要使用 table 布局。因为可能很小的一个小改动会造成整个 table 的重新布局。(table及其内部元素除外，它可能需要多次计算才能确定好其在渲染树中节点的属性，通常要花3倍于同等元素的时间。这也是为什么我们要避免使用table做布局的一个原因。)

（5）不要在布局信息改变的时候做查询（会导致渲染队列强制刷新）

前端开发的时候大量的操作dom会引起浏览器重绘(redraw)和重排(reflow) 。

　　在文档重新加载的时候，浏览器引擎会解析html来生成dom树，之后根据DOM元素的几何属性构建一棵用于渲染的树。渲染树的每个节点都有大小和边距等属性，类似于盒子模型（由于隐藏元素不需要显示，渲染树中并不包含DOM树中隐藏的元素）。当渲染树构建完成后，浏览器就可以将元素放置到正确的位置了，再根据渲染树节点的样式属性绘制出页面。由于浏览器的流布局，对渲染树的计算通常只需要遍历一次就可以完成。

　　重绘是一个元素外观的改变所触发的浏览器行为，例如改变visibility、outline、背景色等属性。浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。重绘不会带来重新布局，并不一定伴随重排。

　　重排是更明显的一种改变，可以理解为渲染树需要重新计算。下面是常见的触发重排的操作：

　　DOM元素的几何属性变化 

　　　　DOM元素的属性变化时，浏览器会重新渲染该部分，而且会涉及到子节点/兄弟节点的重新计算。重排一定会引起浏览器的重绘，代价是很大的。

　　　　DOM树的增 删 移动 ，会出发重排，浏览器引擎布局过程是从上到下的，从左到右的过程。 所以，如果在body最前面插入一个元素，会导致整个文档的重新渲染，而在其后插入一个元素，则不会影响到前面的元素。

　　　　当获取一些属性的时候， 为了取得正确的值，会进行重排。  offsetTop、offsetLeft、

　　改变元素样式 也会引起重排。

   尽量减小重排次数和影响范围：

　　　　将多次改变样式属性的操作合并成一次操作。　

    将需要多次重排的元素，position属性设为absolute或fixed，这样此元素就脱离了文档流，它的变化不会影响到其他元素。例如有动画效果的元素就最好设置为绝对定位。

   在需要经常获取那些引起浏览器重排的属性值时，要缓存到变量。

　　由于display属性为none的元素不在渲染树中，对隐藏的元素操作不会引发其他元素的重排。如果要对一个元素进行复杂的操作时，可以先隐藏它，操作完成后再显示。这样只在隐藏和显示时触发2次重排

我要回帖

更多关于 浏览器重排和重绘 的文章

 

随机推荐