浏览器重排和重绘触发情况

浏览器渲染引擎解析HTML文档形成DOM树，解析CSS文档形成样式规则，DOM树和样式规则结合形成渲染树，然后开始绘制。渲染树需要重新分析且节点尺寸需要重新计算就称为重排。节点的几何属性或者样式发生变化就称为重绘。任何改变渲染树构建信息的行为都会导致重排或者重绘。如：

• 添加、删除、更新DOM节点
• 通过display: none隐藏一个DOM节点-触发重排和重绘
• 通过visibility: hidden隐藏一个DOM节点-只触发重绘，因为没有几何变化
• 移动或者给页面中的DOM节点添加动画
• 添加一个样式表，调整样式属性
• 用户行为，例如调整窗口大小，改变字号，或者滚动。
• 代码去请求元素样式信息时
  浏览器重排重绘代价很昂贵，因为这会使得UI反应缓慢，响应不迅速。因此浏览器会基于脚本形成一个变化的队列，当达到一定的时间或者队列中的任务数量时，浏览器才去执行重排或者重绘。当你的代码请求样式信息时，浏览器为了提供最新的信息，应用队列中的所有变更，来执行重排重绘。