前言

瀏覽器下載完頁(yè)面中的所有內(nèi)容：HTML、JavaScript、CSS、圖片——之后會(huì)解析并生成兩個(gè)內(nèi)部數(shù)據(jù)結(jié)構(gòu)：

• DOM樹(shù)：表示頁(yè)面結(jié)構(gòu)
• 渲染樹(shù)：表示DOM節(jié)點(diǎn)如何顯示

DOM樹(shù)中的每一個(gè)需要顯示的節(jié)點(diǎn)在渲染樹(shù)中至少存在一個(gè)對(duì)應(yīng)的節(jié)點(diǎn)(隱藏的DOM元素在渲染樹(shù)中沒(méi)有對(duì)應(yīng)的節(jié)點(diǎn))。渲染樹(shù)中的節(jié)點(diǎn)被稱(chēng)為“幀”或者“盒子”，理解頁(yè)面元素為一個(gè)具有填充(padding)、邊距(margin)、邊框(border)和位置(position)的盒子。一旦DOM樹(shù)和渲染樹(shù)構(gòu)建完成，瀏覽器就開(kāi)始顯示(繪制 paint)頁(yè)面元素

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

重繪和重排操作都是代價(jià)昂貴的操作，它們會(huì)導(dǎo)致web應(yīng)用程序的UI反應(yīng)遲鈍，所以應(yīng)該盡可能減少這類(lèi)過(guò)程的發(fā)生。

引起重排的原因

• 添加或刪除可見(jiàn)的DOM元素
• 元素位置改變
• 元素尺寸改變
• 內(nèi)容改變（例如：文本改變或圖片被另一個(gè)不同尺寸的圖片替代）
• 頁(yè)面渲染初始化
• 瀏覽器窗口尺寸改變

渲染樹(shù)變化的排隊(duì)與刷新

由于每次重排都會(huì)產(chǎn)生計(jì)算消耗，大多數(shù)瀏覽器通過(guò)隊(duì)列化修改和批量執(zhí)行來(lái)優(yōu)化重排過(guò)程（將多個(gè)重排過(guò)程合并成一次）。然而，某些操作會(huì)強(qiáng)制刷新隊(duì)列并要求隊(duì)列中的重排立即執(zhí)行（這樣會(huì)使瀏覽器的優(yōu)化策略失效）。

• 獲取布局信息的操作會(huì)導(dǎo)致強(qiáng)制刷新隊(duì)列，使得瀏覽器不得不執(zhí)行渲染隊(duì)列中的“待處理變化”并觸發(fā)重排以返回正確的值
  • offsetTop，offsetLeft，offsetWidth，offsetHeight
  • scrollTop，scrollLeft，scrollWidth，scrollHeight
  • clientTop，clientLeft，clientWidth，clientHeight
  • getComputedStyle()
• 優(yōu)化方法：盡量不要在布局信息改變時(shí)查詢(xún)它，可以在布局信息改變完畢之后再去查詢(xún)

最小化重繪和重排

重繪和重排的代價(jià)非常昂貴，因此一個(gè)好的提高程序響應(yīng)速度的策略就是減少此類(lèi)操作的發(fā)生。為了減少發(fā)生次數(shù)，應(yīng)該合并多次對(duì)DOM和樣式的修改，然后一次處理掉。

合并多次對(duì)樣式的修改

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

上面的例子中，存在兩個(gè)問(wèn)題：

• 每個(gè)樣式屬性的改變都會(huì)影響元素的集合結(jié)構(gòu)，最糟糕的情況下，會(huì)導(dǎo)致瀏覽器觸發(fā)三次重排(大部分現(xiàn)代瀏覽器都為此做了優(yōu)化，只會(huì)觸發(fā)一次重排)
• 上面的代碼訪問(wèn)了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)需要對(duì)DOM元素進(jìn)行一系列操作時(shí)，可以通過(guò)以下步驟來(lái)減少重繪和重排的次數(shù)

1.使元素脫離文檔流

2.對(duì)其進(jìn)行一些列操作

3.把元素帶回文檔中

• 使元素脫離文檔流的方法：
  • 隱藏元素，施加修改，重新顯示
  • 使用document fragment在當(dāng)前DOM之外構(gòu)建一個(gè)子樹(shù)，再把它拷貝會(huì)文檔
  • 將元素元素拷貝到另一個(gè)脫離文檔的節(jié)點(diǎn)中，修改副本，完成后再替換原始元素。

緩存布局信息

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

IE和:hover

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論