重排和重繪

重繪是指乙個元素外觀的改變所觸發的瀏覽器行為，瀏覽器會根據元素的新屬性重新繪製，使元素呈現新的外觀。

也叫重構/回流/reflow，當渲染樹中的一部分(或全部)因為元素的規模尺寸，布局，隱藏等改變而需要重新構建, 這就稱為回流(reflow)。每個頁面至少需要一次回流，就是在頁面第一次載入的時候。

當dom的變化引發了元素幾何屬性的變化，比如改變元素的寬高，元素的位置，導致瀏覽器不得不重新計算元素的幾何屬性，並重新構建渲染樹，這個過程稱為「重排」。完成重排後，要將重新構建的渲染樹渲染到螢幕上，這個過程就是「重繪」。所以重排也一定重繪了，但重繪不一定重排。

只有元素的幾何屬性發生變化就會引起重排

（1）元素尺寸變化

（2）內容變化

（3）新增或刪除dom節點

（4）頁面渲染器初始化

（5）元素位置變化（布局）

（6）瀏覽器視窗大小變化

參考這篇——前端效能優化之重排和重繪

重繪和重排

重繪是乙個元素外觀的改變所觸發的瀏覽器行為，例如改變visibility outline 背景色等屬性。瀏覽器會根據元素的新屬性重新繪製，使元素呈現新的外觀。重繪不會帶來重新布局，並不一定伴隨重排。重排是更明顯的一種改變，可以理解為渲染樹需要重新計算 儘量減少重排次數和縮小重排的影響範圍 1.dom...

重排和重繪

當dom的變化影響了元素的幾何屬性 寬或高 瀏覽器需要重新計算元素的幾何屬性，同時其他元素的幾何屬性和位置也會受到影響。瀏覽器會使渲染樹中受到影響的部分失效，並重新構造渲染樹，這個過程稱為重排。完成重排後，瀏覽器會重新繪製受到影響的部分到螢幕，這個過程稱為重繪。由於瀏覽器的流布局，對渲染樹的計算通常...

重繪和重排

構建dom樹 渲染引擎解析html文件，將所有標籤轉換為dom樹中的dom節點生成內容樹 構建渲染樹 解析對應的css樣式檔案資訊，樣式樹與dom樹結合構建成渲染樹 布局渲染樹 從根節點遞迴呼叫，計算每乙個元素的大小 位置等，給出每個節點所應該在螢幕上出現的精確座標 繪製渲染樹 遍歷渲染樹，使用ui...