Netflix的網(wǎng)站優(yōu)化經(jīng)驗服務(wù)端與客戶端渲染

Netflix目前是全球非常非常出色的流媒體服務(wù)網(wǎng)站。自從2016年發(fā)布之后，Netflix發(fā)現(xiàn)用戶不僅會在移動端設(shè)注冊，也會在Web上完成注冊相關(guān)。

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

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

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

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

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

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

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

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

通用JavaScript

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

在兩種編程語言之間來回切換是一種負擔(dān)；

如果要對html進行改進，那么對于服務(wù)端的生成與客戶端的增強都有著很強的依賴性；

團隊更希望通過同一種API生成html標(biāo)記。

UI團隊最終選擇了以Node.js與React.js實現(xiàn)一種通用JavaScript的前端架構(gòu)，這使他們能夠?qū)崿F(xiàn)在服務(wù)端進行渲染，等基本的html與React.js組件完成初始化之后，再由客戶端完成其它部分的渲染。因此，無論渲染過程是在哪里發(fā)生的，應(yīng)用程序都能夠得到相同的輸出結(jié)果，服務(wù)端與客戶端的代碼也沒有了嚴(yán)格的區(qū)分，它們?nèi)渴前凑胀ㄓ肑avaScript的方式設(shè)計的。也正是這種共通的渲染邏輯，讓UI團隊意識到只在服務(wù)端進行最小化的html渲染，由客戶端完成其余部分加載這種方式的可行性。

減少JavaScript負載

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

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

頁面可交互時間

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

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

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

分享名稱：Netflix的網(wǎng)站優(yōu)化經(jīng)驗服務(wù)端與客戶端渲染
URL標(biāo)題：http://www.muchs.cn/news46/320046.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標(biāo)簽優(yōu)化、品牌網(wǎng)站制作、網(wǎng)站制作、全網(wǎng)營銷推廣、關(guān)鍵詞優(yōu)化、域名注冊

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)