摘要：目标是探索是否能够加快页面首屏速度。实验组浏览器支持，本次时，进行初始化。从上面的直观对比可以看出，个指标，组的分位值都略微大于组的分位值，差距在几十毫秒左右。最终，我也没有采用来优化首屏速度。
写在前面本文首发于公众号：符合预期的CoyPan
不久之前，我简单探索了service worker在一个活动运营页面中的应用，可以参考我之前的这篇文章：
service worker轻度探索 - 解决运营活动需求中的图片加载问题");
那个时候，我就发现了一个现象：一张图片从service worker中加载的耗时，大于其从浏览器缓存中加载的耗时。最近在做页面首屏性能优化的相关工作，那么service worker能让页面首屏加载变快么？
业务场景首先明确一下业务场景：一个App的h5分享页。这个分享页是一个使用react开发的单页应用，用户的交互只会停留在这个页面，不会跳转到其他的页面。业务中使用service worker来缓存静态资源(js，css)，逻辑很简单，就是在service worker初始化的时候，将页面的静态资源缓存下来，后续访问页面时，可以直接从service worker中加载静态资源。有一个点需要注意，service worker的优先级是高于浏览器自带缓存的。目标是探索service worker是否能够加快页面首屏速度。
探索service worker的效果针对本文提到的业务场景，我设计了小流量实验来验证service worker对网页首屏速度的影响。
首先明确一下实验指标：
指标①：页面fetchStart到window.onload触发时的耗时。
指标②：页面fecthStart到最外层组件的componentDidMount触发时的耗时。
指标③：FP，页面首次绘制的时间点。
指标④：FCP，页面首次内容绘制的时间点。
关于首屏速度的更多指标，可以参考我之前写的这篇文章：
当考虑网页首屏加速的时候，我们在考虑什么
我通过用户id将页面的流量均分成了两组，对照组A，实验组B。
对照组A：不包含service worker逻辑，完全走之前的页面加载模式。
实验组B：包含service worker逻辑，使用service worker劫持网页中的静态资源请求。
在实验组B中，包含了以下多种情况：
实验组B1: 浏览器根本就不支持service worker。
实验组B2: 浏览器支持service worker，本次pv时，service worker进行初始化。
实验组B3: 浏览器支持service worker，本次pv时，service worker已经劫持了静态资源请求，静态资源是从service worker中加载的。
我统计了5个自然天里，各个指标的50分位值，60分位值，90分位值和平均数。我们先来直观地看下A组和B组各个指标的50分位值的对比吧。
从上面的直观对比可以看出，4个指标，B组的50分位值都略微大于A组的50分位值，差距在几十毫秒左右。
其实，各个指标的50分位值，60分位值，90分位值和平均数，都是B组的值略大于A组的值。
到这里，其实已经可以得出一个结论了：在本文所描述的业务场景中，service worker并不能提高首屏速度。
下面是本次实验的详细数据。
首先给出一个上图看不出来的数据：
在实验组B中，B1，B2，B3三个组的PV占比大致为：20%，46%，34%。
接着，从上面的数据中，可以发现几个比较有意思的点：
那些根本不支持service worker的浏览器，他们的指标①和指标②其实是挺快的。
不支持service worker的浏览器，也不支持FP和FCP这两个指标。
service worker初始化时，会拖慢所有的指标，也就是说，会影响页面的首屏速度。
当service worker已经劫持了网络请求，静态文件通过sw加载时，所有的指标都是最快的，可以提升首屏速度。
思考总结从详细数据来看，如果静态文件通过service worker加载时，确实可以较大幅度提高首屏速度。但是从整体的效果上来看，service worker并不能提高首屏速度，甚至还会略微降低首屏速度。这是由业务场景决定的。最终，我也没有采用service worker来优化首屏速度。
那么，什么情况下，能用service worker来优化首屏速度呢？我觉得主要是以下两个场景：
老用户回访率很高的业务。老用户回访时，service worker已经劫持了网络请求，静态文件是可以通过service worker加载的。如果每天的页面pv里，大部分都是新用户，从整体上看，service worker并不能发挥作用，并且维护service worker本身也是需要一定的成本的，就没有必要上service worker了。
页面之间相互依赖。比如说有一个入口A页面，A页面可以跳转到B页面，那么可以在A页面中使用service worker将B页面的静态文件也缓存下来，这样可以较大幅度地提高B页面的首屏速度。
本文通过实验，收集了详细的数据，研究了service worker在首屏加速问题上的表现。虽然最终并没有在业务中采用service worker来加速首屏，但是在过程中也收获了很多的东西，符合预期。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/6740.html
摘要：所以，关于优化实战我们主要分为两部分加载渲染链路优化和编程代码优化。加载渲染链路优化从访问到页面呈现，整个链路可以做优化的思路。资源缓存这一节我们单独介绍缓存，是的，利用好缓存可以解决很多问题，包括页面加载和渲染的问题都能得到很好的优化。 优化实战 本文属于思否课堂VirtualDOM到AST玩转前端性能原理解析与代码实战课程官方博客：fed123.com 我们已经全面分析总结了评估页...
摘要：所以，关于优化实战我们主要分为两部分加载渲染链路优化和编程代码优化。加载渲染链路优化从访问到页面呈现，整个链路可以做优化的思路。资源缓存这一节我们单独介绍缓存，是的，利用好缓存可以解决很多问题，包括页面加载和渲染的问题都能得到很好的优化。 优化实战 本文属于思否课堂VirtualDOM到AST玩转前端性能原理解析与代码实战课程官方博客：fed123.com 我们已经全面分析总结了评估页...
摘要：往往纯的单页面应用一般不会太复杂，所以这里不引入和等等，在后面复杂的跨平台应用中我会将那些技术一拥而上。构建极度复杂，超大数据的应用。 showImg(https://segmentfault.com/img/bVbvphv?w=1328&h=768); React为了大型应用而生，Electron和React-native赋予了它构建移动端跨平台App和桌面应用的能力，Taro则赋...
摘要：往往纯的单页面应用一般不会太复杂，所以这里不引入和等等，在后面复杂的跨平台应用中我会将那些技术一拥而上。构建极度复杂，超大数据的应用。 showImg(https://segmentfault.com/img/bVbvphv?w=1328&h=768); React为了大型应用而生，Electron和React-native赋予了它构建移动端跨平台App和桌面应用的能力，Taro则赋...
阅读 1857·2023-04-25 17:48
阅读 3400·2021-09-22 15:37
阅读 2641·2021-09-22 15:36
阅读 5248·2021-09-22 15:06
阅读 1529·2019-08-30 15:53
阅读 1298·2019-08-30 15:52
阅读 599·2019-08-30 13:48
阅读 990·2019-08-30 12:44
