[Avoid Large, Complex Layouts and Layout Thrashing](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing)

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

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

與樣式計算類似，佈局成本的直接關注點是：

* 需要佈局的元素數量。
* 這些佈局的複雜性。

簡而言之：

* 佈局通常限定於整個文件。
* DOM 元素的數量會影響效能； 你應該儘可能避免觸釋出局。
* 評估佈局模型效能； 新的 Flexbox 通常比舊的 Flexbox 或基於浮動的佈局模型更快。
* 避免強制同步佈局和佈局抖動； 讀取樣式值然後進行樣式更改。

# Avoid layout wherever possible

當您更改樣式時，瀏覽器會檢查是否有任何更改需要計算佈局，以及是否需要更新渲染樹。 更改“幾何屬性”，例如寬度、高度、左側或頂部都需要執行佈局過程。

```css
.box {
  width: 20px;
  height: 20px;
}

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

佈局幾乎總是作用於整個文件。 如果您有很多元素，則需要很長時間才能弄清楚它們的位置和尺寸。

如果無法避免佈局，那麼關鍵是再次使用 Chrome DevTools 來檢視需要多長時間，並確定佈局是否是造成瓶頸的原因。 首先，開啟 DevTools，轉到 Timeline 選項卡，點選記錄並與您的站點進行互動。 當您停止錄製時，您會看到您的網站表現的細分：

![](https://img-blog.csdnimg.cn/img_convert/d18e6d29395fa49d1960f27ca8f391a6.png)

在上例中深入研究幀時，我們看到在佈局內部花費了超過 20 毫秒，當我們有 16 毫秒在動畫中在螢幕上顯示幀時，這太高了。 您還可以看到 DevTools 會告訴您樹的大小（在本例中為 1,618 個元素），以及需要佈局的節點數量。

# Avoid forced synchronous layouts

將網頁運送到螢幕具有以下順序：

![](https://img-blog.csdnimg.cn/img_convert/f9f113759d5251b038e6f5eb33f50460.png)

首先執行 JavaScript，然後是樣式計算，然後是佈局。 但是，可以使用 JavaScript 強制瀏覽器提前執行佈局。 它被稱為強制同步佈局。

首先要記住的是，當 JavaScript 執行時，前一幀中的所有舊佈局值都是已知的，可供您查詢。 因此，例如，如果您想在幀的開頭寫出元素的高度（讓我們稱其為“框”），您可以編寫如下程式碼：

```javascript
// 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);
}
```

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

```javascript
function logBoxHeight() {

box.classList.add('super-big');

// Gets the height of the box in pixels
  // and logs it out.
  console.log(box.offsetHeight);
}
```

現在，為了回答高度問題，瀏覽器必須先應用樣式更改（因為新增了超大類），然後執行佈局。 只有這樣，它才能返回正確的高度。 這是不必要的並且可能是昂貴的工作。

因此，您應該始終批次讀取樣式並首先執行（瀏覽器可以使用前一幀的佈局值），然後執行任何寫入：

正確完成上述功能將是：

```javascript
function logBoxHeight() {
  // Gets the height of the box in pixels
  // and logs it out.
  console.log(box.offsetHeight);

box.classList.add('super-big');
}
```

在大多數情況下，您不需要應用樣式然後查詢值； 使用最後一幀的值就足夠了。 同步執行樣式計算和佈局並早於瀏覽器的預期是潛在的瓶頸，而不是您通常想要做的事情。

# Avoid layout thrashing

有一種方法可以使強制同步佈局變得更糟：快速連續地進行大量佈局。 看看這段程式碼：

```javascript
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';
  }
}
```

此程式碼遍歷一組段落並設定每個段落的寬度以匹配名為“box”的元素的寬度。 它看起來無害，但問題是迴圈的每次迭代都會讀取一個樣式值（box.offsetWidth），然後立即使用它來更新段落的寬度（paragraphs[i].style.width）。 在迴圈的下一次迭代中，瀏覽器必須考慮自上次請求 offsetWidth（在前一次迭代中）以來樣式已更改的事實，因此它必須應用樣式更改並執行佈局。 這將在每次迭代中發生！。

此示例的修復方法是再次讀取然後寫入值：

```javascript
// Read.
var width = box.offsetWidth;

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

web 應用開發最佳實踐之一：避免大型、複雜的佈局和佈局抖動

相關文章