20170629-重排與重繪

Dogee 發布于2019-08-29 12:51 / 2728人閱讀

摘要：完成重排后，瀏覽器會重新繪制受到影響的部分到屏幕中，該過程稱為重繪重繪和重排操作都是代價昂貴的操作，它們會導致應用程序的反應遲鈍，所以應該盡可能減少這類過程的發生。

瀏覽器下載完頁面中的所有內容：HTML、JavaScript、CSS、圖片——之后會解析并生成兩個內部數據結構：

DOM樹：表示頁面結構

渲染樹：表示DOM節點如何顯示

DOM樹中的每一個需要顯示的節點在渲染樹中至少存在一個對應的節點(隱藏的DOM元素在渲染樹中沒有對應的節點)。渲染樹中的節點被稱為“幀”或者“盒子”，理解頁面元素為一個具有填充(padding)、邊距(margin)、邊框(border)和位置(position)的盒子。一旦DOM樹和渲染樹構建完成，瀏覽器就開始顯示(繪制 paint)頁面元素

當DOM的改變影響了元素幾何屬性（例如寬和高）——瀏覽器就需要重新計算元素的幾何特性，同樣其他元素的幾何屬性和位置也會因此受到影響。瀏覽器會使渲染樹中受到影響的部分失效，并重新構造渲染樹。這個過程稱為重排(reflow)。完成重排后，瀏覽器會重新繪制受到影響的部分到屏幕中，該過程稱為重繪(repaint)

重繪和重排操作都是代價昂貴的操作，它們會導致web應用程序的UI反應遲鈍，所以應該盡可能減少這類過程的發生。

引起重排的原因

添加或刪除可見的DOM元素

元素位置改變

元素尺寸改變

內容改變（例如：文本改變或圖片被另一個不同尺寸的圖片替代）

頁面渲染初始化

瀏覽器窗口尺寸改變

渲染樹變化的排隊與刷新

由于每次重排都會產生計算消耗，大多數瀏覽器通過隊列化修改和批量執行來優化重排過程（將多個重排過程合并成一次）。然而，某些操作會強制刷新隊列并要求隊列中的重排立即執行（這樣會使瀏覽器的優化策略失效）。

獲取布局信息的操作會導致強制刷新隊列，使得瀏覽器不得不執行渲染隊列中的“待處理變化”并觸發重排以返回正確的值

offsetTop，offsetLeft，offsetWidth，offsetHeight

scrollTop，scrollLeft，scrollWidth，scrollHeight

clientTop，clientLeft，clientWidth，clientHeight

getComputedStyle()

優化方法：盡量不要在布局信息改變時查詢它，可以在布局信息改變完畢之后再去查詢

最小化重繪和重排

重繪和重排的代價非常昂貴，因此一個好的提高程序響應速度的策略就是減少此類操作的發生。為了減少發生次數，應該合并多次對DOM和樣式的修改，然后一次處理掉。

合并多次對樣式的修改

var el = document.getElementById("myDiv")
el.style.borderLeft = "1px"
el.style.borderRight = "2px"
el.style.padding = "5px"

上面的例子中，存在兩個問題：

每個樣式屬性的改變都會影響元素的集合結構，最糟糕的情況下，會導致瀏覽器觸發三次重排(大部分現代瀏覽器都為此做了優化，只會觸發一次重排)

上面的代碼訪問了4次DOM

優化方法：使用cssText屬性，合并所有的改變然后一次處理

var el = document.getElementById("myDiv")
el.style.cssText +="border-left: 1px; border-right: 2px; padding: 5px;";

批量修改DOM

當需要對DOM元素進行一系列操作時，可以通過以下步驟來減少重繪和重排的次數

使元素脫離文檔流

對其進行一些列操作

把元素帶回文檔中

使元素脫離文檔流的方法：

隱藏元素，施加修改，重新顯示

使用document fragment在當前DOM之外構建一個子樹，再把它拷貝會文檔

將元素元素拷貝到另一個脫離文檔的節點中，修改副本，完成后再替換原始元素。

緩存布局信息

在上面的介紹中講到了，瀏覽器通過隊列化修改和批量執行的方式減少重排次數。但是當查詢布局信息時（如獲取偏移量、滾動位置、計算出的樣式值），瀏覽器為了返回最新值，會刷新隊列并應用所有的變更。因此最好的做法應該是盡量減少布局信息的獲取次數，獲取后把它復制給局部變量，然后再操作局部變量。

IE和:hover

避免在大量元素上使用:hover這種效果

云服務器 GPU云服務器重排重繪編譯與重編重排序數組重排序

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112191.html

20170629-重排與重繪

摘要：完成重排后，瀏覽器會重新繪制受到影響的部分到屏幕中，該過程稱為重繪重繪和重排操作都是代價昂貴的操作，它們會導致應用程序的反應遲鈍，所以應該盡可能減少這類過程的發生。瀏覽器下載完頁面中的所有內容：HTML、JavaScript、CSS、圖片——之后會解析并生成兩個內部數據結構： DOM樹：表示頁面結構渲染樹：表示DOM節點如何顯示 DOM樹中的每一個需要顯示的節點在渲染樹中至少存...

Miracle 2019-08-20 17:37 評論0 收藏0
20170629-重排與重繪

摘要：完成重排后，瀏覽器會重新繪制受到影響的部分到屏幕中，該過程稱為重繪重繪和重排操作都是代價昂貴的操作，它們會導致應用程序的反應遲鈍，所以應該盡可能減少這類過程的發生。瀏覽器下載完頁面中的所有內容：HTML、JavaScript、CSS、圖片——之后會解析并生成兩個內部數據結構： DOM樹：表示頁面結構渲染樹：表示DOM節點如何顯示 DOM樹中的每一個需要顯示的節點在渲染樹中至少存...

shiweifu 2019-08-01 17:04 評論0 收藏0
重排與重繪

摘要：原文地址在頁面的生命周期中，一些效果的交互都有可能發生重排和重繪，這些都會使我們付出高額的性能代價。更比而言，重排會產生比重繪更大的開銷。觸發重繪的操作主要有背景色等屬性的改變我們應當注意的是重繪不一定導致重排，但重排一定會導致重繪。原文地址：http://www.cun-xu.cn/index.ph... 在頁面的生命周期中，一些效果的交互都有可能發生重排（Layout）和重繪（P...

warmcheng 2019-08-06 13:39 評論0 收藏0
JavaScript：回流（重排）與重繪

摘要：回流也被稱為重排，其實從字面上來看，重排更容易讓人形象易懂即重新排版整個頁面。重繪當頁面元素樣式改變不影響元素在文檔流中的位置時如，，，瀏覽器只會將新樣式賦予元素并進行重新繪制操作。你真的了解回流和重繪嗎簡單先了解一下瀏覽器的渲染過程（圖片來自于網絡） showImg(https://segmentfault.com/img/bVbaC2e?w=624&h=289); 瀏覽器生成渲染...

Jioby 2019-08-26 13:34 評論0 收藏0
innerHTML vs createElement

摘要：，當元素插入后仍然保留對元素的指針。能夠獲得事件處理函數，而生成的新無法獲得原先設置的事件處理函數。某些情況下，更加快速。無疑，在大多數情況下，更為快速且更加易用，但是使用的時候小心上述的那個問題就好。 WilsonLius blog 首發地址兩者生成dom的方式有什么優劣呢？首先讓我們看一個小問題再引入正題～如何重復插入一個相同的html結構呢？ //錯誤的 window.onlo...

paulli3 2019-08-19 17:26 評論0 收藏0