了解 Chrome 中 Service Worker 缓存文件的时间统计

Question

我正在尝试了解 Chrome 开发工具中的网络选项卡告诉我来自 Service Worker 的缓存文件的内容。

我看到控制台中记录了缓存命中（请参阅下面的服务工作者代码），但网络选项卡使其看起来像是常规网络负载。 230 毫秒对于缓存命中来说似乎有点大。而且该值通常会发生少量变化（下一次加载可能是 217 毫秒），所以它没有向我显示最初的加载时间，当它第一次被缓存时，正如我想知道的那样。

注册service worker的代码是这样的

if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('swRoot.js').then(() => {
        console.log('registered');

        System.import('react');
        System.import('react-dom');
        System.import('a').then(({ a }) => console.log('value from a', a));
    }, err => console.log(err));
}

下面是swRoot.js的全部

self.addEventListener('install', function(event) {
    console.log('INSTALLED');

    console.log('ADDING CACHE FILES');
    event.waitUntil(
        caches.open('v1').then(function(cache) {
            return cache.addAll([
                '/react-redux/node_modules/react/dist/react-with-addons.js',
                '/react-redux/node_modules/react-dom/dist/react-dom.js',
                '/react-redux/a.js'
            ]).then(function(){ console.log('cache filling success'); }).catch(function(){ console.log('cache filling failure') });
        })
    );
});

console.log('ADDING FETCH at root level');
self.addEventListener('fetch', function(event) {
    event.respondWith(
        caches.match(event.request)
            .then(function(response) {
                // Cache hit - return response
                if (response) {
                    console.log('cache hit', event.request);
                    return response;
                }
                return fetch(event.request);
            })
    );
});


self.addEventListener('activate', function(event) {
    console.log('ACTIVATE');
});

Answer 1

此具有一些关于如何解释服务工作者参与网络面板中条目的背景知识。

您提供的屏幕截图显示了 service worker 返回的响应，没有任何网络参与，因此它可能直接来自缓存。（如果您的屏幕截图中没有包含另一个条目，旁边有一个小齿轮图标，那就另当别论了。）

“网络”面板中显示的 ~200 毫秒时间反映了页面发出请求和页面获得响应之间经过的总时间。当涉及到 service worker 时，如果页面的主线程正在执行其他任务，则发出请求和处理响应都可能会延迟。在您的示例中，我假设由于您的 System.import() 调用，主线程正忙于评估和执行一堆 JavaScript，因此可能会解释 ~200ms 的开销。

Chromium 团队正在评估从 request/response 关键路径中删除主线程的方法，并且正在 https://bugs.chromium.org/p/chromium/issues/detail?id=443374

进行跟踪

了解 Chrome 中 Service Worker 缓存文件的时间统计

Understanding time stats in Chrome for Service Worker cached files

javascript

service-worker