通過改進 Netflix.com 注冊過程中所使用的 JavaScript 及預加載技術，Netflix 開發團隊為移動用戶和桌面用戶提供了更好的用戶體驗。
關于 Web 性能，沒有銀彈，簡單的靜態頁面包含極少的 JavaScript，可以從服務器渲染受益。庫的謹慎使用可以為復雜的頁面帶來巨大的價值。
Netflix是最受歡迎的視頻流服務之一。自 2016 年在全球推出以來，該公司發現，許多新用戶不僅在移動設備上進行了注冊，還使用了不太理想的連接。
通過改進 Netflix.com 注冊過程中所使用的 JavaScript 及預加載技術，開發團隊能夠為移動用戶和桌面用戶提供更好的用戶體驗，主要改進如下。
-
加載和交互時間減少了 50%（Netflix.com 桌面登錄主頁）；
-
在從 React 和其他客戶端庫切換到普通的 JavaScript 之后，JavaScript 包大小減少了 200KB。服務器端仍然使用 React。
-
HTML、CSS、JavaScript（React）預加載使后續頁面的瀏覽交互時間減少了 30%。
減少 JavaScript 傳輸，縮短交互時間
Netflix 針對其登錄主頁的性能進行了優化，用戶在這個頁面上注冊或登錄到網站。
這個頁面最初包含 300KB 的 JavaScript，其中一些是 React 和其他客戶端代碼（比如像 Lodash 這樣的實用程序庫），還有一些是補充 React 狀態所需的上下文數據。
Netflix 的所有網頁都由服務器端渲染的 React 提供，提供生成的 HTML，然后提供客戶端應用程序，因此，新優化的主頁要保持結構類似，為開發人員提供一致的體驗，這很重要。
使用 Chrome 的開發工具和 Lighthouse 模擬在 3G 連接上加載登錄主頁，結果顯示，登錄主頁需要 7 秒的加載時間，對于一個簡單的登錄頁面來說太長了，因此需要研究改進的可能。通過一些性能審計，Netflix 發現他們客戶端的 JS 開銷很高。
Chrome 開發工具中 Netflix.com 優化前的網絡節流
通過在瀏覽器中關閉 JavaScript 并觀察站點的哪些元素仍起作用，開發團隊可以確定登錄主頁是否真得需要 React。
由于頁面上的大多數元素都是基本的 HTML，剩下的元素（如 JavaScript 單擊處理和類添加）可以用普通的 JavaScript 替換，并且頁面的語言切換器（最初使用 React 構建）用普通的 JavaScript 重新構建只用了不到 300 行代碼。
移植到普通 JavaScript 的組件列表：
-
基礎交互（主頁選項卡）
-
語言切換器
-
“Cookie 橫幅（Cookie banner）”（針對非美國用戶）
-
客戶端日志分析
-
性能度量和記錄
-
廣告歸屬檢測引導代碼（出于安全考慮，放在沙箱式 iFrame 中）
盡管 React 最初占用的空間僅為 45KB，但將 React、幾個庫和相應的應用程序代碼從客戶端移除后，JavaScript 的總量減少了 200KB 以上，這使得 Netflix 在登錄主頁的交互時間減少了 50% 以上。
刪除客戶端 React、Lodash 和其他庫前后的負載比較。
在實驗室環境中，我們可以使用Lighthouse（trace）驗證，用戶現在可以與 Netflix 主頁快速交互。桌面 TTI 小于 3.5 秒。
交互時間優化后的 Lighthouse 報告
實際指標呢？使用Chrome 用戶體驗報告，我們可以看到，首次輸入延遲——從用戶第一次與你的網站交互到瀏覽器真正響應那次交互的時間——對于 97% 的 Netflix 桌面用戶來說是非?？?/a>的。這很棒。
首先輸入延遲（FID）度量用戶在與頁面交互時的延遲體驗。
后續頁面的 React 預加載
為了進一步提高瀏覽登錄主頁的性能，Netflix 利用用戶在登錄頁面上花費的時間對于用戶可能會登錄的下一個頁面進行預加載。
這是通過瀏覽器內置的 API 和 XHR 預加載這兩項技術實現的。
瀏覽器內置 API 由頁面頭部標簽內的一個簡單鏈接標簽組成。它建議預加載瀏覽器資源（例如 HTML、JS、CSS、圖像），盡管它不能保證瀏覽器會預加載資源，而且它也沒有得到其他瀏覽器的完全支持。
預加載技術比較
另一方面，XHR 預加載已經成為瀏覽器標準多年，當 Netflix 團隊提示瀏覽器緩存資源時，其成功率達到 95%。雖然 XHR 預加載不能用于預加載 HTML 文檔，但 Netflix 使用 XHR 預加載后續頁面的 JavaScript 和 CSS 包。
注意：Netflix 的 HTTP 響應頭配置為使用 XHR 防止緩存 HTML（它們確實不緩存第二個頁面的 HTML）。不過，“鏈接預加載（Link Prefetch）”會按預期工作，因為它對 HTML 有效，即使設置了不緩存。
|
|
|
|
|
const xhrRequest = new XMLHttpRequest(); |
|
|
// 針對預加載的資源打開請求 |
|
|
xhrRequest.open('GET', '../bundle.js', true); |
|
|
// 發送！ |
|
|
xhrRequest.send(); |
通過使用瀏覽器內置的 API 和 XHR 預加載 HTML、CSS 和 JS，交互時間減少了 30%。這個實現也不需要重寫 JavaScript，不會對登錄主頁的性能造成負面影響，因此，提供了一個很有價值的工具，以非常低的風險提高頁面性能。
在實現預加載之后，Netflix 開發人員通過分析頁面上交互時間的減少以及使用 Chrome 開發工具直接度量資源緩存命中，觀察到了性能的提升。
Netflix 登錄主頁優化概述
通過預取資源和優化 Netflix 登錄主頁上的客戶端代碼，Netflix 能夠在注冊過程中大大改善其交互時間指標。通過使用瀏覽器內置的 API 和 XHR 預加載未來頁面，Netflix 能夠將交互時間減少了 30%。這是對于第二頁加載來說的，其中包含單頁應用注冊過程的引導代碼。
Netflix 團隊進行的代碼優化表明，React 是一個有用的庫，但它可能無法為每個問題提供足夠的解決方案。通過從第一個用于注冊的登錄頁面的客戶端代碼中刪除 React，交互時間減少了 50% 以上?？s短客戶端上的交互時間還會導致用戶以更快地速度單擊注冊按鈕，這表明代碼優化總體上可以帶來更好的用戶體驗。
雖然 Netflix 沒有在主頁中使用 React ，但他們會為后續的頁面預取。這使得他們整個頁面應用程序流程中的其他部分可以利用客戶端 React。
小結
通過密切關注 JavaScript 的開銷，Netflix 發現了改善交互時間的機會。要了解你的站點是否有機會在這點上做得更好，可以借助性能工具。
Netflix 的折中方案是，使用 React 在服務器端渲染登錄頁面，但同時也為注冊過程的其他部分預取 React 代碼。這不僅優化了首次加載性能，還優化了注冊過程其余部分的加載時間，因為它是單頁應用，所以有更大的 JS 包需要下載。
考慮一下，使用普通的 JavaScript 是否適合站點的流程。如果你確實需要使用庫，那么嘗試下只下傳用戶需要的代碼。預加載技術可以幫助提高未來瀏覽頁面的加載時間。
補充說明
-
Netflix 考慮過Preact，但是，對于一個交互性比較低的簡單頁面流，使用普通的 JavaScript 是一個更簡單的選擇。
-
Netflix 嘗試使用Service Workers進行靜態資源緩存。當時，Safari 不支持這個 API（現在支持了），但他們現在又在探索這個 API。Netflix 的注冊過程需要比客戶體驗更多的遺留瀏覽器支持。許多用戶會在舊的瀏覽器上注冊，但會在他們本地的移動應用程序或電視設備上觀看 Netflix。
-
Netflix 的登錄頁面極為動態。這是他們的注冊過程中進行 A/B 測試最多的頁面，機器學習模型用于根據位置、設備類型和許多其他因素定制消息和圖像。支持近 200 個國家，每個派生頁面都面對著不同的本地化、法律和價值信息挑戰。有關 A/B 測試的更多信息，請參閱 Ryan Burgess 的“測試，只為更好的用戶體驗”。
查看英文原文：A Netflix Web Performance Case Study
關于：中科研拓
深圳市中科研拓科技有限公司專注提供軟件外包、軟件開發、軟件定制、app外包、智能硬件開發、O2O電商平臺、手機應用程序、大數據系統、物聯網項目等開發外包服務，通過IT技術實現創造客戶和社會的價值，成為很好的軟件公司，優秀軟件外包公司、軟件開發公司，公司網站：www.yatelai.com