H5秒开方案大全 _H5

老板说 , 页面打开速度过慢? 页面加载性能不达标? 下面我们来看下各个大厂和团队的秒开经典方案，有没有一款适合你去探索？
本页面会列举和总结偏向与客户端结合的 hybrid 秒开方案，纯前端方案也会部分提及。
【H5秒开方案大全】常用的加速方法
说起 H5 性能优化方案，是个老生常谈的话题，通常的 web 优化方法，基本围绕在资源加载和 html 渲染两个方面。前者针对首屏，后者针对可交互。资源优化上，我们总的方向是围绕更小的资源包上，比如常见的：压缩、减包、拆包、动态加载包及图片优化上。html 渲染上总的方向是更快的展示内容，比如通过 CDN 分发、DNS 解析、http 缓存、数据预请求，数据缓存及首屏优化大杀器——直出等。
这些方案是各种前端面试中必考点，也是作为一个前端开发，当遇到性能问题、需要解决性能问题时的能够想要最为首要，也基本的思路。而具体应该使用什么样的方案，取决于实际开发需求、优先级、综合成本、及投入产出比等。
在 react-native、weex、及 flutter 等客户端的技术不断在冲击传统 hybrid 的时候，hybrid 也在一路演化、加速，朝着一个使其达到与原生相媲美的方向发展。下面归纳了 hybrid 发展中出现的一些方案，排序不分先后。
直出+离线包缓存
为了优化首屏，大部分主流的页面会通过服务器进行渲染，吐出 html 文件到前端，解决转菊花比较久的问题，不同类型的主流框架，都会有一套后台渲染方案，比如 vue-server-renderer、react-dom/server 等。直出省去了前端渲染，及 ajax 请求的时间，虽然直出能够通过各种缓存策略优化得很好，但是加载 html 然后需要时间。
通过离线包技术能够很好解决 html 文件本身加载需要时间的问题。离线包基本思路都是通过 webview 统一拦截 url，将资源映射到本地离线包，更新的时候对版本资源检测，下载和维护本地缓存目录中的资源。比如腾讯的 webso 和 Alloykit 的离线包方案。

文章插图

离线包策略在很多大厂运用比较成熟，它对 web 端而言，是相对透明，侵入性非常小。
客户端代理的 VasSonic
在 hybrid h5 中，用户从点击到看见页面之间，还存在 webview 初始化，请求资源的时间，而这里的过程是串行的，对于追求更极致的体验来说，这里是有优化掉的空间和可能。
VasSonic 是腾讯增值会员团队研发的一个轻量级 hybrid 框架，支持上面提到的离线包策略，更进一步的是，它还做了以下优化：

webview 初始化和通过客户端代理资源请求并行-
流式拦截请求，边加载边渲染
实现了动态缓存和增量更新。

简单说下它是怎么做到的，客户端代理资源请求并行没什么好说的，就是在创建 webview 之前，通过客户端代理建立网络连接，请求 html，然后缓存起来，等待 webview 线程发起 html 资源请求的时候，客户端进行拦截，将缓存好的 html 返回给 webview 。
动态缓存和增量更新如何做到呢？
VasSonic 将 html 的内容分为 html 模板和动态数据两部分，如何区分这两种类型呢，它自己定义了一套 html 注释标记规则，通过标签划分哪些是动态数据，哪些是模板数据。然后再拓展了 http 头部，定制了一套请求后台的约定。webview 发起 http 请求时会将页面内容的 id 携带过去，后台处理判断后，再告诉客户端是否需要更新局部数据，如果是则将缓存的 html 模板与新数据拼接成新的 html，最后计算出数据差异部分，通过 js 回调给页面，进行布局刷新。

文章插图

[图来源网络]
VasSonic 的方案整体思路和效果非常不错，特别是对于大部分 web 场景，通常我们的模板较少发生变化，大部分是数据部分变化，能够很好的通过局部刷新做到秒开效果。对于首次加载而言，通过并发请求和 webview 创建带来了不错的性能提升，还能无缝的支持离线包策略。
但是 VasSonic 定义了一套特殊的注释标记及拓展了头部，需要包括后台在内的前后端进行改造，对 web 侵入性非常强，接入的工作量及维护成本会非常大。
PWA+直出+预加载
不管是离线包技术，还是 webview 代理请求，都是对前端侵入非常大的，PWA 作为 web 标准，能够通过纯 web 的方案去加速和优化加载性能。
首先，PWA 的能够通过 cacheStorage 缓存普通的图片、JS、css 资源。另一方面，在传统的 http cache 中，我们一般不会缓存 HTML，这是因为页面一旦设置了过长的 max-age，在浏览器缓存过期时间内，用户看到的永远将是旧的。