说一下重绘、重排区别如何避免？

要点： 改变元素尺寸、重新计算布局树、重排必定重绘、重绘避开了重建布局树和分层、GPU加速、脱离文档流、样式集中改变

答：

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

重绘：当一个元素的外观发生改变，但没有改变布局，重新把元素外观绘制出来的过程，所以重绘跳过了创建布局树和分层的阶段。

重排需要重新计算布局树，重绘不需要，重排必定发生重绘，但是涉及到重绘不一定要重排。涉及到重排对性能的消耗更多一些。

触发重排的方法：

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

避免重排的方式 ：

• 样式集中改变
• 使用 absolute 或 fixed 脱离文档流
• 使用GPU加速:transform

GPU的过程是以下这几步 : 1. 获取DOM并将其分割成多个层(renderLayer) 2. 将每个层栅格化，并独立的绘制进位图中 3. 将这些位图作为纹理上传至GPU 4. 复合多个层来生成最终的屏幕图像(最后的layer) 开启了GPU加速的元素被独立出来，不会再影响其他dom的布局，因为它改变之后，只是相当于被贴上了页面。