首屏优化手段
一. 路由懒加载
1. 使用与SPA(不使用MPA)
2. 路由拆分,优先保证首页加载
二. 服务端渲染SSR
1. 传统的前后端分离(SPA)渲染页面的过程复杂
2. SSR渲染页面过程简单,所以性能好
3. 如果是纯H5页面,SSR是性能优化的终极方案
SSR是一门“古老”的技术
1. 刚刚兴起Web1.0时,就是SSR技术:PHP ASP JSP等
2. Nuxt.js(Vue)
3. Next.js(React)
三. App预取
1. 如果H5在APP WebView中展示,可使用App预取
2. 用户方位列表页时,App预加载文章首屏内容
3. 用户进入H5页,直接从App中获取内容,瞬间展示首屏
四. 分页
1. 针对列表页
2. 默认只展示第一页内容
3. 上划加载更多
五. 图片懒加载 lazyLoad
1. 针对详情页
2. 默认只展示文本内容,然后触发图片懒加载
3. 注意:提前设置图片尺寸,尽量只重绘不重排
六. Hybrid
1. 提前将HTML JS CSS下载到App内部
2. 在App webview中使用file://协议加载页面文件
3. 再用Ajax获取内容并展示(也结合App预取)