>[danger]什么是Css中的回流（重排）与重绘？ 回流（重排）（reflow）和重绘（repaint）是**浏览器渲染页面**时的两个核心概念。 * **回流（重排）指的是当页面中的元素发生布局或几何属性发生变化时**，浏览器需要重新计算这些元素的位置和大小，然后重新构建页面的渲染树，这个过程称为回流。由于需要重新计算布局，回流的代价很大，会对页面的性能产生负面影响。 * **重绘指的是当页面中的元素样式发生改变时**，浏览器会重新绘制这些元素的外观，但不会改变它们在页面中的位置和大小。重绘的代价相对较小，但仍然会对页面性能产生一定的影响。 >[info]技术详解 重绘和回流会在我们设置节点样式时频繁出现，同时也会很大程度上影响性能。 * 重绘是当节点需要更改外观而不会影响布局的，比如改变`color`就叫称为重绘 * 回流是布局或者几何属性需要改变就称为回流。 回流**必定**会发生重绘，重绘**不一定**会引发回流。回流所需的成本比重绘高的多，改变父节点里的子节点很可能会导致父节点的一系列回流。 以下几个动作可能会导致性能问题： * 改变`window`大小 * 改变字体 * 添加或删除样式 * 文字改变 * 定位或者浮动 * 盒模型 并且很多人不知道的是，重绘和回流其实也和 Eventloop 有关。 1. 当 Eventloop 执行完 Microtasks 后，会判断`document`是否需要更新，因为浏览器是 60Hz 的刷新率，每 16.6ms 才会更新一次。 2. 然后判断是否有`resize`或者`scroll`事件，有的话会去触发事件，所以`resize`和`scroll`事件也是至少 16ms 才会触发一次，并且自带节流功能。 3. 判断是否触发了 media query 4. 更新动画并且发送事件 5. 判断是否有全屏操作事件 6. 执行`requestAnimationFrame`回调 7. 执行`IntersectionObserver`回调，该方法用于判断元素是否可见，可以用于懒加载上，但是兼容性不好 8. 更新界面 9. 以上就是一帧中可能会做的事情。如果在一帧中有空闲时间，就会去执行`requestIdleCallback`回调。 以上内容来自于[HTML 文档](https://html.spec.whatwg.org/multipage/webappapis.html#event-loop-processing-model)。