回流与重绘

回流与重绘的概念及触发条件

回流/重排

概念

当渲染树中部分或者全部元素的尺寸、结构或者属性发生变化时，浏览器会重新渲染部分或者全部文档的过程就称为回流。

触发条件

● 页面的首次渲染

● 浏览器的窗口大小发生变化

● 元素的内容发生变化

● 元素的尺寸或者位置发生变化

● 元素的字体大小发生变化

● 激活CSS伪类

● 查询某些属性或者调用某些方法

● 添加或者删除可见的DOM元素

重绘

概念

当页面中某些元素的样式发生变化，但是不会影响其在文档流中的位置时，浏览器就会对元素进行重新绘制，这个过程就是重绘。

触发条件

● color、background 相关属性：background-color、background-image 等

● outline 相关属性：outline-color、outline-width 、text-decoration

● border-radius、visibility、box-shadow

如何避免回流与重绘

CSS

避免设置多层内联样式。

如果需要设置动画效果，最好使用absolute或者fixed，使元素脱离文档流，这样他们发生变化就不会影响其他元素。

避免使用CSS表达式（例如：calc()）。

JS

避免频繁操作样式，最好将样式列表定义为class并一次性更改class属性。

避免频繁操作DOM，创建一个documentFragment，在它上面应用所有DOM操作，最后再把它添加到文档中。

可以先为元素设置为不可见：display: none，操作结束后再把它显示出来。因为在display属性为none的元素上进行的DOM操作不会引发回流和重绘。

浏览器针对页面的回流与重绘，进行了自身的优化——渲染队列

浏览器会将所有的回流、重绘的操作放在一个队列中，当队列中的操作到了一定的数量或者到了一定的时间间隔，浏览器就会对队列进行批量处理。这样就会让多次的回流、重绘变成

一次回流重绘。

documentFragment是什么？用它跟直接操作DOM的区别是什么？

概念

DocumentFragment，文档片段接口，一个没有父对象的最小文档对象。它被作为一个轻量版的 Document使用，就像标准的document一样，存储由节点（nodes）组成的文档结构。

与document相比，最大的区别是DocumentFragment不是真实 DOM 树的一部分，它的变化不会触发 DOM 树的重新渲染，且不会导致性能等问题。

与直接操作 DOM 的区别

由于DocumentFragment不会出现在文档树中，将DocumentFragment插入文档树中，相当于把他的子孙节点插入到文档树中，在频繁的DOM操作时，我们就可以将DOM元素插入

DocumentFragment，之后一次性的将所有的子孙节点插入文档中。和直接操作DOM相比，将DocumentFragment 节点插入DOM树时，仅会触发页面的一次重绘，这样就大大提高了

页面的性能。