css 重排重绘

重排 回流

1. 回流 我们计算它们在当前设备的位置和尺寸，这是布局要做到工作。该阶段在英语中也被称之为回流 ， 当 render tree 的一部分元素的规模尺寸，布局，隐藏改变时 而需要重新构建，也会回流 每个页面至少需要一次回流，就是在页面第一次加载的时候
2. 重绘 当 render tree 中的一些元素需要更新属性 而这些属性影响 外观 风格颜色，而布局不影响 就叫重绘

浏览器有个 performance 可以查看当前的 加载所用的时间

1. 蓝色：网络通信和 html 解析
2. 黄色：JavaScript 执行
3. 紫色：样式计算和布局，即重排
4. 绿色：重绘

重排重绘 性能

1. 重排重绘没发放一个队列 多个重绘 写一起会放一个队列 会触发一次重绘 多个重排写一起也只会触发一起 但是重排重绘掺杂写就会触发多次例如

bad:
重排重绘两次
div.style.left = div.offsetLeft + 'px'
div.style.left = div.offsetTop + 'px'


Goog:
重排一次
var left = div.offsetLeft + 'px'
var top = div.offsetLeft + "px"
重排一次
div.style.left = letf
div.style.top = top

触发重排的操作

1. 页面的初次渲染
2. DOM 树的结构变化，包括添加、删除 dom 元素
3. 获取某些属性，包括 offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle()，获取时应当做适当的缓存
4. 改变元素位置（未脱离文档流的情况下）
5. DOM 元素的几何属性变化（高度，宽度，padding，margin 等）
6. 元素内容改变
7. 调整缩放，触发 resize

触发重绘的操作

1. 这些属性 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. 将改变样式的属性尽可能集中放置
2. 对获取时会触发重排的属性进行缓存（运行时允许的情况下）
3. 需要改变多个样式的时候，利用切换 class 来实现
4. 部分元素脱离文档流操作
5. 添加和删除 dom 节点时，尽可能放在一起操作，比如添加一张表单的时候，直接在内存中准备好整个表单的 dom 元素插入，而不是用遍历的方式多次插入。
6. 脱离文档流的情况

• 元素脱离文档留时，其自身的变化只会导致自身的重排，而不会影响其他元素，所以对于需要经常重绘的元素，可以将 position 设置为 absolute 或 fixed，脱离文档流。

原文链接