資訊專欄INFORMATION COLUMN
摘要：完成重排后，瀏覽器會重新繪制受到影響的部分到屏幕中，該過程稱為重繪重繪和重排操作都是代價(jià)昂貴的操作，它們會導(dǎo)致應(yīng)用程序的反應(yīng)遲鈍，所以應(yīng)該盡可能減少這類過程的發(fā)生。
瀏覽器下載完頁面中的所有內(nèi)容：HTML、JavaScript、CSS、圖片——之后會解析并生成兩個(gè)內(nèi)部數(shù)據(jù)結(jié)構(gòu)：
DOM樹：表示頁面結(jié)構(gòu)
渲染樹：表示DOM節(jié)點(diǎn)如何顯示
DOM樹中的每一個(gè)需要顯示的節(jié)點(diǎn)在渲染樹中至少存在一個(gè)對應(yīng)的節(jié)點(diǎn)(隱藏的DOM元素在渲染樹中沒有對應(yīng)的節(jié)點(diǎn))。渲染樹中的節(jié)點(diǎn)被稱為“幀”或者“盒子”，理解頁面元素為一個(gè)具有填充(padding)、邊距(margin)、邊框(border)和位置(position)的盒子。一旦DOM樹和渲染樹構(gòu)建完成，瀏覽器就開始顯示(繪制 paint)頁面元素
當(dāng)DOM的改變影響了元素幾何屬性（例如寬和高）——瀏覽器就需要重新計(jì)算元素的幾何特性，同樣其他元素的幾何屬性和位置也會因此受到影響。瀏覽器會使渲染樹中受到影響的部分失效，并重新構(gòu)造渲染樹。這個(gè)過程稱為重排(reflow)。完成重排后，瀏覽器會重新繪制受到影響的部分到屏幕中，該過程稱為重繪(repaint)
重繪和重排操作都是代價(jià)昂貴的操作，它們會導(dǎo)致web應(yīng)用程序的UI反應(yīng)遲鈍，所以應(yīng)該盡可能減少這類過程的發(fā)生。
引起重排的原因添加或刪除可見的DOM元素
元素位置改變
元素尺寸改變
內(nèi)容改變（例如：文本改變或圖片被另一個(gè)不同尺寸的圖片替代）
頁面渲染初始化
瀏覽器窗口尺寸改變
渲染樹變化的排隊(duì)與刷新由于每次重排都會產(chǎn)生計(jì)算消耗，大多數(shù)瀏覽器通過隊(duì)列化修改和批量執(zhí)行來優(yōu)化重排過程（將多個(gè)重排過程合并成一次）。然而，某些操作會強(qiáng)制刷新隊(duì)列并要求隊(duì)列中的重排立即執(zhí)行（這樣會使瀏覽器的優(yōu)化策略失效）。
獲取布局信息的操作會導(dǎo)致強(qiáng)制刷新隊(duì)列，使得瀏覽器不得不執(zhí)行渲染隊(duì)列中的“待處理變化”并觸發(fā)重排以返回正確的值
offsetTop，offsetLeft，offsetWidth，offsetHeight
scrollTop，scrollLeft，scrollWidth，scrollHeight
clientTop，clientLeft，clientWidth，clientHeight
getComputedStyle()
優(yōu)化方法：盡量不要在布局信息改變時(shí)查詢它，可以在布局信息改變完畢之后再去查詢
最小化重繪和重排重繪和重排的代價(jià)非常昂貴，因此一個(gè)好的提高程序響應(yīng)速度的策略就是減少此類操作的發(fā)生。為了減少發(fā)生次數(shù)，應(yīng)該合并多次對DOM和樣式的修改，然后一次處理掉。
合并多次對樣式的修改var el = document.getElementById("myDiv")
el.style.borderLeft = "1px"
el.style.borderRight = "2px"
el.style.padding = "5px"
上面的例子中，存在兩個(gè)問題：
每個(gè)樣式屬性的改變都會影響元素的集合結(jié)構(gòu)，最糟糕的情況下，會導(dǎo)致瀏覽器觸發(fā)三次重排(大部分現(xiàn)代瀏覽器都為此做了優(yōu)化，只會觸發(fā)一次重排)
上面的代碼訪問了4次DOM
優(yōu)化方法：使用cssText屬性，合并所有的改變?nèi)缓笠淮翁幚?/p>
var el = document.getElementById("myDiv")
el.style.cssText +="border-left: 1px; border-right: 2px; padding: 5px;";
批量修改DOM
當(dāng)需要對DOM元素進(jìn)行一系列操作時(shí)，可以通過以下步驟來減少重繪和重排的次數(shù)
使元素脫離文檔流
對其進(jìn)行一些列操作
把元素帶回文檔中
使元素脫離文檔流的方法：
隱藏元素，施加修改，重新顯示
使用document fragment在當(dāng)前DOM之外構(gòu)建一個(gè)子樹，再把它拷貝會文檔
將元素元素拷貝到另一個(gè)脫離文檔的節(jié)點(diǎn)中，修改副本，完成后再替換原始元素。
緩存布局信息在上面的介紹中講到了，瀏覽器通過隊(duì)列化修改和批量執(zhí)行的方式減少重排次數(shù)。但是當(dāng)查詢布局信息時(shí)（如獲取偏移量、滾動位置、計(jì)算出的樣式值），瀏覽器為了返回最新值，會刷新隊(duì)列并應(yīng)用所有的變更。因此最好的做法應(yīng)該是盡量減少布局信息的獲取次數(shù)，獲取后把它復(fù)制給局部變量，然后再操作局部變量。
IE和:hover避免在大量元素上使用:hover這種效果
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/83721.html
摘要：完成重排后，瀏覽器會重新繪制受到影響的部分到屏幕中，該過程稱為重繪重繪和重排操作都是代價(jià)昂貴的操作，它們會導(dǎo)致應(yīng)用程序的反應(yīng)遲鈍，所以應(yīng)該盡可能減少這類過程的發(fā)生。 瀏覽器下載完頁面中的所有內(nèi)容：HTML、JavaScript、CSS、圖片——之后會解析并生成兩個(gè)內(nèi)部數(shù)據(jù)結(jié)構(gòu)： DOM樹：表示頁面結(jié)構(gòu) 渲染樹：表示DOM節(jié)點(diǎn)如何顯示 DOM樹中的每一個(gè)需要顯示的節(jié)點(diǎn)在渲染樹中至少存...
摘要：完成重排后，瀏覽器會重新繪制受到影響的部分到屏幕中，該過程稱為重繪重繪和重排操作都是代價(jià)昂貴的操作，它們會導(dǎo)致應(yīng)用程序的反應(yīng)遲鈍，所以應(yīng)該盡可能減少這類過程的發(fā)生。 瀏覽器下載完頁面中的所有內(nèi)容：HTML、JavaScript、CSS、圖片——之后會解析并生成兩個(gè)內(nèi)部數(shù)據(jù)結(jié)構(gòu)： DOM樹：表示頁面結(jié)構(gòu) 渲染樹：表示DOM節(jié)點(diǎn)如何顯示 DOM樹中的每一個(gè)需要顯示的節(jié)點(diǎn)在渲染樹中至少存...
摘要：回流也被稱為重排，其實(shí)從字面上來看，重排更容易讓人形象易懂即重新排版整個(gè)頁面。重繪當(dāng)頁面元素樣式改變不影響元素在文檔流中的位置時(shí)如，，，瀏覽器只會將新樣式賦予元素并進(jìn)行重新繪制操作。你真的了解回流和重繪嗎 簡單先了解一下瀏覽器的渲染過程（圖片來自于網(wǎng)絡(luò)） showImg(https://segmentfault.com/img/bVbaC2e?w=624&h=289); 瀏覽器生成渲染...
摘要：，當(dāng)元素插入后仍然保留對元素的指針。能夠獲得事件處理函數(shù)，而生成的新無法獲得原先設(shè)置的事件處理函數(shù)。某些情況下，更加快速。無疑，在大多數(shù)情況下，更為快速且更加易用，但是使用的時(shí)候小心上述的那個(gè)問題就好。 WilsonLius blog 首發(fā)地址兩者生成dom的方式有什么優(yōu)劣呢？首先讓我們看一個(gè)小問題再引入正題～ 如何重復(fù)插入一個(gè)相同的html結(jié)構(gòu)呢？ //錯(cuò)誤的 window.onlo...
閱讀 2934·2021-11-24 09:39
閱讀 3619·2021-11-22 13:54
閱讀 3419·2021-11-16 11:45
閱讀 2449·2021-09-09 09:33
閱讀 3203·2019-08-30 15:55
閱讀 1299·2019-08-29 15:40
閱讀 928·2019-08-29 15:19
閱讀 3406·2019-08-29 15:14
