移动端页面前端提速的技术梳理

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一次以达到上线后自动更新的目的。

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