h5 秒开方案大全

来源:http://www.chinese-glasses.com 作者:Web前端 人气:80 发布时间:2020-04-22
摘要:首先,PWA 的能够通过 cacheStorage 缓存普通的图片、JS、CSS资源。另一方面,在传统的 http cache 中,我们一般不会缓存HTML,这是因为页面一旦设置了过长的max-age,在浏览器缓存过期时间内

首先,PWA 的能够通过 cacheStorage 缓存普通的图片、JS、CSS 资源。另一方面,在传统的 http cache 中,我们一般不会缓存 HTML,这是因为页面一旦设置了过长的 max-age,在浏览器缓存过期时间内,用户看到的永远将是旧的。

无法防劫持:若 HTML 页面被运营商或其他第三方劫持,将长时间缓存劫持的页面。

不管哪种类型的方案,发现其总的思路和方向都是:

无论是 iOS 还是 Android,本地 webview 初始化都要不少时间,可以预先初始化好 webview。这里分两种预加载:

但是 VasSonic 定义了一套特殊的注释标记及拓展了头部,需要包括后台在内的前后端进行改造,对 web 侵入性非常强,接入的工作量及维护成本会非常大。

清理逻辑不可控,缓存空间有限,可能缓存几张大图片后,重要的 HTML/JS/CSS 缓存就被清除了。

对于直出 HTML,我们可以配合 PWA,将从后台直出的文件,缓存到 cacheStorage,在下一次请求时,优先从本地缓存中获取,同时发起网络请求更新本地 html 文件。

HTML 和 JS/CSS/image 资源都属于静态文件,HTTP 本身提供了缓存协议,浏览器实现了这些协议,可以做到静态文件的缓存。

小程序化

3.根据配置表,打开某个业务时转接到打开离线包的入口页面。

这些方案是各种前端面试中必考点,也是作为一个前端开发,当遇到性能问题、需要解决性能问题时的能够想要最为首要,也基本的思路。而具体应该使用什么样的方案,取决于实际开发需求、优先级、综合成本、及投入产出比等。

4.拦截网络请求,对于离线包已经有的文件,直接读取

在整个链路中减少中间环节。比如将串行改并行,包括小程序内部执行机制。尽可能的预加载、预执行。比如从数据预取,到页面预取渲染等。

理想情况下离线包的方案第一次打开时所有 HTML/JS/CSS 都使用本地缓存,无需等待网络请求,但页面上的用户数据还是需要实时拉,这里可以做个优化,在 webview 初始化的同时并行去请求数据,webview 初始化是需要一些时间的,这段时间没有任何网络请求,在这个时机并行请求可以节省不少时间。

3.可以针对每个 HTML 和资源文件做增量更新,只是实现和管理起来比较麻烦。

如果使用了 PWA 的 HTML 页面,能否直接缓存呢?由于 PWA 可精细化控制缓存,答案是可以的。

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

为了优化首屏,大部分主流的页面会通过服务器进行渲染,吐出 html 文件到前端,解决转菊花比较久的问题,不同类型的主流框架,都会有一套后台渲染方案,比如 vue-server-renderer、react-dom/server 等。直出省去了前端渲染,及 ajax 请求的时间,虽然直出能够通过各种缓存策略优化得很好,但是加载 html 然后需要时间。

服务端渲染

时间: 2019-09-22阅读: 159标签: 加载

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

简单说下它是怎么做到的,客户端代理资源请求并行没什么好说的,就是在创建 webview 之前,通过客户端代理建立网络连接,请求 html,然后缓存起来,等待 webview 线程发起 html 资源请求的时候,客户端进行拦截,将缓存好的 html 返回给 webview。

更多优化

VasSonic是腾讯增值会员团队研发的一个轻量级 hybrid 框架,支持上面提到的离线包策略,更进一步的是,它还做了以下优化:

离线包

GMTC2019 全球大前端技术上 UC 团队提到了 0.3 秒的 “闪开” 方案。NSR 就是前端版本的 SSR,非常具有启发性。

这些缓存策略可以实现 JS/CSS 等资源文件以及用户数据的缓存的全缓存,可以做到每次都直接使用本地缓存数据,不用等待网络请求。但 HTML 文件的缓存做不到,对于 HTML 文件,如果把 Expires / max-age 时间设长了,长时间只使用本地缓存,那更新就不及时,如果设短了,每次打开页面都要发网络请求询问是否有更新,再确定是否使用本地资源,一般前端在这里的策略是每次都请求,这在弱网情况下用户感受到的白屏时间仍然会很长。所以 HTML 文件的“缓存”和跟“更新”间存在矛盾。

客户端代理的 VasSonic

4.在客户端使用 httpdns + https 防劫持。

原文 -performance-optimize/

前端优化

任何转换都有代价,加速本质上就是在用更多的网络、内存和 CPU 换取速度,以空间换时间。

优化方法可以是人为减少 JS 渲染逻辑,也可以是更彻底地,回归到原始,所有内容都由服务端返回的 HTML 决定,无需等待 JS 逻辑,称之为服务端渲染。是否做这种优化视业务情况而定,毕竟这种会带来开发模式变化/流量增大/服务端开销增大这些负面影响。手Q的部分页面就是使用服务端渲染的方式,称为动态直出。

VasSonic 的方案整体思路和效果非常不错,特别是对于大部分 web 场景,通常我们的模板较少发生变化,大部分是数据部分变化,能够很好的通过局部刷新做到秒开效果。对于首次加载而言,通过并发请求和 webview 创建带来了不错的性能提升,还能无缝的支持离线包策略。

1.首次预加载:在一个进程内首次初始化 webview 与第二次初始化不同,首次会比第二次慢很多。原因预计是 webview 首次初始化后,即使 webview 已经释放,但一些多 webview 共用的全局服务或资源对象仍没有释放,第二次初始化时不需要再生成这些对象从而变快。我们可以在 APP 启动时预先初始化一个 webview 然后释放,这样等用户真正走到 H5 模块去加载 webview时就变快了。

NSR 渲染

这里讨论了 H5 页面首屏启动时间的优化,上述优化过后,基本上耗时只剩 webview 本身的启动/渲染机制问题了,这个问题跟后续的响应流畅度的问题一起属于另一个优化范围,就是类 RN / Weex 这样的方案,有机会再探讨。

说起 H5 性能优化方案,是个老生常谈的话题,通常的 web 优化方法,基本围绕在资源加载和 html 渲染两个方面。前者针对首屏,后者针对可交互。资源优化上,我们总的方向是围绕更小的资源包上,比如常见的:压缩、减包、拆包、动态加载包及图片优化上。html 渲染上总的方向是更快的展示内容,比如通过 CDN 分发、DNS 解析、http 缓存、数据预请求,数据缓存及首屏优化大杀器——直出等。

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

PWA 一系列方案替代离线包策略,带来的好处是,属于 web 标准,适用于普通能够支持 service-worker 的 H5 页面。在允许兼容问题允许的情况下,建议主加。

3.还可以对离线包做一个线上版本,离线包里的文件在服务端有一一对应的访问地址,在本地没有离线包时,直接访问对应的线上地址,跟传统打开一个在线页面一样,这种体验相对等待下载整个离线包较好,也能保证用户访问到最新。

NSR 将 SSR 渲染的过程分发到了各个用户的端中,在减少了后台请求压力的同时,也加进一步快了页面打开速度,堪称做到极致。

2.直接使用本地缓存:根据协议里的 Cache-Control / Expires 字段去确定多长时间内可以不去发请求询问更新,直接使用本地缓存。

直出+离线包缓存

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

这对 hybrid 应用而言,就提出了一项新的思路和挑战,能否在客户上实现一套基本的 service-worker api?从而达到和 web 标准相兼容。这里也只是一种思路和想法,有大量待探索的问题点,比如 webview sw 具体的性能现状,未来的支持情况呢,自行实现的成本,及最终带来的效果和价值等。

问题

老板说 , 页面打开速度过慢? 页面加载性能不达标? 下面我们来看下各个大厂和团队的秒开经典方案,有没有一款适合你去探索?本页面会列举和总结偏向与客户端结合的 hybrid 秒开方案,纯前端方案也会部分提及。

上面的解决方案实现起来十分繁琐,原因就是各个 HTML 和资源文件很多很分散,管理困难,有个较好的方案可以解决这些问题,就是离线包。

通过离线包技术能够很好解决 html 文件本身加载需要时间的问题。离线包基本思路都是通过 webview 统一拦截 url,将资源映射到本地离线包,更新的时候对版本资源检测,下载和维护本地缓存目录中的资源。比如腾讯的 webso 和 Alloykit 的离线包方案。

上述方案似乎已完整解决缓存问题,但实际上还有很多问题:

客户端 PWA

本文出处链接: https://mp.weixin.qq.com/s/ye1CeIjlfs9VSUab3gQI5g
作者:蚂蚁金服高级无线开发专家 bang

不管是离线包技术,还是 webview 代理请求,都是对前端侵入非常大的,PWA 作为 web 标准,能够通过纯 web 的方案去加速和优化加载性能。

总结起来,大体优化思路就是:缓存/预加载/并行,缓存一切网络请求,尽量在用户打开之前就加载好所有内容,能并行做的事不串行做。这里有些优化手段需要做好一整套工具和流程支持,需要跟开发效率权衡,视实际需求优化。

离线包策略在很多大厂运用比较成熟,它对 web 端而言,是相对透明,侵入性非常小。

2.缓存不可控:缓存的存取由系统 webview 控制,无法控制它的缓存逻辑,带来的问题包括:

对于非直出的页面,我们仍然无法避免浏览器渲染 html 时间的问题,应该如何 kill 调这里的时间呢?

先接着缓存说,在客户端有更自由的缓存策略,客户端可以拦截 H5 页面的所有请求,由自己管理缓存,针对上述 HTML 文件的“缓存”和“更新”之间的矛盾,我们可以用这样的策略解决:

但是在 hybrid 的 h5 应用,第一次启动的加载资源仍然费时,我们可以通过 app 端上支持预加载一个 javascript 脚本,拉取需要 PWA 缓存的页面,可以提前完成缓存。

这样看起来已经比较完美了,HTML 文件在用客户端的策略缓存,其余资源和数据沿用上述前端的缓存方式,这样一个 H5 页面第二次访问从 HTML 到 JS/CSS/Image 资源,再到数据,都可以直接从本地读取,无需等待网络请求,同时又能保持尽可能的实时更新,解决了缓存问题,大大提升 H5 页面首屏启动速度。

在 hybrid h5 中,用户从点击到看见页面之间,还存在 webview 初始化,请求资源的时间,而这里的过程是串行的,对于追求更极致的体验来说,这里是有优化掉的空间和可能。

1.在客户端拦截请求,首次请求 HTML 文件后缓存数据,第二次不发请求,直接使用缓存数据。

在实际测试、及和浏览器团队的同学了解和沟通中,service-worker 在 webview 实现性能并没有想象中好。在某项目下掉 sw 后,整体大盘访问速度整体反而提升上升了大概 300ms。

公共资源包

动态缓存和增量更新如何做到呢?

总的来说,就是两种缓存:

小程序生态已经非常成熟了,各大厂也都已经推出了自己平台的小程序,国内厂商也不断在尝试推进MiniAppw3c 标准。不管从加载速度还是页面流畅度小程序都要高于 H5 页面,其原因是通过在架构上对开发进行规范化和约束化,小程序内部将 webview 渲染和 js 执行分离开来,然后通过离线包,页面拆分,预加载页面等一系列优化手段,让小程序天然具备了大量的 H5 优化后的效果,其代价是牺牲了 web 的灵活性。但对于 hybrid 开发,通过原生客户端底层支持这种小程序环境,然后大量业务逻辑采用小程序方案开发,来达到迭代速度与性能兼并的效果,是一种非常不错的方向。

其中对首屏启动速度影响最大的就是网络请求,所以优化的重点就是缓存,这里着重说一下前端对请求的缓存策略。我们再细分一下,分成 HTML 的缓存,JS/CSS/image 资源的缓存,以及 json 数据的缓存。

在 react-native、weex、及 flutter 等客户端的技术不断在冲击传统 hybrid 的时候,hybrid 也在一路演化、加速,朝着一个使其达到与原生相媲美的方向发展。下面归纳了 hybrid 发展中出现的一些方案,排序不分先后。

到这里,对于使用 H5 开发功能模块,离线包是一个挺不错的方案了,简单复述一下离线包的方案:

本文主要总结了这几天大量阅读梳理十几篇关于秒开的文章和及最近的一些思考与实践,从中提取出了部分具有代表性的方案。

网路和存储接口如果使用 webkit 的 ajax 和 localStorage 会有不少限制,难以优化,可以在客户端提供这些接口给 JS,客户端可以在网络请求上做像 DNS 预解析/IP直连/长连接/并行请求等更细致的优化,存储也使用客户端接口也能做读写并发/用户隔离等针对性优化。

其核心思路是,借助浏览器启用一个 JS-Runtime,提前将下载好的 html 模板及预取的 feed 流数据进行渲染,然后将 HTML 设置到内存级别的 MemoryCache 中,从而达到点开即看的效果。

1.可以预先下载整个离线包,只需要按业务模块配置,不需要按文件配置,离线包包含业务模块相关的所有页面,可以一次性预加载。

问题是数据预取和预渲染带来额外的流量和性能开销,特别是流量,如何更准确的预测用户行为,提高命中率是非常重要的事。类似 NSR 的方案我们也在逐步探索中。

1.简单的方案是如果本地离线包没有或不是最新,就同步阻塞等待下载最新离线包。这种用户打开的体验更差了,因为离线包体积相对较大。

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

10bet,另外上述讨论的是针对功能模块类的 H5 页面秒开的优化方案,客户端 APP 上除了功能模块,其他一些像营销活动/外部接入的 H5 页面可能有些优化点就不适用,还需要视实际情况和需求而定。另外微信小程序就是属于功能模块的类别,差不多是这个套路。

这里明确两个点,第一次永远只能靠提前加载,所以上面的借助端上预加载脚本任然生效;第二点非直出页面,每个页面需要有独一无二的标记,比如 hash。浏览器获取到数据,并且渲染好的 html,能够通过 outerHTML 方法,将 html 页面缓存到 cacheStorage 中,第二次访问任然优先从本地获取,同时发起 html 请求,通过对比其中唯一标识的差异,决定是否需要更新。

3.离线包可以很方便地根据版本做增量更新。

PWA+直出+预加载

预加载 webview

VasSonic 将 html 的内容分为 html 模板和动态数据两部分,如何区分这两种类型呢,它自己定义了一套 html 注释标记规则,通过标签划分哪些是动态数据,哪些是模板数据。然后再拓展了 http 头部,定制了一套请求后台的约定。webview 发起 http 请求时会将页面内容的 id 携带过去,后台处理判断后,再告诉客户端是否需要更新局部数据,如果是则将缓存的 html 模板与新数据拼接成新的 html,最后计算出数据差异部分,通过 js 回调给页面,进行布局刷新。

上述几种方案策略也可以混着使用,看业务需求。

本文由10bet发布于Web前端,转载请注明出处:h5 秒开方案大全

关键词:

最火资讯