浏览器的重绘和回流是什么意思？如何进行优化呢？
回答·4
最热
最新
- 回流是改变 dom 结构，重绘只改变 css 样式，不改变布局，回流会引起重绘，重绘不一定引发回流。避免重绘和回流引发的重绘
- reflow 和 repaint 是 webkit GUI 线程绘制和更新画面的机制。reflow 是指当渲染树中有 layout 或者 position 的变更时，会触发 webkit 计算新的节点布局。repaint 是指 webkit 调用操作系统的绘图 api 对页面进行重新绘制。 JavaScript 和 CSS 都可能引起 reflow，这往往伴随着盒子的尺寸、位置、层级的变化。reflow 一定会引起 repaint。不引发 reflow 也可能会触发 repaint，如颜色等变化。 频繁的引起 reflow 和 repaint 可能会影响页面的性能，但是这只是理论上。因为现代的浏览器会对 reflow 和 repaint 进行合并处理。所以大可不必因为它们可能对页面的性能造成影响而过度担忧。
- 浏览器的回流是布局或者几何属性需要改变， 重绘是由于节点的几何属性发生改变或者由于样式发生改变但不会影响布局， 使用 CSS 优化减少发生回流跟重绘的可能性