JS學習筆記 (二)回流和重繪

2021-09-25 14:17:00 字數 1615 閱讀 8752

在搞清楚回流和重繪的概念之前,我們要清除瀏覽器的渲染過程。

解析生成dom tree(此時包含所有節點,包括display:none);

根據css object module(ccssom)計算節點的幾何屬性(座標和大小)(margin,pading,height,width等),生成render tree(不包含display: none的節點);這一過程叫回流或者布局;

在render tree進一步渲染其它屬性。如:color等。

重繪:當我們對 dom 的修改導致了樣式的變化、卻並未影響其幾何屬性(比如修改了顏色或背景色)時,瀏覽器不需重新計算元素的幾何屬性、直接為該元素繪製新的樣式(跳過了上圖所示的回流環節)。

回流:當我們對 dom 的修改引發了 dom 幾何尺寸的變化(比如修改元素的寬、高或隱藏元素等)時,瀏覽器需要重新計算元素的幾何屬性(其他元素的幾何屬性和位置也會因此受到影響),然後再將計算的結果繪製出來。這個過程就是回流(也叫重排)

通過上訴我們知道:回流必定引發重繪,重繪不一定引發回流回流的代價比重繪高。

1)搞清楚了回流和重繪的概念,我們很容易知道哪些屬性的修改會引起回流:

dom的新增和刪除;

頁面的載入;

元素尺寸改變——邊距、填充、邊框、寬度和高度;

元素位置的改變;

內容變化,比如使用者在input框中輸入文字;

瀏覽器視窗尺寸改變——resize事件發生時;

獲取某些屬性:offsettop、offsetleft、 offsetwidth、offsetheight、scrolltop、scrollleft、scrollwidth、scrollheight、 clienttop、clientleft、clientwidth、clientheight。(瀏覽器為了返回最精確的值,需要flush佇列,因為佇列中可能會有影響到這些值的操作)

2)常見引起重繪的屬性:

3)如何減少回流、重繪:

使用 transform 替代 top

使用 visibility 替換 display: none ,因為前者只會引起重繪,後者會引發回流(改變了布局)

不要把節點的屬性值放在乙個迴圈裡當成迴圈裡的變數。

不要使用 table 布局,可能很小的乙個小改動會造成整個 table 的重新布局

動畫實現的速度的選擇,動畫速度越快,回流次數越多,也可以選擇使用 requestanimationframe

css 選擇符從右往左匹配查詢,避免節點層級過多

將頻繁重繪或者回流的節點設定為圖層,圖層能夠阻止該節點的渲染行為影響別的節點。比如對於 video 標籤來說,瀏覽器會自動將該節點變為圖層。

瀏覽器的回流優化機制:瀏覽器會維護1個佇列,把所有會引起重排、重繪的操作放入這個佇列,等佇列中的操作到了一定的數量或者到了一定的時間間隔,瀏覽器就會flush佇列,進行乙個批處理。這樣就會讓多次的重排、重繪變成一次重排重繪。

JS學習筆記 (二)回流和重繪

在搞清楚回流和重繪的概念之前,我們要清除瀏覽器的渲染過程。解析生成dom tree 此時包含所有節點,包括display none 根據css object module ccssom 計算節點的幾何屬性 座標和大小 margin,pading,height,width等 生成render tree...

機器學習第二回 矩陣部分總結

感覺這一回的前半部分還很簡單,屬於矩陣的基本操作,所以進行乙個簡單的總結,可能隨著學習的深入還會補充 矩陣 通常用大寫字母表示,而數字的表示通常使用小寫字母 在本課程中,下標都從1開始。向量 單列矩陣,通常是n 1階,向量的行數也稱為維數。對應序號位置的元素相加即可 做加法的兩個矩陣的維數必須相同 ...

C STL程式設計學習(二)回到最初的起點

模板函式實現原理 結尾在上一次的stl學習中,明白了關於c 標準庫中的的第乙個內部使用物件i o物件的使用,包括基本的輸入輸出,與檔案內容的輸入輸出,順便學習了系統操作引數int argc 與char ar 與對stl更為方便的函式表示式 lambda表示式 capture list params ...