H5页面如何进行首屏优化

路由懒加载

适用于SPA（不适用 MPA）

路由拆分，优先保证首页加载

服务端渲染 SSR

传统的 SPA 方式过程繁多

- 下载 html ，解析，渲染

- 下载 js ，执行

- ajax 异步加载数据

- 重新渲染页面

而 SSR 则只有一步，渲染页面过程简单，所以性能好

- 下载 html ，解析，渲染

如果是纯 H5 页面，SSR 就是首屏优化的终极方案。

技术方案：

- 传统的服务端模板，如 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