h5首页加载慢_为什么你做的H5开屏那么慢？H5首屏秒开方案探讨

阿里妹导读： 越来越多的APP内业务使用H5的方式实现，怎样让H5页面启动更快是很多人在探索的技术点，本文梳理了启动过程中的各个点，分别从前端和客户端角度去探讨有哪些优化方案，供大家参考。作者：蚂蚁金服高级无线开发专家 bang

随着移动设备性能不断增强，web 页面的性能体验逐渐变得可以接受，又因为 web 开发模式的诸多好处(跨平台，动态更新，减体积，无限扩展)，APP 客户端里出现越来越多内嵌 web 页面(为了配上当前流行的说法，以下把所有网页都称为 H5 页面，虽然可能跟 H5 没关系)，很多 APP 把一些功能模块改成用 H5 实现。

虽然说 H5 页面性能变好了，但如果没针对性地做一些优化，体验还是很糟糕的，主要两部分体验：

1.页面启动白屏时间：打开一个 H5 页面需要做一系列处理，会有一段白屏时间，体验糟糕。

2.响应流畅度：由于 webkit 的渲染机制，单线程，历史包袱等原因，页面刷新/交互的性能体验不如原生。

本文先不讨论第二点，只讨论第一点，怎样减少白屏时间。对 APP 里的一些使用 H5 实现的功能模块，怎样加快它们的启动速度，让它们启动的体验接近原生。

过程

为什么打开一个 H5 页面会有一长段白屏时间？因为它做了很多事情，大概是：

初始化 webview -> 请求页面 -> 下载数据 -> 解析HTML -> 请求 js/css 资源 -> dom 渲染 -> 解析 JS 执行 -> JS 请求数据 -> 解析渲染 -> 下载渲染图片

一些简单的页面可能没有 JS 请求数据 这一步，但大部分功能模块应该是有的，根据当前用户信息，JS 向后台请求相关数据再渲染，是常规开发方式。

一般页面在 dom 渲染后能显示雏形，在这之前用户看到的都是白屏，等到下载渲染图片后整个页面才完整显示，首屏秒开优化就是要减少这个过程的耗时。

前端优化

上述打开一个页面的过程有很多优化点，包括前端和客户端，常规的前端和后端的性能优化在 PC 时代已经有最佳实践，主要的是：

1.降低请求量：合并资源，减少 HTTP 请求数，minify / gzip 压缩，webP，lazyLoad。

2.加快请求速度：预解析DNS，减少域名数，并行加载，CDN 分发。

3.缓存：HTTP 协议缓存请求，离线缓存 manifest，离线数据缓存localStorage。

4.渲染：JS/CSS优化，加载顺序，服务端渲染，pipeline。

其中对首屏启动速度影响最大的就是网络请求，所以优化的重点就是缓存&#