H5页面如何进行首屏优化
Posted 沿着路走到底
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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
以上是关于H5页面如何进行首屏优化的主要内容，如果未能解决你的问题，请参考以下文章