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

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

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

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

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

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

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

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

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

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

通用JavaScript

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

在兩種編程語(yǔ)言之間來(lái)回切換是一種負(fù)擔(dān)；

如果要對(duì)html進(jìn)行改進(jìn)，那么對(duì)于服務(wù)端的生成與客戶(hù)端的增強(qiáng)都有著很強(qiáng)的依賴(lài)性；

團(tuán)隊(duì)更希望通過(guò)同一種API生成html標(biāo)記。

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

減少JavaScript負(fù)載

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

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

頁(yè)面可交互時(shí)間

為了對(duì)重構(gòu)后的效果進(jìn)行測(cè)試，以更好地理解它對(duì)用戶(hù)所產(chǎn)生的影響，UI團(tuán)隊(duì)對(duì)于頁(yè)面的可交互時(shí)間（TimetoInteractive-tti）這項(xiàng)指標(biāo)進(jìn)行了專(zhuān)門(mén)的監(jiān)控。

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

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

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

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

廣告

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