LinkedIn是如何優化主頁的

考慮到 LinkedIn 主頁的重要性，LinkedIn 的工程團隊對其主頁從根本上進行了重新設計，使得主頁內容的加載速度有了很大的提高，并實現了主頁的快速迭代更新，從而大大提高了用戶的體驗。LinkedIn 的資深工程經理 Nash Raghavan 分享了這次優化涉及到的經驗和技術。現對本次優化的背景以及優化的內容進行一個全面的梳理，以供讀者學習和參考。

1. 背景

LinkedIn 重新設計其主頁的目標包括：

• 盡可能提供最快的頁面加載時間；
• 避免主頁的全頁面加載以創建一個響應式和交互式的用戶體驗；
• 實現全自動化的 QA 和測試；
• 實現較高的版本發布頻率。
</ul>

舊的主頁由一個基于 Java 的可定制 Web 框架構建而成，其屬于一個非常糟糕的設計，并存在著一些有待改進的地方：

• 該框架缺少文檔，所以很難在不同組織以及同一組織內部進行分享；
• 該框架主要為面向服務器的頁面而設計，所以利用它很難開發出響應式的 Web 應用；
• 許多頁面和跨多個服務的 API 都封裝在一個單獨且龐大的庫中，這就使得測試和快速迭代發布變得非常困難。
</ul>

于是，LinkedIn 重新構建了一個開源的 Web 框架 Play，并對開源 HTML 模板框架 dust.js 進行了大量投入，最終結合這兩種技術實現了一個開源的 Web 開發棧，該棧能夠實現服務器端和客戶端的渲染。新舊技術棧結構對比情況如下圖所示：



2. 快速迭代

現在基本每天都發布主頁，自動化測試套僅需要 45 分鐘即刻完成；而舊的主頁只能做到每月發布一次，且有大量的人工工作，這種效果得益于如下幾點：

• Play 框架和 dust.js 組成的技術棧；
• 為主頁的代碼創建了一個獨立的 Git 庫；
• 主頁成為獨立、可單獨部署的單元且具有自己的服務器；
• 單元測試、功能測試、集成測試、系統測試等都實現了自動化。
</ul>

3. 頁面加載

優化頁面加載時間是目前為止遇到的最困難問題，這是因為主頁承載著成百上千個服務，所以需要很長時間來理解哪些地方加載比較耗費時間以及怎么優化相關瓶頸。為了優化頁面加載時間，LinkedIn 引入了以下四種主要技術：

• 服務器端渲染(SSR)：服務器端渲染技術使得頁面能夠在服務器端即刻實現渲染，從而減少了瀏覽器端的大量 JavaScript 和不可避免的計算。

  </li>

• 頁面加載技術 BigPipe
  該技術使得開發者能夠流化主頁和在等待所有依賴頁面準備好前就可以在瀏覽器上渲染，從實現了主頁的一些部分比其他部分能夠較快地提供給用戶使用，其他部分又能夠盡快得到渲染，而不是等待和立刻渲染頁面的所有部分。

  </li>

• 圖片延遲加載
  最難評估和很難控制的一件事情是圖片加載，特別是來自第三方的圖片，這是因為這類圖片有可能沒有駐留在 CDN。因此，延遲圖片的加載直到頁面完全加載，且能夠用于交互，這樣就能夠使得用戶能夠讀取信息和在圖片加載前就能夠同頁面內容進行交互。

  </li>

• 減少重定向
  重定向給用戶帶來了較高的延遲，尤其是低速或者高延遲網絡（如移動網絡）下的用戶。LinkedIn 減少了所需重定向的次數，并在 ATS（即反向代理服務器 Apache Traffic Server）中實現請求轉向。

  </li> </ul>

  現在，盡管 LinkedIn 已經有了一個加載非常快的主頁，但是 LinkedIn 仍在不斷努力地研究新技術以進一步優化主頁。LinkedIn 正在研究的技術包括：

  • 在采用比較適于異步編程的 Scala 基礎上，準備利用具有 Lambda 特性的 Java 8 進一步提高性能；
  • 為了支持響應式和交互式的頁面，創建了一個可定制的客戶端 MVC JavaScript 框架；此外，當前正在研究類似 Ember.js 的框架，用來確定是否能夠使用一個更加可擴展的客戶端 MVC 框架；
  • 為了能夠做到每天能夠多次發布版本，正在研究更多的自動化框架。
  </ul>
  來自: InfoQ
   本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
   轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
   本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！
    本文地址：http://www.baiduhome.net/news/view/17dfac2
  LinkedIn