前端有個很經典的問題是說下重排和重繪的區別，一般我們會說重排效能低，而重繪效能高。但其實我們可以深入**一下其中但原因。
定義當通過js或者 css 修改元素的幾何屬性，例如改變元素的寬度、高度等，那麼瀏覽器會觸發重新布局，解析之後的一系列子階段，這個過程就叫重排。無疑，重排需要更新完整的渲染流水線，所以開銷也是最大的。
圖示觸發條件
優化方案
盡量不要在布局資訊改變時做查詢（會導致渲染佇列強制重新整理）。
合併多次dom操作。比如用class來改變多個樣式。
避免使用table。
使用fragment元素（createdocumentfragment）
讓元素脫離文件流。即讓當前元素有自己的圖層。
多次修改時把dom 離線 ，修改完再顯示。(display:none)
使用採用虛擬dom的庫，如vue，react
will-change: transform 啟用硬體加速
定義當通過js或者 css 修改元素的繪製屬性，例如改變元素的背景顏色，那麼布局階段將不會被執行，因為並沒有引起幾何位置的變換，所以就直接進入了繪製階段（即生成待繪製列表），然後執行之後的一系列子階段，這個過程就叫重繪。相較於重排操作，重繪省去了布局和分層階段，所以執行效率會比重排操作要高一些。
圖示
觸發條件
優化方案
合併多次操作
定義更改乙個既不要布局也不要繪製的屬性，渲染引擎將跳過布局和繪製，只執行後續的合成操作，我們把這個過程叫做合成。比如我們使用了 css 的 transform 來實現動畫效果，這可以避開重排和重繪階段，直接在非主線程上執行合成動畫操作。這樣的效率是最高的，因為是在非主線程上合成，並沒有占用主線程的資源，另外也避開了布局和繪製兩個子階段，所以相對於重繪和重排，合成能大大提公升繪製效率。
圖示
觸發條件
優化方案
使用will-change提前宣告，使得渲染引擎將該元素單獨實現一幀。（空間換時間）。
⚠️：每當渲染引擎為乙個元素準備乙個獨立層的時候，它占用的記憶體也會大大增加，因為從層樹開始，後續每個階段都會多乙個層結構，這些都需要額外的記憶體，所以你需要恰當地使用 will-change。參考：
重繪與重排
重繪就是重新繪製 repaint 重排就是重新排列 reflow dom發生改變的時候觸發重排，使dom重新排列，重繪不一定會重排，但是重排一定發生重繪，重繪和重排都會耗費瀏覽器的效能，盡量避免解析html繪製dom樹 解析css繪製css樹 生成render tree 渲染樹 flow排列，將渲染...
重排與重繪
重排和重繪作為前端必須要掌握的知識點，在面試 現的機率通常都是較高的 定義 重排，又可以叫回流，英文名reflow 屬於瀏覽器渲染機制的乙個過程 通常在第一次載入頁面觸發 在dom結構當中，每個元素都有只屬於自己的盒子 模型 這些都需要瀏覽器各種樣式來計算並根據計算結果將元素放到它該出現的位置，這就...
重繪與重排
重繪是乙個元素外觀的改變所觸發的瀏覽器行為。例如改變outline 背景色等屬性，瀏覽器會根據元素的新屬性重新繪製，使元素呈現新的外觀，重繪不會帶來重新布局，所以不一定伴隨重排。需要注意的是 重繪是以圖層為單位，如果圖層中某個元素需要重繪，那麼整個圖層都需要重繪，例如乙個圖層包含很多節點，其中有個g...