感興趣的可以看看哦~
體現: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 反向 首先先看一下什麼事正向 使用者主動去指定的 訪問,通過配置的 伺服器 反向 就是與正向 相反的操作,暴露的是 伺服器的位址,隱藏真實伺服器...