【譯】Netflix 網頁效能優化案例
原文地址： ofollow,noindex" target="_blank">https://medium.com/dev-channel/a-netflix-web-performance-case-study-c0bcde26a9d9
由於自己最近一年半的事件都在做視訊頁面相關的，而且這次 Netflix 的技術棧也與我們相似，因此翻譯這篇文章，希望大家一起學習。頁面很多細節值得深入，但是整個分析下來其實給我們自己在做頁面優化提供基本的思路。
Netflix 目前是全球非常非常出色的流媒體服務網站。自從 2016 年釋出之後，Netflix 發現使用者不僅會在移動端設註冊，也會在 Web 上完成註冊相關。
通過優化登出頁面使用的 JavaScript 程式碼，以及 HTTP/Link_prefetching_FAQ" rel="nofollow,noindex" target="_blank">prefetching ， 開發者給使用者提供了更好的體驗，以及多個方向的改善:
- 載入以及可互動時間 (Time-to-Interactive) 縮短了 50%;
- JS Bundle 的體積減小了 200 KB ，他們選擇在客戶端更為純粹的 JS 庫，但是服務端依舊選擇 React 來渲染；
- 通過 Prefetching 一些 CSS 和 JS ，縮短了 30% 的可互動時間在跳轉的其他頁面的時候。
通過削減 JS 來降低可互動時間
Netflix 工程師是優化使用者準備註冊和完成登入的頁面，
這個頁面初始化包含了 300kB 的 JavaScript 程式碼，這其中包括基本的 React 檔案，和一些第三方庫( lodash ) 以及一些包含 React 狀態的上下文資料。
所有 Netflix 的網頁都基於 React 的伺服器端渲染，然後輸出 HTML 內容，然後為使用者提供客戶端的服務，因此新優化主頁的結構必須保持一致性從而來確保開發體驗的持續性。
通過使用 Chrome 的 DevTools 和 Lighthouse 來模擬在 3G 請求頁面的載入，顯示需要7秒才能載入，這對於一個簡單的登出頁面來說太長了，因此調查了改進的可能性。通過一些效能的排查，發現它們服務端渲染的消耗太高了。
通過關閉瀏覽器中的 JavaScript 功能，並觀察網站的哪些元素一致處在執行中的狀態，，開發人員必須要確定對於一個登出的主頁 React 是否真的必要。
由於頁面上的大多數元素都是基本HTML，因此可以使用純JavaScript替換點選處理和新增 class ，一個語言切換器使用純 JS 寫比 React 版本明顯少了 300 行程式碼。
完整的移植到 純JavaScript 的列表如下：
- 基本互動（主頁中間的 Tab）
- 語言切換器
- Cookie Bannar（適用於非美國訪問者）
- 用於分析的客戶端日誌記錄
- 效能測量和記錄
- 廣告（為了安全起見，在iFrame中沙箱化）
儘管React的初始佔用空間僅為45kB，但刪除了React，客戶端的幾個庫和相應的應用程式程式碼將JavaScript的總量減少了超過200kB，導致 Netflix 登出的互動時間縮短了50％以上。
在刪除客戶端React，Lodash和其他庫之前和之後的有效負載比較。
在實驗室環境中，我們使用 Lighthouse 驗證使用者在上面時間可以與 Netflix 頁面進行互動； 來自該領域的指標怎麼樣？使用Chrome使用者體驗報告，我們可以看到首次輸入延遲 - 從使用者首次與您的網站互動的時間到瀏覽器實際上能夠響應該互動的時間 - 對桌面上97％的Netflix使用者來說很快。這很棒。
第一次輸入延遲（FID）衡量使用者在與頁面互動時的體驗延遲。
Prefetching 後續React頁面的資源
為了在瀏覽其已登出的主頁時進一步提高效能，Netflix 利用使用者在著陸頁上花費的時間來預取使用者可能登陸的下一頁的資源。
這是通過使用兩種技術實現的 - 內建的
瀏覽器 API 和 XHR 預載入。
prefecthing 是內建瀏覽器API，在頁面頭標記中的簡單請求連結資源。它向瀏覽器建議可以預取資源（例如HTML，JS，CSS，影象），雖然它不能保證瀏覽器實際上會預載入資源，而且它缺乏其他瀏覽器的的支援。
Prefetching vs XHR
另一方面，XHR 多年來一直是瀏覽器標準，當 Netfli x團隊促使瀏覽器快取資源時，其成功率達到95％。雖然XHR預取不能用於預取HTML文件，但 Netflix 使用它來為後續頁面預取 JavaScript 和 CSS 包。
注意：Netflix的HTTP響應頭配置阻止了使用XHR的HTML快取（它們在第二頁的HTML上沒有快取）。連結預取正在按預期工作，因為即使在某個點上沒有快取，它也可以在HTML上工作。
//建立一個新的XHR請求 const xhrRequest = new XMLHttpRequest（）; //開啟資源請求“prefetch” xhrRequest.open（'GET'，'.. / bundle.js'，true）; // 火！ xhrRequest.send（）;
通過使用內建的 prefetch 和 XHR 預取 HTML，CSS 和 JS，可互動時間減少了30％。此實現還不需要重寫JavaScript，也不會對已登出的主頁的效能產生負面影響，因此提供了一種有價值的工具，可以在極低風險的情況下提高頁面效能。
使用 Prefetch，Netflix 開發人員通過分析頁面上互動時間指標的減少以及使用Chrome的開發人員工具直接測量資源的快取命中率來觀察改進。
頁面優化摘要
通過在 Netflix 登出主頁上使用 Prefech 並優化客戶端程式碼，Netflix能夠在註冊過程中大大提高其互動時間指標。通過使用瀏覽器 Prefech 和 XHR 預取來預取未來的頁面，Netflix 能夠將互動時間縮短30％。這是第二頁載入，其中包含單頁應用程式註冊流程的引導程式碼。
Netflix 團隊進行的程式碼優化表明，雖然 React 是一個有用的庫，但它並不會給每個問題提供解決思路。通過從第一個登入頁面上的客戶端程式碼中刪除 React 程式碼進行註冊，可互動時間的改進率提高了 50％ 以上。減少客戶端的互動時間也導致使用者以更高的速率點選註冊按鈕，表明程式碼優化可以帶來更好的使用者體驗。
雖然 Netflix 沒有在主頁上使用React，但他們為後續頁面預取了它。這使他們能夠在單頁應用程式註冊過程的其餘部分中利用客戶端React。
有關這些優化的更多詳細資訊，請參閱Tony Edwards的A +演講：
https://www.youtube.com/channel/UCGGRRqAjPm6sL3-WGBDnKJA
結論
Netflix通過密切關注JavaScript的消耗的成本，發現了改善互動時間的機會。要了解您自己的的網站是否有機會在此處做得更好，您可以使用 這個工具 。
Netflix決定做出的權衡是使用React對登陸頁面進行伺服器渲染，同時也在其上預先獲取React /其餘註冊流程的程式碼。這樣可以優化首次載入效能，同時還可以優化其餘註冊流的載入時間，因為它是一個單頁應用程式，因此需要下載更大的JS包大小。
考慮是否利用vanilla JavaScript是您網站中流量的選項。如果您絕對需要使用庫，請嘗試僅下載使用者所需的程式碼。預取等技術有助於縮短未來頁面導航的頁面載入時間。
補充說明
-
然而，Netflix考慮使用Preact，對於具有低互動性的簡單頁面流，使用vanilla JavaScript對於它們的堆疊來說是一個更簡單的選擇。
-
Netflix嘗試使用Service Workers進行靜態資源快取。當時，Safari不支援API（現在它支援了），但他們現在再次探索它們。Netflix註冊流程需要比成員體驗更多的舊版瀏覽器支援。許多使用者都會在較舊的瀏覽器上註冊，但會在其原生移動應用或電視裝置上觀看Netflix。 Netflix登陸頁面非常動態。這是他們在註冊流程中經過最嚴格的A / B測試頁面，機器學習模型用於根據位置，裝置型別和許多其他因素自定義訊息和影象。在近200個國家的支援下，每種衍生產品都存在不同的本地化，法律和價值資訊傳遞挑戰。
有關A / B測試的更多資訊，請參閱Ryan Burgess 《Testing Into A Better User Experience》 。