瀏覽器如何創建網頁？

已發表: 2020-03-18

作為技術 SEO，了解瀏覽器如何創建網頁非常重要。 稍後，這可以幫助理解人類和搜索引擎機器人對頁面的解釋之間的差異，或者診斷頁面速度問題等等。 我會著眼於提高頁面速度。

這是關於瀏覽器創建頁面的階段及其對 Pagespeed 的反映的 4 篇系列文章中的第一篇。

為了顯示內容，每個瀏覽器必須在創建渲染樹之前完成 DOM 和 CSSOM 過程以創建網頁。

DOM 或文檔對像模型由 HTML 標記構成。 DOM 是構成網頁結構和內容的元素的數據表示。 這種表示由不同的程序使用，例如 JavaScript 腳本，它們可能會修改結構、內容或兩者。

CSSOM 是由 CSS MarkUp 創建的，例如動畫、關鍵幀、媒體查詢以及與 DOM 語義平行的選擇器、屬性和值。

這是歷史上第一個網絡瀏覽器的截圖。 它不能渲染 Javascript，也沒有很多 CSS 屬性。 它也不能使用現代 HTML 規則。 體驗這些原始的 Web 瀏覽器（例如​​ Lynx）可以幫助您了解瀏覽器引擎及其在 Web 性能方面的性質。 您可以訪問此頁面！

瀏覽器如何創建 DOM？

沒有瀏覽器能像人們那樣看到頁面上的內容或源代碼。 首先，它將以字節為單位查看 preDOM 上的所有內容。 然後它將字節轉換為特定字符並解決它們的含義，從而將頁面結構形成為層次結構。

注意： preDOM 是源代碼中出現的 DOM 版本，還沒有被瀏覽器讀取和處理。 然後瀏覽器讀取和解釋 preDOM：

  1. 使用文件的“字符集”代碼，瀏覽器會將字節轉換為字符。
  2. 啟動“標記化”過程以為相鄰字符創建有意義的命令。
  3. 生成的令牌會根據 HTML5 標準轉換為對象並接收規則和屬性。 （換句話說，它將它們轉換為節點。）
  4. DOM 構建過程開始。 每個 HTML 標記相互放置，形成層次結構並創建網頁的結構。

提高 DOM 性能：為什麼如此重要？

在我給您一些提示之前，您需要了解 DOM 加載事件類型及其含義。

以下是網頁創建中的一些 DOM 事件類型

  • domLoading : DOM 進程的起點。
  • domInteractive : DOM 進程結束。
  • domContentLoaded : DOM 和 CSSOM 進程結束。 此時，瀏覽器已準備好創建渲染樹。 此外，JavaScript 的執行通常應該從此時開始。
  • domComplete : 所有頁面資源的下載完成。
  • loadEvent ：在完成下載資源和創建頁面結構後，任何現有的“onload” JS 事件都會被觸發。

如果你只想計算 DOM Process Time，你應該關注 domInteractive 事件。 但是，此事件未顯示在 Chrome 的 devTools 中。 您可以使用或諮詢您的 IT 團隊以獲取 PerformanceNavigationTiming API，它可以計算所有這些事件，以及額外的子事件，例如 domContentLoadedEventStart。

您還可以在 Google Analytics > Behavior > Site Speed > Page Timings > DOM 中查看 domInteractive 首選項。 但是，這裡的信息並不是特別穩定可靠。 不過，它可能會給你一個開始的地方。

您也可以使用 DevTools 計算 DOM 交互時間，但只能使用控制台代碼。 這是一個有點慢的方法，但您可以嘗試“performance.timing”代碼庫。 在上面，您將在左側看到 performance.timing，它顯示了大多數性能指標。 只有最後三位或四位數字在這裡很重要。 如果要查看自定義指標，例如 DOMInteractive，可以編寫 performance.timing.domInteractive – performance.timing.responseStart。 右側分別給出了 DOMInteractive、DOMComplete、Total Page Load Time。
示例來自同一新聞網站。

在本文中，domContentLoaded 事件和 DevTools 足以滿足我們的目的。

請注意，當資源被正確組織和加載時，domInteractive 和 domContentLoaded 時間彼此之間並沒有太大差異。 因為真正的挑戰是在不中斷 HTML 解析或在主線程中造成瓶頸的情況下將 JS 文件和 CSS 文件相互分離。 如果你能成功地做到這一點，很可能 DOM 和 CSSOM（domContentLoaded 事件）都以最快的方式被觸發。

來自 HTML 文檔的示例 DOM

DOM 進程優化和技巧

如果我們在 2019 年及之前，我可能會說作為技術 SEO 專家，您不必知道如何編碼。

但在 2020 年及以後，你實際上必須了解一些初學者級別的編碼。 要了解如何優化文檔對像模型或 HTML 節點結構，您需要有足夠的經驗來檢查它以創建新的代碼結構。

以下是優化 DOM 大小的一些技巧：

  1. 檢查現有的 DOM 節點樹並嘗試找到任何不必要的 HTML 節點。 例如，如果您看到任何或帶有“顯示：無”類，您應該刪除它們。
  2. 您可以建議您的 IT 團隊使用更多 ::before 和 ::after 偽元素，而不是創建新的 HTML 節點。
  3. 嘗試關注具有大量子元素的大型父 HTML元素。 控制您的 CSS 類及其效果以創建更短的 HTML 節點，同時努力統一 HTML 元素。
  4. 如果您使用 JavaScript 調用您的 HTML 節點結構，您也可以使用或建議您的 IT 團隊使用子樹修改 DOM 更改斷點來確定哪些節點正在更改哪個啟動器。
  5. 如果您無法縮小 HTML 節點大小，那麼您可能需要考慮使用Shadow DOM ，或者根據您的 JS 庫和渲染技術，您可能對 Virtual DOM 感興趣。
  6. 您還應該考慮在服務器端使用 gzip、brotli 或 deflate 壓縮技術。
  7. 您可以通過刪除空格來壓縮 HTML 文檔以獲得更好更快的瀏覽器速度支持。

使用虛擬 DOM

您可以使用不同的 DOM 類型來獲得更好的頁面速度、用戶體驗和抓取預算。 一個例子是虛擬 DOM。

虛擬 DOM 僅加載在打開新頁面時更改的 DOM 部分，而不是重新加載所有 DOM 元素。 這為用戶或搜索引擎機器人創建了更快、更輕的頁面演示。

Virtual DOM 與 JavaScript 庫 Vue 或 React 配合得很好。

為什麼 DOM 性能對技術 SEO 很重要？

DOM 大小與頁面速度和與用戶的初始接觸直接相關。

如果您的 DOM 尺寸很大，並且不使用 Shadow DOM 或類似的預防方法來避免加載和設置初始頁面加載期間不可見的所有 HTML 節點的樣式，您可能會延遲您的速度指數和初始聯繫速度用戶。

回流過程瀏覽器之間的簡短比較。

如果您的 DOM 尺寸很大，您可能會遭受瀏覽器回流的影響。

重排是指在重新渲染過程中調整 HTML 元素的大小、樣式或繪製和定位。 如果 HTML 父元素發生變化，子元素也會受到影響。 這種 HTML 元素鏈的長度和數量會損害您的頁面速度。

回流循環會損害您的抓取預算，增加服務器和網絡的負載。 因此，它會影響轉化率甚至排名。

谷歌實際上已經發布了一個關於這個主題的漂亮而簡短的演示視頻：

瀏覽器如何創建 CSSOM 和渲染樹？

瀏覽器傾向於在完成 DOM 進程後啟動 CSSOM 進程。

由於現代瀏覽器知道在 CSSOM 完成之前 DOM 沒有任何意義，因此瀏覽器在讀取樣式代碼之前不會顯示某些 HTML 元素。 CSS background-image 就是一個很好的例子。

上面是一個需要重構的 CSS 代碼片段示例。 'Zoom' 屬性用於不同的選擇器超過 19 次。 它們可以統一。

現代瀏覽器如何啟動和完成 CSSOM 流程？

  1. 瀏覽器遵循創建 DOM 時生成的字節、字符、標記和標準規則（節點）循環。
  2. 瀏覽器將每個 DOM 元素與將影響它的 CSS 元素進行匹配。 這個過程被稱為“風格”。
  3. 映射後，瀏覽器根據 CSS 規則以層次結構確定每個 DOM 元素的尺寸。 由於父元素的大小也會影響子元素，因此分層編碼的 CSS 文件對頁面速度很有用。 這個過程稱為“佈局”。
  4. Visual DOM 進程啟動。 所有圖像、邊框和顏色均根據 CSS 規則繪製。 這個過程在不同的層中進行。
  5. 複合是 CSSOM 的最後階段。 瀏覽器將所有繪畫操作組合在不同的圖層中。

您可以通過 CSS 觸發器根據不同的瀏覽器引擎檢查 CSS 屬性及其對瀏覽器引擎的成本。

如何優化 CSSOM 流程

  1. 作為技術 SEO，您應該首先關注複雜的 CSS 選擇器和相互屬性。 換句話說，如果 CSS 選擇器有超過 3 個子元素，您應該嘗試縮短它，或者您應該將其報告給您的 IT 團隊以進行 CSS 重構。 相互屬性意味著您的 IT 團隊可能在不同的類和 id 上使用相同的 CSS 屬性。 您應該嘗試統一它們以獲得更小的 CSS 文件大小。
  2. 了解您的 IT 團隊是否壓縮 CSS 文件。
  3. 對於您網站的每個類別和部分，請嘗試查找常用的 CSS 代碼和常用的 CSS 代碼。 建議您的 IT 團隊劃分 CSS 文件以提高資源效率。
  4. 在 CSS 文件中搜索重要代碼。 他們可能使一些後續代碼變得不必要。
  5. 嘗試確定您的CSS 文件是否具有與 HTML 節點相關的並行層次結構。 如果它們是並行的，您的渲染樹將更容易被瀏覽器構建。
  6. 嘗試減少需要重新設置樣式或調整大小的 HTML 元素的數量。 圖像就是一個很好的例子。
  7. 您可以建議您的 IT 團隊使用“包含”、“將更改”、“CSS Scope”功能和屬性來獲得更好的瀏覽器性能。
    'Contain' 屬性決定了 HTML 元素的範圍以及它將接收的 CSS 效果。 這樣它就不會影響 DOM 的其餘部分。 'Will-change' 屬性告訴瀏覽器哪些元素會發生變化以及以何種方式發生變化，以便瀏覽器甚至可以在進程開始之前進行優化。
  8. 在渲染阻塞的 CSS 文件之前嘗試內聯關鍵的 CSS代碼。
  9. 嘗試建議 IT 團隊不要在 HTML 標籤中使用樣式代碼。 這會影響 DOM/CSSOM 進程以及爬網預算。
  10. 不要將您的圖像源地址放入 CSS 文件中。 這違反了 Google 的索引指南（Chrome DevSummit 2019，How to Make Your Content Shine on Google Search，Martin Splitt）。
  11. 不要在 CSS 文件中使用 @import 功能。 這將創建一個嵌套的第二個 CSS 請求。
  12. 嘗試使用更少的外部 CSS 文件來縮短 CSSOM 或嘗試捆綁它們以減少 DNS 查找和資源連接時間。
  13. 您還可以檢查您的長選擇器及其特異性。 如果它們太長，您需要將它們報告給您的 IT 團隊，或者您可以嘗試自己作為技術 SEO 改進它們。 長的選擇器和重複的、具有相同值的不必要的 CSS 屬性對瀏覽器和手機 CPU 來說是沉重的負擔。

請記住，CSSOM 與 DOM 一樣具有層次結構樹。 它首先將當前規則應用於最大的元素，並且子元素仍然受到影響，直到瀏覽器讀取專門為它們編寫的代碼。

在 CSSOM 中，所有 CSS ID、Class 和 Properties 以及 Value 元素都是根據 HTML DOM 元素的語義結構列出的。 CSSOM 取自與 DOM 相同的 HTML 文檔。 我沒有在 CSSOM 中標出 HTML 節點的主要原因是為了提請注意 CSS 代碼的層次結構。

瀏覽器如何渲染頁面？

執行 CSSOM 與渲染不同。 當 DOM 和 CSSOM 在同一個層次結構中讀取時，渲染是在視口中從上到下連接這兩個代碼樹的過程。

在渲染過程中，DOM 和 CSSOM 處理過程中存在的一些代碼片段可能會被禁用。 主要原因是它們不可見或被不同的代碼禁用。 因此，優化未包含在渲染樹中但出現在 DOM 和 CSSOM 中的代碼對於提高頁面速度很有用。

上面，Chrome 的 DevTools 中的 DOMContentLoaded 數據顯示了加載和解析 HTML 和 CSS 文檔所需的時間。

因此，性能主線程和調用樹部分之間的一致性會產生接近的結果。 所有示例均來自同一站點。

如果只想計算 DOM，則需要檢查 domInteractive 時間，DevTools 沒有顯示該時間，但可以使用 Navigation Timing API 測量。

在 DomContentLoaded 事件之後，您的瀏覽器將啟動渲染樹，您將看到屏幕的像素被著色並帶有有意義的信息和設計。 在此期間，Javascript 渲染也將發揮作用，並將立即拆分、更改和重新繪製渲染樹。

下一步是什麼？

適當結構化的資源順序、資源請求計數以及渲染樹和 Javascript 渲染關係可降低頁面速度方面的成本。

本系列的下一篇文章將探討這與高級頁面速度指標的關係以及 Google 如何感知頁面速度。

開始免費試用