主要观点总结
本文介绍了通过接口预请求提升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：离线应用与后台
………………………………
