移動端頁面前端提速的技術梳理

1.面內容分塊進行組件化。

2.每個“頁”其實是一個大組件,大組件中可嵌套各功能點的小組件,頁面跳轉實質爲單頁上的大組件切換,並且通過router管理url。

3.組件加載順序:

  1)頁面只輸出組件容器;

  2)由組件管理器先異步加載組件的視圖部分(樣式、模板和渲染的數據),以保證用戶能快速看到內容;

  3)最後再異步加載組件的邏輯代碼,此時單個組件纔算加載完成。

4.首屏各組件可並行加載。

5.在localstorage中存儲3.2中模板需要的數據,以減少重複的請求,數據更新可通過服務端控制或通過時間戳判斷過期來自動更新。

6.通過manifest cache住各靜態資源(js、css、圖片)減少請求。

7.代碼更新:

  1)js更新,打包後生成新版本文件,修改manifest文件中js文件配置;

  2)css更新,合併並抓取css中的圖片地址,排重後再修改掉manifest文件中的圖片文件配置;

  3)通過applicationCache對象來判斷緩存是否更新,然後再自動update一次以達到上線後自動更新的目的。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章