前端之css - 迴流與重繪

迴流與重繪定義:

當render tree中的一部分(或全部)因爲元素的規模尺寸,佈局,隱藏等改變而需要重新構建。這就稱爲迴流(reflow)。每個頁面至少需要一次迴流,就是在頁面第一次加載的時候。在迴流的時候,瀏覽器會使渲染樹中受到影響的部分失效,並重新構造這部分渲染樹,完成迴流後,瀏覽器會重新繪製受影響的部分到屏幕中,該過程成爲重繪。
當render tree中的一些元素需要更新屬性,而這些屬性只是影響元素的外觀,風格,而不會影響佈局的,比如background-color。則就叫稱爲重繪。

注意:迴流必將引起重繪,而重繪不一定會引起迴流。

迴流何時發生:

當頁面佈局和幾何屬性改變時就需要回流。下述情況會發生瀏覽器迴流:

1、添加或者刪除可見的DOM元素;

2、元素位置改變;

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

4、內容改變——比如文本改變或者圖片大小改變而引起的計算值寬度和高度改變;

5、頁面渲染初始化;

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

如何減少迴流、重繪

減少迴流、重繪其實就是需要減少對render tree的操作(合併多次多DOM和樣式的修改),並減少對一些style信息的請求,儘量利用好瀏覽器的優化策略。具體方法有:

1. 直接改變className,如果動態改變樣式,則使用cssText(考慮沒有優化的瀏覽器)
2. 讓要操作的元素進行”離線處理”,處理完後一起更新
    a) 使用DocumentFragment進行緩存操作,引發一次迴流和重繪;
    b) 使用display:none技術,只引發兩次迴流和重繪;
    c) 使用cloneNode(true or false) 和 replaceChild 技術,引發一次迴流和重繪;
3.不要經常訪問會引起瀏覽器flush隊列的屬性,如果你確實要訪問,利用緩存
4.讓元素脫離動畫流,減少迴流的Render Tree的規模
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章