當dom的變化影響了元素的幾何屬性(寬或高),瀏覽器需要重新計算元素的幾何屬性,同時其他元素的幾何屬性和位置也會受到影響。瀏覽器會使渲染樹中受到影響的部分失效,並重新構造渲染樹,這個過程稱為重排。完成重排後,瀏覽器會重新繪製受到影響的部分到螢幕,這個過程稱為重繪。
由於瀏覽器的流布局,對渲染樹的計算通常只需要遍歷一次就可以完成。table及其內部元素除外,它可能需要多次計算才能確定好其在渲染樹中節點的屬性,通常要花三倍同等元素的時間。
觸發重排和重繪的情況
獲取布局資訊的操作
瀏覽器執行渲染佇列中的待處理變化
並觸發重排以返回正確的值
最小化重排和重繪
重繪和重排
重繪是乙個元素外觀的改變所觸發的瀏覽器行為,例如改變visibility outline 背景色等屬性。瀏覽器會根據元素的新屬性重新繪製,使元素呈現新的外觀。重繪不會帶來重新布局,並不一定伴隨重排。重排是更明顯的一種改變,可以理解為渲染樹需要重新計算 儘量減少重排次數和縮小重排的影響範圍 1.dom...
重繪和重排
構建dom樹 渲染引擎解析html文件,將所有標籤轉換為dom樹中的dom節點生成內容樹 構建渲染樹 解析對應的css樣式檔案資訊,樣式樹與dom樹結合構建成渲染樹 布局渲染樹 從根節點遞迴呼叫,計算每乙個元素的大小 位置等,給出每個節點所應該在螢幕上出現的精確座標 繪製渲染樹 遍歷渲染樹,使用ui...
重排和重繪
重繪是指乙個元素外觀的改變所觸發的瀏覽器行為,瀏覽器會根據元素的新屬性重新繪製,使元素呈現新的外觀。也叫重構 回流 reflow,當渲染樹中的一部分 或全部 因為元素的規模尺寸,布局,隱藏等改變而需要重新構建,這就稱為回流 reflow 每個頁面至少需要一次回流,就是在頁面第一次載入的時候。當dom...