Avoid Large, Complex Layouts and Layout Thrashing

布局是瀏覽器計(jì)算元素幾何信息的地方：即元素在頁面中的大小和位置。 每個(gè)元素都將具有基于所使用的 CSS、元素的內(nèi)容或父元素的顯式或隱式大小信息。 該過程在 Chrome、Opera、Safari 和 Internet Explorer 中稱為布局(Layout).

在 Firefox 中，它被稱為回流(reflow)，但實(shí)際上過程是相同的。

與樣式計(jì)算類似，布局成本的直接關(guān)注點(diǎn)是：

• 需要布局的元素?cái)?shù)量。
• 這些布局的復(fù)雜性。

簡而言之：

• 布局通常限定于整個(gè)文檔。
• DOM 元素的數(shù)量會影響性能； 你應(yīng)該盡可能避免觸發(fā)布局。
• 評估布局模型性能； 新的 Flexbox 通常比舊的 Flexbox 或基于浮動(dòng)的布局模型更快。
• 避免強(qiáng)制同步布局和布局抖動(dòng)； 讀取樣式值然后進(jìn)行樣式更改。

Avoid layout wherever possible

當(dāng)您更改樣式時(shí)，瀏覽器會檢查是否有任何更改需要計(jì)算布局，以及是否需要更新渲染樹。 更改“幾何屬性”，例如寬度、高度、左側(cè)或頂部都需要執(zhí)行布局過程。

.box {width: 20px;height: 20px; }/*** Changing width and height* triggers layout.*/ .box--expanded {width: 200px;height: 350px; }

布局幾乎總是作用于整個(gè)文檔。 如果您有很多元素，則需要很長時(shí)間才能弄清楚它們的位置和尺寸。

如果無法避免布局，那么關(guān)鍵是再次使用 Chrome DevTools 來查看需要多長時(shí)間，并確定布局是否是造成瓶頸的原因。 首先，打開 DevTools，轉(zhuǎn)到 Timeline 選項(xiàng)卡，點(diǎn)擊記錄并與您的站點(diǎn)進(jìn)行交互。 當(dāng)您停止錄制時(shí)，您會看到您的網(wǎng)站表現(xiàn)的細(xì)分：

在上例中深入研究幀時(shí)，我們看到在布局內(nèi)部花費(fèi)了超過 20 毫秒，當(dāng)我們有 16 毫秒在動(dòng)畫中在屏幕上顯示幀時(shí)，這太高了。 您還可以看到 DevTools 會告訴您樹的大小（在本例中為 1,618 個(gè)元素），以及需要布局的節(jié)點(diǎn)數(shù)量。

Avoid forced synchronous layouts

將網(wǎng)頁運(yùn)送到屏幕具有以下順序：

首先運(yùn)行 JavaScript，然后是樣式計(jì)算，然后是布局。 但是，可以使用 JavaScript 強(qiáng)制瀏覽器提前執(zhí)行布局。 它被稱為強(qiáng)制同步布局。

首先要記住的是，當(dāng) JavaScript 運(yùn)行時(shí)，前一幀中的所有舊布局值都是已知的，可供您查詢。 因此，例如，如果您想在幀的開頭寫出元素的高度（讓我們稱其為“框”），您可以編寫如下代碼：

// Schedule our function to run at the start of the frame. requestAnimationFrame(logBoxHeight);function logBoxHeight() {// Gets the height of the box in pixels and logs it out.console.log(box.offsetHeight); }

如果你在詢問高度之前改變了盒子的樣式，事情就會變得有問題：

function logBoxHeight() {box.classList.add('super-big');// Gets the height of the box in pixels// and logs it out.console.log(box.offsetHeight); }

現(xiàn)在，為了回答高度問題，瀏覽器必須先應(yīng)用樣式更改（因?yàn)樘砑恿顺箢?#xff09;，然后運(yùn)行布局。 只有這樣，它才能返回正確的高度。 這是不必要的并且可能是昂貴的工作。

因此，您應(yīng)該始終批量讀取樣式并首先執(zhí)行（瀏覽器可以使用前一幀的布局值），然后執(zhí)行任何寫入：

正確完成上述功能將是：

function logBoxHeight() {// Gets the height of the box in pixels// and logs it out.console.log(box.offsetHeight);box.classList.add('super-big'); }

在大多數(shù)情況下，您不需要應(yīng)用樣式然后查詢值； 使用最后一幀的值就足夠了。 同步運(yùn)行樣式計(jì)算和布局并早于瀏覽器的預(yù)期是潛在的瓶頸，而不是您通常想要做的事情。

Avoid layout thrashing

有一種方法可以使強(qiáng)制同步布局變得更糟：快速連續(xù)地進(jìn)行大量布局。 看看這段代碼：

function resizeAllParagraphsToMatchBlockWidth() {// Puts the browser into a read-write-read-write cycle.for (var i = 0; i < paragraphs.length; i++) {paragraphs[i].style.width = box.offsetWidth + 'px';} }

此代碼遍歷一組段落并設(shè)置每個(gè)段落的寬度以匹配名為“box”的元素的寬度。 它看起來無害，但問題是循環(huán)的每次迭代都會讀取一個(gè)樣式值（box.offsetWidth），然后立即使用它來更新段落的寬度（paragraphs[i].style.width）。 在循環(huán)的下一次迭代中，瀏覽器必須考慮自上次請求 offsetWidth（在前一次迭代中）以來樣式已更改的事實(shí)，因此它必須應(yīng)用樣式更改并運(yùn)行布局。 這將在每次迭代中發(fā)生！。

此示例的修復(fù)方法是再次讀取然后寫入值：

// Read. var width = box.offsetWidth;function resizeAllParagraphsToMatchBlockWidth() {for (var i = 0; i < paragraphs.length; i++) {// Now write.paragraphs[i].style.width = width + 'px';} }

更多Jerry的原創(chuàng)文章，盡在：“汪子熙”:

總結(jié)

以上是生活随笔為你收集整理的web 应用开发最佳实践之一：避免大型、复杂的布局和布局抖动的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。