路由懒加载
适用于SPA(不适用 MPA)
路由拆分,优先保证首页加载
服务端渲染 SSR
传统的 SPA 方式过程繁多
- 下载 html ,解析,渲染
- 下载 js ,执行
- ajax 异步加载数据
- 重新渲染页面
而 SSR 则只有一步,渲染页面过程简单,所以性能好
- 下载 html ,解析,渲染
如果是纯 H5 页面,SSR 就是首屏优化的终极方案。
扫描二维码关注公众号,回复:
14230803 查看本文章
技术方案:
- 传统的服务端模板,如 ejs smarty jsp 等
- Nuxt.js ( Vue 同构 )
- Next.js ( React 同构 )
App 预取
如果 H5 在 App webview 中展示,可以使用 App 预取资源
用户访问列表页时,APP 预加载文章首屏内容
用户进入H5页,直接从APP中获取内容,瞬间展示首屏
分页
针对列表页
默认只展示第一页内容
上滑加载更多
图片懒加载 lazyLoad
针对详情页
默认只展示文本内容,然后触发图片懒加载
注意:提前设置图片尺寸,尽量只重绘不重排
离线包 hybrid
提前将 html css js 等下载到 App 内
当在 App 内打开页面时,webview 使用 `file://` 协议加载本地的 html css js