什麼是 Web 效能？
網頁效能旨在讓網站變得快速，包括讓緩慢的程序“看起來”快速。網站載入是否迅速，使用者能否快速開始與它互動，並且在載入時間較長時（例如，顯示載入動畫）是否提供令人放心的反饋？滾動和動畫是否流暢？本文簡要介紹了客觀的、可測量的網頁效能*，探討了網頁最佳化所涉及的技術、技巧和工具。
| 預備知識 | 已安裝基本軟體，並具備 客戶端 Web 技術 的基礎知識。 |
|---|---|
| 目標 | 對網頁效能所涉及的方面有一個基本的瞭解。 |
* 與主觀的、感知效能（將在下一篇文章中介紹）相對
什麼是 Web 效能？
網頁效能是對網站或應用程式的客觀測量和使用者感知體驗。這包括以下主要方面：
- 縮短整體載入時間：渲染網站所需的檔案下載到使用者計算機上需要多長時間？這通常受延遲、檔案大小、檔案數量以及其他因素的影響。一般的策略是儘可能減小檔案大小，儘可能減少HTTP請求數量，並採用巧妙的載入技術（例如預載入）使檔案更快可用。
- 儘快使網站可用：這基本上意味著以合理的順序載入網站資源，以便使用者可以快速開始實際使用它。其他資源可以在使用者進行主要任務時在後臺繼續載入，有時我們只在實際需要時才載入資源（這稱為懶載入）。網站開始載入後達到可用狀態所需的時間測量稱為可互動時間。
- 流暢度和互動性：應用程式使用起來感覺可靠和愉快嗎？滾動是否流暢？按鈕是否可點選？彈窗是否快速開啟，並且在開啟時是否平滑動畫？在使應用程式感覺流暢方面有很多最佳實踐需要考慮，例如使用CSS動畫而不是JavaScript進行動畫，以及最小化由於DOM更改而導致的UI重繪次數。
- 感知效能：網站對使用者來說感覺有多快，對使用者體驗的影響大於網站實際有多快。使用者如何感知你的效能與任何客觀統計資料一樣重要，甚至可能更重要，但它是主觀的，並且不容易測量。感知效能是使用者視角，而不是一個度量標準。即使某個操作需要很長時間（由於延遲或其他原因），也可以透過顯示載入動畫或一系列有用的提示和技巧（或笑話，或你認為合適的任何其他內容）來讓使用者在等待時保持參與。這種方法比僅僅什麼都不顯示要好得多，否則會讓人覺得時間更長，並可能導致使用者認為它壞了並放棄。
- 效能測量：網頁效能涉及測量應用程式的實際和感知速度，儘可能進行最佳化，然後監控效能，以確保你已經最佳化的部分保持最佳化。這涉及許多指標（可以指示成功或失敗的可測量指標）以及測量這些指標的工具，我們將在整個模組中討論這些。
總而言之，許多特性都會影響效能，包括延遲、應用程式大小、DOM節點數量、資源請求數量、JavaScript效能、CPU負載等等。重要的是最小化載入和響應時間，並新增附加功能以透過使體驗儘可能早地可用和互動，同時非同步載入體驗中較長的部分來隱藏延遲。
注意：網頁效能包括客觀測量（如載入時間、每秒幀數和可互動時間）以及內容載入所需時間的主觀體驗。
內容如何渲染
要有效理解網頁效能、其背後的問題以及我們上面提到的主要主題領域，你確實應該瞭解一些關於瀏覽器如何工作的具體細節。這包括：
- 瀏覽器如何工作。當你請求一個URL並按下Enter / Return時，瀏覽器會找出儲存該網站檔案的伺服器在哪裡，建立連線，並請求檔案。有關詳細概述，請參閱填充頁面：瀏覽器如何工作。
- 源順序。你的HTML索引檔案的源順序會顯著影響效能。從索引檔案連結到的其他資源的下載通常是按源順序順序進行的，但這可以被操縱，並且絕對應該進行最佳化，要意識到某些資源會阻塞額外的下載，直到其內容被解析和執行。
- 關鍵路徑。這是瀏覽器在檔案從伺服器下載後構建網頁文件的過程。瀏覽器遵循一套明確定義的步驟，最佳化關鍵渲染路徑以優先顯示與當前使用者操作相關的內容將導致內容渲染時間顯著改善。有關更多資訊，請參閱關鍵渲染路徑。
- 文件物件模型。文件物件模型（DOM）是一個樹形結構，它將你的HTML內容和元素表示為節點樹。這包括所有HTML屬性和節點之間的關係。頁面載入後進行大量的DOM操作（例如，新增、刪除或移動節點）可能會影響效能，因此值得了解DOM如何工作以及如何緩解此類問題。在文件物件模型中瞭解更多資訊。
- 延遲。我們之前簡要提到過這一點，但簡而言之，延遲是你的網站資源從伺服器傳輸到使用者計算機所需的時間。建立TCP和HTTP連線涉及開銷，並且在網路上來回推送請求和響應位元組存在一些不可避免的延遲，但有一些方法可以減少延遲（例如，透過下載更少的檔案來減少HTTP請求的數量，使用CDN使你的網站在全球範圍內更具效能，以及使用HTTP/2更有效地從伺服器提供檔案）。你可以在理解延遲中閱讀有關此主題的所有內容。
總結
暫時就到這裡；我們希望我們對網頁效能主題的簡要概述能幫助你瞭解其全部內容，並讓你對學習更多感到興奮。接下來我們將探討感知效能，以及如何使用一些巧妙的技術來讓一些不可避免的效能影響對使用者來說不那麼嚴重，或者完全掩蓋它們。