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

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

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

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

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

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

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

因此，UI工程團(tuán)隊(duì)專門針對(duì)這一點(diǎn)進(jìn)行了全新的設(shè)計(jì)。改進(jìn)后的服務(wù)端所生成的html只包含頁面中的一小部分內(nèi)容，使客戶端的視圖能夠盡快地顯示在用戶眼前。為了了解用戶對(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)頁面完成渲染后，客戶端JavaScript可以按需加載用戶所感興趣的其余視圖。

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

通用JavaScript

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

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

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

團(tuán)隊(duì)更希望通過同一種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組件完成初始化之后，再由客戶端完成其它部分的渲染。因此，無論渲染過程是在哪里發(fā)生的，應(yīng)用程序都能夠得到相同的輸出結(jié)果，服務(wù)端與客戶端的代碼也沒有了嚴(yán)格的區(qū)分，它們?nèi)渴前凑胀ㄓ肑avaScript的方式設(shè)計(jì)的。也正是這種共通的渲染邏輯，讓UI團(tuán)隊(duì)意識(shí)到只在服務(wù)端進(jìn)行最小化的html渲染，由客戶端完成其余部分加載這種方式的可行性。

減少JavaScript負(fù)載

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

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

頁面可交互時(shí)間

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

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

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

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

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

廣告

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