H5页面如何进行首屏优化

路由懒加载

适用于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

猜你喜欢

转载自blog.csdn.net/m0_38066007/article/details/124899995