重排與重繪

2021-10-08 15:30:10 字數 1059 閱讀 4499

重排和重繪作為前端必須要掌握的知識點,在面試**現的機率通常都是較高的

定義

重排,又可以叫回流,英文名reflow;屬於瀏覽器渲染機制的乙個過程;通常在第一次載入頁面觸發;在dom結構當中,每個元素都有只屬於自己的盒子(模型),這些都需要瀏覽器各種樣式來計算並根據計算結果將元素放到它該出現的位置,這就是重排

觸發重排

1:頁面第一次渲染(初始化)

2:dom數變化(對節點的增刪)

3:render樹變化(padding改變)

4:瀏覽器視窗resize

5:獲取元素的某些特徵(offerwidth,offerheight)

總的一句話來說就是會導致瀏覽器需要重新計算元素位置的操作都會引起重排

定義當各種盒子的位置,大小以及其他屬性,例如顏色,字型大小被確定下來之後,瀏覽器於是便把這些元素都按照各自的特徵都繪製了一遍,於是頁面的內容就出現了,這個過程就叫重繪(repaint)

觸發重繪

1:重排

2:修改那些不會引起瀏覽器重新計算元素位置大小的元素特性,比如設定元素的背景顏色

重排一定會引起重繪,但是重繪就不一定會引起重排

1:操作dom,比如使用js對dom節點進行增刪的頻率不要過高,盡量一次性修改;比如要增加多個節點的時候就可以先把要新增的節點先集中新增到乙個元素節點div,然後再把該div新增到dom中

2:盡量不要修改字型的大小

3:在對某乙個元素進行操作的時候先設定display:none,修改完畢之後在讓元素顯示

4:考慮對乙個元素節點進行操作的時候是否會影響到其它元素節點,把影響的範圍盡量降到最小

現在的瀏覽器已經對回流進行了優化,它會等到足夠數量的變化發生,才做一次批處理回流

重排就像是我們構建一棟房子,我們需要計算每一堵牆,每乙個房間的位置,當我們要拆除某一堵牆時需要搬離家具等就會引起重排;而重繪就像是我們給牆刷牆漆,不會影響到家裡的其它布局

參考觸發瀏覽器回流的屬性方法一覽表

如何減少回流、重繪

重繪與重排

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

重繪與重排

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

重排與重繪

1.重排reflow reflow指的是重新計算頁面布局 某個節點reflow時會重新計算節點的尺寸和位置,而且還有可能觸發其子節點,祖先節點和頁面上的其他節點reflow,在這之後再觸發一次repaint 當render tree中的一部分 或全部 因為元素的規模尺寸,布局,隱藏等改變而需要重新構...