使Instagram.com更快的三個步驟:預取資料、推送資料和使用快取 -Instagram Engineering

banq發表於2019-10-12

近年來,instagram.com發生了許多變化-我們推出了故事,過濾器,建立工具,通知和直接訊息傳遞,以及許多其他功能和增強功能。但是,隨著產品的增長,副作用是我們的網路效能開始下降。在過去的一年中,我們做出了有意識的努力來改善這一狀況。到目前為止,這項持續不斷的工作已使我們的Feed頁面載入時間累計提高了近50%。這一系列部落格文章將概述我們所做的一些工作,這些工作導致了這些改進。

第1部分中,我們討論了使用JavaScript,XHR和影象預取資料:

<link rel="preload" href="/static/FeedPageContainer.js" as="script" type="text/javascript" />

第2部分中,我們討論了通過直接將資料推送給客戶端而不是等待客戶端請求資料來提高效能。使用早期重新整理和漸進HTML推送資料

在第3部分(點選標題進入)使用快取:

  • 在頁面載入時,我們傳送對新資料的請求(或等待其推送)
  • 建立Redux狀態的分段子集
  • 在請求/推送未決期間,我們儲存所有排程的動作
  • 請求解決後,我們會將操作與新資料以及所有待處理的操作一起應用到暫存狀態
  • 提交暫存狀態後,我們只需用暫存狀態替換當前狀態即可。

第4部分中,將介紹如何通過程式碼大小和執行優化來減少程式碼庫的大小並提高其效能。

 

相關文章