重排和重绘

重排和重绘理解及解决方法

一、重排的概念

当DOM的变化影响了元素的几何信息(元素的的位置和尺寸大小)，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排。

重排也叫回流，简单的说就是重新生成布局，重新排列元素。
二、重排触发条件

1.页面初始渲染，这是开销最大的一次重排
2.添加/删除可见的DOM元素
3.改变元素位置
4.改变元素尺寸，比如边距、填充、边框、宽度和高度等
5.改变元素内容，比如文字数量，图片大小等
6.改变元素字体大小
7.改变浏览器窗口尺寸，比如resize事件发生时
8.激活CSS伪类（例如：:hover）
9.设置 style 属性的值，因为通过设置style属性改变结点样式的话，每一次设置都会触发一次reflow
10.查询某些属性或调用某些计算方法：offsetWidth、offsetHeight等，当我们调用 getComputedStyle方法，或者IE里的 currentStyle 时，也会触发重排。
三、重绘的概念

当一个元素的外观发生改变，但没有改变布局,重新把元素外观绘制出来的过程，叫做重绘。
四、重绘触发条件

color
border-style
visibility
background
text-decoration
background-image
background-position
background-repeat
outline-color
outline
outline-style
border-radius
outline-width
box-shadow
background-size

这些属性都会导致重绘
五、重排重绘优化解决
1.减少重排范围

    我们应该尽量以局部布局的形式组织html结构，尽可能小的影响重排的范围。

    不要使用 table 布局，可能很小的一个小改动会造成整个 table 的重新布局。那么在不得已使用table的场合，可以设置table-layout:auto;或者是table-layout:fixed这样可以让table一行一行的渲染，这种做法也是为了限制reflow的影响范围。

2.减少重排次数

1.避免逐项更改样式。最好一次性更改 style 属性，或者将样式列表定义为 class 并一次性更改 class 属性。
2.将 DOM 离线。“离线”意味着不在当前的 DOM 树中做修改，我们可以这样做：

    使用 display:none
    一旦我们给元素设置 display:none 时（只有一次重排重绘），元素便不会再存在在渲染树中，相当于将其从页面上“拿掉”，我们之后的操作将不会触发重排和重绘，添加足够多的变更后，通过 display属性显示（另一次重排重绘）。通过这种方式即使大量变更也只触发两次重排。另外，visibility : hidden 的元素只对重绘有影响，不影响重排。
    通过 documentFragment 创建一个 dom 碎片,在它上面批量操作 dom，操作完成之后，再添加到文档中，这样只会触发一次重排。
    复制节点，在副本上工作，然后替换它！

3.将复杂的元素绝对定位或固定定位，使它脱离文档流。
4.不要使用 table 布局，可能很小的一个小改动会造成整个 table 的重新布局
5.避免多次读取 offsetLeft 等属性。
6.优化动画

    可以把动画效果应用到 position属性为 absolute 或 fixed 的元素上，这样对其他元素影响较小。

    动画效果还应牺牲一些平滑，来换取速度，这中间的度自己衡量：比如实现一个动画，以1个像素为单位移动这样最平滑，但是Layout就会过于频繁，大量消耗CPU资源，如果以3个像素为单位移动则会好很多。

    启用GPU加速
    GPU 硬件加速是指应用 GPU 的图形性能对浏览器中的一些图形操作交给 GPU 来完成，因为 GPU 是专门为处理图形而设计，所以它在速度和能耗上更有效率。

    通过transform、opacity、filter、will-change来触发CSS硬件加速（GPU）

    GPU 加速通常包括以下几个部分：Canvas2D，布局合成, CSS3转换（transitions），CSS3 3D变换（transforms），WebGL和视频(video)。

7.使用 visibility 替换 display: none ，因为前者只会引起重绘，后者会引发回流（改变了布局）。
六、回流必定会发生重绘，重绘不一定会引发回流!