前端女娲补天 CSS（六） 什么是重排，什么是重绘，怎么减少重排重绘

什么是重排

在影响了元素的几何信息后(元素的位置和大小)，可能会同时影响其他元素的几何信息，浏览器需要重新计算各元素在的几何属性，相关的渲染树会被废弃并重构，这个过程叫做重排。

什么是重绘

在渲染树重构或某一元素样式改变时发生。将渲染树的各个节点渲染为屏幕上的实际像素。

重排一定触发重绘，重绘不一定触发重排。

怎么减少重排重绘

• 样式集中改变，使用class统一改变style或者使用cssText。

什么是cssText？
cssText可以在JS的DOM操作中修改元素的style样式，写法是：
document.getElementById(“button”).style.cssText = “color:red; font-size:13px;”
IE9以下不兼容，会出现属性大写，去掉最后一个分号等问题。
cssText要添加style属性，只需要在cssText上用+=拼串，IE会去掉最后一个分号，需在拼串时在字符串前加分号。

• 批量操作DOM，在使用DOM操作元素width等属性时统一处理。
• 使用absolute或者fixed去使元素脱离文档流。

脱离文档流指元素脱离了文档，不再占据默认的空间，下面的元素会上去补位。
绝对定位脱离文档流，元素可能和其他元素重叠。
float脱离文档流，其他元素可能会围绕此元素。

• 使用css Transform的translateXY代替left，top.
  这样既可以通过Translate开启GPU加速，又可以让元素在GPU图层中独立渲染。