>[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)。