Netflix的網站優化經驗服務端與客戶端渲染

2024-03-04 分類：網站建設

Netflix目前是全球非常非常出色的流媒體服務網站。自從2016年發布之后，Netflix發現用戶不僅會在移動端設注冊，也會在Web上完成注冊相關。

通過優化登出頁面使用的JavaScript代碼，以及prefetching，開發者給用戶提供了更好的體驗，以及多個方向的改善:

加載以及可交互時間(Time-to-Interactive)縮短了50%;

JSBundle的體積減小了200KB，他們選擇在客戶端更為純粹的JS庫，但是服務端依舊選擇React來渲染；

通過Prefetching一些CSS和JS，縮短了30%的可交互時間在跳轉的其他頁面的時候。

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的高級前端工程師AlexLiu專門在一篇文章中記錄了具體的設計過程。

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

頁面可交互時間

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

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

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

分享名稱：Netflix的網站優化經驗服務端與客戶端渲染
URL標題：http://m.newbst.com/news46/320046.html

成都網站建設公司_創新互聯，為您提供標簽優化、品牌網站制作、網站制作、全網營銷推廣、關鍵詞優化、域名注冊