天天看點

回歸,寫一篇前端性能優化的讀後總結

第一步 使用緩存(cache-control/expires)---------Q:如果引用的資源檔案被更新了,需加載新資源,如何處理? 

第二步 更新資源路徑(增加版本号 ?v=1.0.1)-----Q:全部增加版本号,如果隻是部分資源做了更改,浪費帶寬?

第三步 路徑與内容關聯( 資料摘要算法 ?=與内容相關)

—————————————————————————————————————————————————————— Q:當一部分靜态資源(如css),部署到了CDN上,而動态網頁部署在伺服器上,當靜态資源和動态網頁都有改動時,這次更新,是先更新CDN的内容,還是先更新伺服器的内容?

A1:先部署頁面,再部署資源。在部署間隔内,新資源未部署,請求舊内容,産生緩存,導緻頁面結構錯亂

A2:先部署資源,再部署頁面。在部署間隔内,有本地緩存的頁面可以使用本地緩存,頁面正常;沒有本地緩存的頁面錯誤。

A:将資料摘要和資源名關聯(a_dkdkjgu.css),不造成覆寫,部署時先全部部署靜态資源,再灰階部署動态頁面,實作平滑更新。

目标:

  • 配置超長時間的本地緩存 —— 節省帶寬,提高性能
  • 采用内容摘要作為緩存更新依據 —— 精确的緩存控制
  • 靜态資源CDN部署 —— 優化網絡請求
  • 更資源釋出路徑實作非覆寫式釋出 —— 平滑更新

在資源關聯時,要做到級聯關聯。例如:png圖檔路徑更新,引起css檔案更新,引起頁面引用的更新,全局防止緩存。

讀 知乎 問題來自http://www.zhihu.com/question/20790576中排名第一的張雲龍的回答 總結