为什么一个空的 service worker 会显着降低页面加载速度？

Question

一个非常简单的设置。

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

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

2. Service worker 本身为空（1 行）：

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

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

                        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 多毫秒来减慢页面加载速度？

Answer 1

一些浏览器会通过检测 service worker 中何时没有 fetch 处理程序来优化事情，并且不会在 service worker 启动时阻止导航。 （Chrome 对此非常激进。）其他浏览器则没有。你没有提到你在哪个浏览器上测试这个，但我并不感到特别惊讶有一些影响。

关于这个主题还有一些背景知识 in this talk。