淺談瀏覽器重排（Relayout/Reflow）

前端晉級攻城獅發表於2019-08-09
瀏覽器

什麼是重排？

重排，是根據渲染樹中每個渲染物件的資訊，計算出各自渲染物件的幾何資訊（DOM物件的位置和尺寸大小），並將其安置在介面中的正確位置。

什麼情況下會引起重排？

頁面首次渲染。

瀏覽器視窗大小發生改變。

元素尺寸或位置發生改變。

元素內容變化（文字數量或圖片大小等等）。

元素字型大小變化。

新增或者刪除可見的DOM元素。

啟用CSS偽類（例如：:hover）。

設定style屬性

查詢某些屬性或呼叫某些方法。

如何避免/減少瀏覽器重排/迴流？

減少DOM操作

減少重排

css及動畫處理

相關文章