Netflix的網站優化經驗

服務端與客戶端渲染

Netflix團隊首先要做的一件事是改進他們的整體前端架構。改版前的netflix.com網站對于服務端生成html標記與客戶端的增強這 兩個過程進行了嚴格的分離，采用這一設計的主要原因在于前后端所使用的編程語言不同。服務端主要使用Java的技術棧以生成基本的html頁面，而在瀏覽 器端的工作則主要是通過jQuery等JavaScript庫的使用為服務端生成的html添加一些客戶端的行為。

這種分離式前端架構可以說是教科書一般的標準架構，但Netflix團隊認為這種方式存在著一些不足之處，因為用戶每次都需要等待服務端生成完整 的html頁面結構之后，才能夠看到頁面顯示在瀏覽器中。這其中有很大一部分內容是用戶很少會關注的，但仍然不得不為了加載這些內容延遲而延長頁面的渲染 時間。

因此，UI工程團隊專門針對這一點進行了全新的設計。改進后的服務端所生成的html只包含頁面中的一小部分內容，使客戶端的視圖能夠盡快地顯示 在用戶眼前。為了了解用戶對此改動的認可度，UI團隊將其設計為一種可配置的架構，可以非常方便地調整服務端所生成的html應當包含多少個視圖。這種做 法的好處很明顯：首先是服務端生成的數據減少了，因此處理時間也相應地減少了。其次由于http的響應負載也減少了，DOM的渲染時間也因此加快了速度。 當頁面完成渲染后，客戶端JavaScript可以按需加載用戶所感興趣的其余視圖。

UI團體對此總結道，由于服務端與客戶端渲染方式得到了更大的靈活性，為他們在這兩種方式之間如何取得平衡提供了更多的選擇。這一改動最終不僅使頁面啟動速度加快，同時也保證了平滑的視圖轉換過程。

通用JavaScript

UI團隊的另一個目標是實現服務端與客戶端代碼的通用化，這就迫使他們重新思考整個渲染管道的設計。之前所采用的那種分離式服務端生成與客戶端增強的做法已經難以滿足他們的需求了，主要問題有以下三點：

• 在兩種編程語言之間來回切換是一種負擔
• 如果要對html進行改進，那么對于服務端的生成與客戶端的增強都有著很強的依賴性
• 團隊更希望通過同一種API生成html標記

UI團隊最終選擇了以Node.js與React.js實現一種通用JavaScript的前端架構，這使他們能夠實現 在服務端進行渲染 ，等基本的html與React.js組件完成初始化之后，再由客戶端完成其它部分的渲染。因此，無論渲染過程是在哪里發生的，應用程序都能夠得到相同的 輸出結果，服務端與客戶端的代碼也沒有了嚴格的區分，它們全部是按照通用JavaScript的方式設計的。也正是這種共通的渲染邏輯，讓UI團隊意識到 只在服務端進行最小化的html渲染，由客戶端完成其余部分加載這種方式的可行性。

減少JavaScript負載

具有豐富交互性體驗的網站通常需要用戶下載大量的JavaScript代碼，這也一定程度上影響了瀏覽器的性能。為此，UI團隊在重構過程中將各種依賴轉 換為較小的模塊，并只為當前訪問者輸出相應的JavaScript。關于如何實現這一過程的具體設計，來自Netflix的高級前端工程師Alex Liu專門在 一篇文章 中記錄了具體的設計過程。

經過重構之后，老版本設計中的各種大型依賴已經不復存在，它們被替換為一些全新的、更高效的庫。其直接結果就是輸出的JavaScript負載減 少了許多，用戶開始瀏覽時不再需要加載大量的JavaScript代碼。而UI團隊并不滿足于當前的成果，他們還將不斷地對JavaScript的負載進 行改進。

頁面可交互時間

為了對重構后的效果進行測試，以更好地理解它對用戶所產生的影響，UI團隊對于頁面的可交互時間（Time to Interactive - tti）這項指標進行了專門的監控。

可交互時間是指從頁面剛剛啟動到用戶能夠與UI進行交互的這一段時間間隔，這里并不需要完整地加載整個頁面，只需要用戶能夠通過輸入設備與UI之間進行交互即可。

UI團隊建議使用由W3C定義的 Navigation Timing API ，在能夠支持的瀏覽器上收集訪問者的數據，并進行統計分析。

總結

在Netflix團隊看來，高性能不是一種可有可無的目標，而是設計優秀的用戶體驗過程中必不可少的一環。團隊將繼續尋求業界的最佳實踐，以實現更好的用戶體驗。在接下來的一段時間內，Netflix將研究一些新興的web標準，例如 服務器線程 （Service Workers）、 ASM.js 以及 WebAssembly 等等，看看這些技術能否幫助他們的網站性能更上一層樓。