重繪與重排

2021-10-22 20:46:39 字數 532 閱讀 4244

在這些過程中,生成布局與布局繪製最耗費效能,因此我們應該減少不必要的這兩種操作.

重繪:我們對dom的修改造成元素樣式的改變,但並未造成元素幾何屬性的變化(比如修改元素的背景色或字型顏色)。因此瀏覽器並不需要重新生成布局,只會重新繪製,這個過程就叫做重繪

重排:我們對dom的修改造成了元素幾何屬性的變化(比如元素的位置或元素的寬高)。瀏覽器會重新生成布局,並重新進行繪製。所以重排會造成重繪,而重繪不一定會重排。

優化操作: 先將ul設定為display:none,再對其進行操作,因為display:none上的dom操作不會引發回流和重繪

這是測試資料

優化寫法:避免使用js乙個樣式修改完接著改下乙個樣式,最好一次性更改css樣式,或者將樣式列表定義為class的名稱

這是測試資料

重繪與重排

重繪就是重新繪製 repaint 重排就是重新排列 reflow dom發生改變的時候觸發重排,使dom重新排列,重繪不一定會重排,但是重排一定發生重繪,重繪和重排都會耗費瀏覽器的效能,盡量避免解析html繪製dom樹 解析css繪製css樹 生成render tree 渲染樹 flow排列,將渲染...

重排與重繪

重排和重繪作為前端必須要掌握的知識點,在面試 現的機率通常都是較高的 定義 重排,又可以叫回流,英文名reflow 屬於瀏覽器渲染機制的乙個過程 通常在第一次載入頁面觸發 在dom結構當中,每個元素都有只屬於自己的盒子 模型 這些都需要瀏覽器各種樣式來計算並根據計算結果將元素放到它該出現的位置,這就...

重繪與重排

重繪是乙個元素外觀的改變所觸發的瀏覽器行為。例如改變outline 背景色等屬性,瀏覽器會根據元素的新屬性重新繪製,使元素呈現新的外觀,重繪不會帶來重新布局,所以不一定伴隨重排。需要注意的是 重繪是以圖層為單位,如果圖層中某個元素需要重繪,那麼整個圖層都需要重繪,例如乙個圖層包含很多節點,其中有個g...