在搞清楚回流和重繪的概念之前,我們要清除瀏覽器的渲染過程。
解析生成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 ...