Javascript 了解Chrome中Service Worker缓存文件的时间统计信息
我试图理解ChromeDevTools中的“网络”选项卡对来自Service Worker的缓存文件的指示 我看到控制台中记录了缓存命中(请参阅下面的service worker代码),但网络选项卡使其看起来像常规网络负载。230ms对于缓存命中来说似乎有点大。值通常会发生少量变化(下一次加载可能是217毫秒),所以它没有显示最初加载的时间,当它第一次被缓存时,正如我所想的那样 注册服务人员的代码如下Javascript 了解Chrome中Service Worker缓存文件的时间统计信息,javascript,service-worker,Javascript,Service Worker,我试图理解ChromeDevTools中的“网络”选项卡对来自Service Worker的缓存文件的指示 我看到控制台中记录了缓存命中(请参阅下面的service worker代码),但网络选项卡使其看起来像常规网络负载。230ms对于缓存命中来说似乎有点大。值通常会发生少量变化(下一次加载可能是217毫秒),所以它没有显示最初加载的时间,当它第一次被缓存时,正如我所想的那样 注册服务人员的代码如下 if ('serviceWorker' in navigator) { naviga
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');
});
这有一些关于如何解释服务人员参与网络面板条目的背景知识
您提供的屏幕截图显示了服务人员返回的响应,没有任何网络参与,因此它可能直接来自缓存。(如果您的屏幕截图中没有其他条目,旁边有一个小齿轮图标,那么情况就不同了。)
网络面板中显示的~200ms计时反映了发出请求的页面与获得响应的页面之间经过的总时间。当涉及服务人员时,如果页面的主线程正在执行其他任务,则发出请求和处理响应都可能会延迟。在您的示例中,我假设由于System.import()
调用,主线程正忙于评估和执行大量JavaScript,因此大约200毫秒的开销可能就是这个原因
Chromium团队正在评估从请求/响应关键路径中删除主线程的方法,并在进行跟踪。这有一些关于如何解释服务人员参与网络面板条目的背景知识
您提供的屏幕截图显示了服务人员返回的响应,没有任何网络参与,因此它可能直接来自缓存。(如果您的屏幕截图中没有其他条目,旁边有一个小齿轮图标,那么情况就不同了。)
网络面板中显示的~200ms计时反映了发出请求的页面与获得响应的页面之间经过的总时间。当涉及服务人员时,如果页面的主线程正在执行其他任务,则发出请求和处理响应都可能会延迟。在您的示例中,我假设由于System.import()
调用,主线程正忙于评估和执行大量JavaScript,因此大约200毫秒的开销可能就是这个原因
Chromium团队正在评估从请求/响应关键路径中删除主线程的方法,这一点正在被跟踪,非常感谢。我们很快会在这里仔细观察。非常感谢!啊-我看到了重复条目,带有齿轮图标,表示网络参与。更有意义!如果你愿意的话,我有一个丰厚的悬赏:非常好,非常感谢。我们很快会在这里仔细观察。非常感谢!啊-我看到了重复条目,带有齿轮图标,表示网络参与。更有意义!如果你愿意的话,我有一笔丰厚的悬赏: