回流(reflow)與重繪(repaint)
阿新 • • 發佈:2019-03-10
瀏覽器 gin style 圖片 。。 css 徹底 off 繪制
回流與重繪這兩個詞語經常見到,面試中這兩個詞語的出現的頻率也比較高,每每別人談到回流與重繪時,哦,這個我知道,但是讓我講個因果所以然,好像嗯。。。好像我並不是懂的很徹底
什麽是回流(reflow)?
Render樹中部分或全部元素的尺寸、結構、或某些屬性(如邊距)發生改變時,瀏覽器重新渲染部分或全部文檔的過程稱為回流。
什麽是重繪(repaint)?
當元素的一部分屬性發生改變並不影響它在文檔流中的位置時(如: color, background-color),瀏覽器會將新樣式賦予給元素並重新繪制它,這個過程稱為重繪。
==> 從性能方面解析回流
具體什麽會影響回流?
我們從定義上就知道什麽會影響回流,但是影響回流的因素太多,一兩句話是無法全面概況,下面詳細羅列出影響回流的因素有哪些
1 初次頁面加載時,頁面渲染初始化
2 瀏覽器窗口大小發生改變
3 刪除或添加某個元素
4 改變某個元素對應的屬性(如margin,padding,height,width,border)
5 改變某個元素的內容(如字體大小,文字數量,圖片大小)
6 CSS偽類激活
7 查詢某些屬性或調用某些方法
- clientWidth、clientHeight、clientTop、clientLeft
- offsetWidth、offsetHeight、offsetTop、offsetLeft
- scrollWidth、scrollHeight、scrollTop、scrollLeft
- scrollIntoView()、scrollIntoViewIfNeeded()
- getComputedStyle()
- getBoundingClientRect()
- scrollTo()
回流會造成什麽樣的結果?
如何避免回流?
回流(reflow)與重繪(repaint)