了解repaint與reflow的觸發場景

2021-08-17 11:02:15 字數 1138 閱讀 7027

感興趣的可以看看哦~

體現:repaint是某個dom元素進行重繪;

reflow是整個頁面進行重排,也就是頁面所有dom元素渲染。(可能造成頁面原來的規劃打亂)

如何觸發:

style變動造成repaint和reflow。

不涉及任何dom元素的排版問題

的變動為repaint,例如元素的color/text-align/text-decoration等等屬性的變動。

除上面所提到的dom元素style的修改基本為reflow。例如元素的任何涉及長、寬、行高、邊框、display等style的修改。

(即改變了元素在文件流中的大小,從而影響了其它元素的排版)

常見觸發場景:

觸發repaint:

color的修改,如color=#ddd;

text-align的修改,如text-align=center;

a:hover也會造成重繪。

:hover引起的顏色等不導致頁面回流的style變動。

等等太多,一時間寫出來也太難想了。

觸發reflow:

width/height/border/margin/padding的修改,如width=778px;

動畫,:hover等偽類引起的元素表現改動,display=none等造成頁面回流;

font類style的修改;

background的修改,注意著字面上可能以為是重繪,但是瀏覽器確實回流了,經過瀏覽器廠家的優化,部分background的修改只觸發repaint,當然ie不用考慮;

scroll頁面,這個不可避免;

resize頁面,桌面版本的進行瀏覽器大小的縮放,移動端的話,還沒玩過能拖動程式,resize程式視窗大小的多視窗作業系統。

讀取元素的屬性(這個無法理解,但是技術達人是這麼說的,那就把它當做定理吧):讀取元素的某些屬性(offsetleft、offsettop、offsetheight、offsetwidth、scrolltop/left/width/height、clienttop/left/width/height、getcomputedstyle()、currentstyle(in ie));

注意:visibility:hidden 讓元素隱藏起來,雖然元素隱藏起來了但是在文件流還是佔據一定的位置,並不會觸發reflow

關於Repaint(重繪)與Reflow(回流)

關於回流和重繪在剛開始學習前端時一般不會太在意,因為其影響的大多是執行時的效能問題。顯然,頻繁地進行回流和重繪會導致執行效能的下降,所以,在要求效能的時候,往往要注意減少頁面的回流和重繪。repaint重繪 不會改變dom的排版,僅僅改變某個元素的一些表現。比如,字型顏色的變化,背景顏色,透明度,輸...

OLAP了解與OLAP引擎

一 olap的基本概念 二 olap的基本內容 1 變數 度量 變數是資料度量的指標,是資料的實際意義,即描述資料 是什麼 像示例中的人數。2 維度 維度是描述與業務主題相關的一組屬性,單個屬性或屬性集合可以構成乙個維。如示例中的學歷 民族 性別等都是維度。3 維的層次 乙個維往往可以具有多個層次,...

nginx 簡單了解與安裝

nginx 是高效能的 http 和反向 的伺服器,處理高併發能力是十分強大的,能經受高負 載的考驗,有報告表明能支援高達 50,000 個併發連線數。1 反向 首先先看一下什麼事正向 使用者主動去指定的 訪問,通過配置的 伺服器 反向 就是與正向 相反的操作,暴露的是 伺服器的位址,隱藏真實伺服器...