H5如何首屏优化

路由懒加载

• 路由拆分, 优先保证首页加载
• 适用于SPA, 不适用于MPA
• 什么是MPA
  • 多页面应用
  • MPA 的优化侧重于​​减少重复资源加载​​（如公共库复用），而非路由级按需加载

服务端渲染SSR

• 纯H5页面, SSR是性能优化终极方案
• 成本高
  • 对服务器性能要求高
  • 如果一开始用的是SPA, 那么迁移成本有点高

App预取

打开页面前提前获取数据 预取

• 如果H5在APP WebView中展示，可使用App预取
• 用户访问列表页时，App预加载文章首屏内容
• 用户进入H5页，直接从APP中获取内容，瞬间展示首屏

Hybrid

• 提前将html js css下载到App内部
• 在App webview中使用file:// 协议加载提前下载好的本地页面文件
• 再用Ajax获取内容并展示（也结合App预取）

分页

• 针对列表页面
• 默认只展示第一页数据
• 上划加载更多

图片懒加载

• 针对详情页
• 默认只展示文本内容, 然后触发图片懒加载
• 注意: 提前设置好图片尺寸, 尽量只重绘不重排