为什么空的 Service Worker 会显着降低页面加载速度？答案

【问题标题】：Why does an empty service worker significantly slow down page load speed?为什么空的 Service Worker 会显着降低页面加载速度？
【发布时间】：2020-05-15 04:26:49
【问题描述】：

一个非常简单的设置。

在 index.html 中的<script> 标签中导入 service worker 文件，如下所示：

if ('serviceWorker' in navigator) {
    window.addEventListener('load', function() {
        navigator.serviceWorker.register('/app/static/js/service-worker.js', { scope: '/' });
    });
}

Service Worker 本身为空（1 行）：

console.log('Successfully Installed Service Worker.');

运行页面加载速度测试后，我得到了有趣的结果：

                        DOM Interactive    DOM Complete       Load Event End     Number of page loads
no-service-worker       0.232              2.443              2.464              30
with-service-worker     0.343              2.484              2.502              30

什么给了？一个空的 Service Worker 如何将页面加载速度减慢 120 多毫秒？

【问题讨论】：

标签： performance web caching performance-testing service-worker

【解决方案1】：

一些浏览器会通过检测服务工作者中何时没有fetch 处理程序来优化事物，并且不会在服务工作者启动时阻止导航。（Chrome 对此非常激进。）其他浏览器则没有。您没有提及您在哪个浏览器上进行测试，但我并不感到特别惊讶的是有一些影响。

关于这个主题的更多背景in this talk。

【讨论】：

感谢您的回复。我在 Chrome 81.0.4043.2 Canary 中运行测试。由于我的服务人员是空的并且没有注册任何fetch 处理程序，我认为应该不会因此而增加开销。我还查看了您引用的演讲，但我发现与我的场景相关的唯一一件事是服务工作者的启动成本。但这再次令人困惑。如果服务人员是空的，那么为什么会增加延迟？也许这 120 毫秒是 Chrome 中 service worker 引擎的启动成本？
是的，我想是这样的。尽管网络请求不应该在 service worker 启动时阻塞（因为没有 fetch 处理程序），但可用于渲染页面的 CPU 时间最终会被用于启动 SW。