主要观点总结
本文介绍了通过接口预请求提升H5页面首次有效绘制(FMP)渲染速度的方案。方案包括通过APP帮助获取首屏数据,提升页面打开速度。解决了如何通过APP知道哪些页面需要预请求、请求什么接口及参数的问题,如何通过同步请求结果并避免H5重复请求的问题,以及如何获取到正确的数据的问题。最终实现了H5秒开的效果,FMP达到1.2秒以上的超过80%,大部分页面有200~600ms的提升。
关键观点总结
关键观点1: 利用APP在打开H5页面时帮助获取首屏数据,提升页面打开速度。
通过接口预请求方案,相对低成本地提升FMP的渲染速度。
关键观点2: 解决APP知道哪些页面需要预请求、请求什么接口及参数的问题。
通过新增app.config.json配置文件,配置页面需要请求的主接口、请求方法、header、body、url参数等。
关键观点3: 解决同步请求结果并避免H5重复请求的问题。
通过APP在获取到结果后,将数据注入到window对象下,H5页面通过监听window对象获取数据。
关键观点4: 解决获取到正确的数据的问题。
通过修改H5项目的HTTP公共库,使其在开发和测试环境都是通过读取app.config.json中配置的接口、参数等来发起请求,保证开发和线上请求的一致性。
关键观点5: 最终效果及数据对比。
开启H5秒开后包含接口预请求策略后,所有H5项目FMP达到1.2秒的超过80%,大部分页面有200~600ms的提升。
文章预览
前言 介绍了一种低成本的 H5 秒开方案,通过接口预请求,利用 APP 在打开 H5 页面时帮助获取首屏数据,从而提升了页面的首次有效绘制(FMP)渲染速度。今日前端早读课文章由 @思考的 Joey 授权分享。 正文从这开始~~ 背景 作为直接面向用户的前端开发人员,我们都知道页面首屏打开速度的重要性,直接关系到用户的留存。 提升 H5 页面打开速度的方法也有很多,有从网络优化入手的 CDN、gzip 压缩、Keep-Alive 等,有从加载优化入手的资源大小优化、懒加载、按需加载、代码拆分、Tree Shaking 等,以及页面渲染时的一些优化。 在我们的项目中,上述优化基本都有使用,当优化达到一定程度,想要继续仅基于 H5 自身优化已难以再提升,就需要和客户端合作,提升 H5 页面的打开速度,比如离线缓存、预加载等。 【第3206期】Service Worker:离线应用与后台
………………………………