頁面的重匯和回流

2022-07-23 18:51:13 字數 1181 閱讀 7488

重匯和回流的簡介:

1. 當render tree中的一部分(或全部)因為元素的規模尺寸,布局,隱藏等改變而需要重新構建。這就稱為回流(reflow)。每個頁面至少需要一次回流,就是在頁面第一次載入的時候。在回流的時候,瀏覽器會使渲染樹中受到影響的部分失效,並重新構造這部分渲染樹,完成回流後,瀏覽器會重新繪製受影響的部分到螢幕中,該過程成為重繪。

2. 當render tree中的一些元素需要更新屬性,而這些屬性只是影響元素的外觀,風格,而不會影響布局的,比如background-color。則就叫稱為重繪。

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

**什麼時候會發生回流?

當頁面布局和幾何屬性改變時候就需要回流。下面的情況會引發瀏覽器的回流:

1:新增或者刪除可見的dom元素

2:元素位置改變;

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

5:頁面渲染初始化

6:瀏覽器視窗尺寸改變---resize事件發生時

**什麼時候發生重繪?

1.改變字型

2.增加或者移除樣式表

3.內容變化(input框輸入文字)

4.啟用css偽類    eg   :hover

5.計算offsetwidth、offsetheigth屬性(瀏覽器的可見高度)

6.設定style屬性的值

3.如何減少回流、重繪

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

1. 直接改變classname,如果動態改變樣式,則使用csstext(考慮沒有優化的瀏覽器)

2. 讓要操作的元素進行」離線處理」,處理完後一起更新

a) 使用documentfragment進行快取操作,引發一次回流和重繪;

b) 使用display:none技術,只引發兩次回流和重繪;

c) 使用clonenode(true or false) 和 replacechild 技術,引發一次回流和重繪;

3.不要經常訪問會引起瀏覽器flush佇列的屬性,如果你確實要訪問,利用快取

4. 讓元素脫離動畫流,減少回流的render tree的規模

web頁面的回流和重繪

什麼是回流?回流也叫重排 reflow 當頁面中的元素發生影響布局的變化,比如 改變寬高,修改顯示影藏。頁面需要重新布局,就會觸發重排。簡單的說就是,頁面布局改變,就會觸發重排。什麼是重繪 repaint 頁面中的元素樣式發生改變注意 每個頁面只要會發生一次重排和重繪。重排一定會觸發重繪前端效能優化...

頁面的回流與重繪

在構建渲染樹的過程中,瀏覽器主要完成了一下工作 前邊通過構造渲染樹,我們將可見dom節點以及它對應的樣式結合起來,可是我們還需要計算他們在裝置視口 viewport 內的準確位置和大小,這個計算的階段就是回流。最終,我們通過構造渲染樹和回流階段,我們知道了哪些節點是可見的,以及可見節點的樣式和具體的...

頁面的重繪與回流

上次在面試中,面試官問了我乙個關於頁面重繪和回流的問題,我解釋的不怎麼好。今天把它整理了一下,又參考了一些其他的文章。參考文章 頁面載入過程 1 瀏覽器將獲取到的html 解析成乙個dom樹,html中的每乙個標籤都是dom樹中的乙個節點,根節點就是document。dom樹中包含了所有的html標...