【譯】性能提升70%,Netflix的網站提速最佳實踐

簡單來說,今天要說的是性能問題。大家上網時都想馬上看到自己想看的內容,而且我們也發現快速的啟動能提高用戶滿意度。因此,當我們著手做期待已久的Neflix.com升級任務時,網站的界面工程團隊把啟動性能作為最高優先級的任務。

這次我們把啟動時間縮短了70%,主要在以下三個方面做了改善:

1. 服務器和客戶端渲染

2. 通用JavaScript

3. 降低JavaScript負載

服務器和客戶端渲染

舊版netflix.com網站堆棧在服務器標記語言和客戶端轉化之間有著硬性的分離。這主要是由于我們應用的各個部分使用了不同的編程語言。在服務器端,我們使用的是配合Tomcat,Struts和Tiles使用的Java語言。在瀏覽器端,我們通過JavaScript來轉化服務器生成的標記語言,主要使用jQuery。

這樣的分離導致啟動時間很不理想。每當用戶訪問netflix.com上的頁面,我們的Java層響應的時候都要處理整個頁面并轉成HTML發送。于是用戶需要一直等待直到整個頁面完全生成,而其中大部分內容他們并不感興趣。

我們的新架構只渲染頁面的一小部分,自動生成客戶端視圖。我們可以改變服務器生成的總視圖的數量,這樣便于觀察因此產生的正面或負面的影響。服務器響應時需要的數據很少,將數據轉換為DOM元素時花的時間也更少。客戶端JavaScript接管后,它會檢查當前視圖的數據以及后續會話要求的視圖的數據。這樣做最大好處是減少了服務器處理時間,并且把渲染整合到同一種語言中。

我們發現服務器和客戶端分別渲染還提供了一種靈活性,允許我們選擇哪些部分在服務器端渲染,哪些在客戶端渲染,于是實現了更快的啟動和視圖之間的平滑切換。

通用的JavaScript

為了在服務器端和客戶端支持相同的渲染,我們要重新考慮我們的渲染路徑。必須放棄我們以前的架構中把在服務器端生成標記語言與在客戶端進行強化這二者分離的做法。

三大痛點促使我們使用新的Node.js架構:

1. 語言之間的內容切換不理想。

2. 強化標記語言需要太多用于生成標記語言的服務器專用代碼和用于強化的客戶端專用代碼的直接耦合。

3. 我們更傾向于使用同一種API生成所有的標記語言。

針對這個問題,實際上有許多不需要用到Universal JavaScript的解決方法,但是基于如下原因我們發現這個方案是最合適的:如果同一個東西有兩個副本,那這兩個副本之間很容易產生微小的差異。使用Universal JavaScript意味著只需要把渲染邏輯發送到客戶端。

Node.js和React.js天然適用于這類應用場景。通過Node.js和React.js,我們可以在服務器進行渲染,然后在最初的標記語言和React.js的內容發送到瀏覽器之后,再在客戶端對整體的變化進行渲染。這種靈活性允許應用程序在不同的位置獨立地進行相同的渲染輸出。服務器端和客戶端的硬性分離不復存在,它們的渲染輸出也就不會有所不同。

降低JavaScript負載的影響

在網站上實現豐富的交互體驗,對用戶來說往往會轉變為沉重的JavaScript負載。在我們的新架構中,我們特別注意把一些大的依賴庫替換成多個小模塊,并且只對當前訪問的用戶發送適合他們的JavaScript。

很多在舊架構中用過的大的依賴庫沒有繼續用在新架構中,我們把它們替換成一批新的、更有效率的庫。更新這些庫使得JavaScript的負載變小了很多,這意味著人們在訪問的時候只需要很少的JavaScript。我們知道這個部分仍然有很多要完善的地方,我們正在努力使得JavaScript負載進一步下降。

交互時間

為了了解這些改進帶來的影響,我們監控了一個叫交互時間(tti)的參數。

交互時間指的是應用平臺首次啟動與UI界面互動響應之間的時間量。注意,這并不需要UI界面完全加載,而是用戶可以使用輸入設備與UI進行交互的第一時間點。

對于在瀏覽器中運行的應用,這個數據可以從Navigation Timing API得到。

工作仍在繼續

我們堅信,高性能并不是一個隨意的工程目標——它是創造良好用戶體驗的硬性要求。我們已經在啟動性能方面取得了顯著進步,并將在致力于為用戶持續提供更好的用戶體驗的過程中,不斷嘗試挑戰行業的最佳做法。

接下來的幾個月,我們會研究Service Workers, ASM.js, Web Assembly和其它新興的網絡標準,看看能否利用它們實現更高性能的網站體驗。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,908評論 6 541
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,324評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,018評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,675評論 1 317
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,417評論 6 412
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,783評論 1 329
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,779評論 3 446
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,960評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,522評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,267評論 3 358
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,471評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,009評論 5 363
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,698評論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,099評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,386評論 1 294
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,204評論 3 398
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,436評論 2 378

推薦閱讀更多精彩內容

  • Spring Cloud為開發人員提供了快速構建分布式系統中一些常見模式的工具(例如配置管理,服務發現,斷路器,智...
    卡卡羅2017閱讀 134,823評論 18 139
  • 轉自《人人都是產品經理》,原文鏈接:寫給產品經理技術書 產品經理有三大領域的技術是需要去攻克的,分別是:客戶端相關...
    游社長閱讀 4,162評論 4 79
  • 不知道你們有沒有遇到過這種人,他們一見到讓自己不爽的人或事,總免不了一頓嘮嗑,逮誰說誰,一副欠他五百萬沒還,苦大仇...
    靈珂閱讀 536評論 7 24
  • 今天才真正明白,什么叫做世上本無事,庸人自擾之。這個庸人,應該就是那種將事情做的一團糟的人吧~ 很簡單的查課行為,...
    林藪閱讀 402評論 0 0
  • 道沖,而用之又弗盈也。 淵呵,似萬物之宗。 湛呵,似或存。 吾不知誰之子也,象帝之先。
    陸軍_4bcb閱讀 95評論 0 0