当前位置: 首页 > 知识库问答 >
问题:

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

经景辉
2023-03-14

我试图理解ChromeDevTools中的“网络”选项卡对来自Service Worker的缓存文件的指示。

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

注册服务人员的代码如下

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');
});

共有1个答案

须鸿祯
2023-03-14

前面的回答有一些关于如何解释服务工作人员参与网络面板中的条目的背景知识。

您提供的屏幕截图显示了服务人员返回的响应,没有任何网络参与,因此它可能直接来自缓存。(如果您的屏幕截图中没有其他条目,旁边有一个小齿轮图标,那么情况就不同了。)

网络面板中显示的~200ms计时反映了发出请求的页面与获得响应的页面之间经过的总时间。当涉及服务人员时,如果页面的主线程正在执行其他任务,则发出请求和处理响应都可能会延迟。在您的示例中,我假设主线程由于系统而忙于评估和执行大量JavaScript。import()调用,因此大约200毫秒的开销可能就是这个原因。

Chromium团队正在评估从请求/响应关键路径中删除主线程的方法,目前正在进行跟踪https://bugs.chromium.org/p/chromium/issues/detail?id=443374

 类似资料:
  • 主要内容:1、Master-Slave架构,2、异步日志持久化机制,3、检查点机制:定时持久化全量数据,4、引入检查点节点,5、总结 & 思考这篇文章,给大家来聊一个生产级的中间件系统的架构设计实践,希望给对中间件系统感兴趣的同学一点启发。 1、Master-Slave架构 这个中间件系统的本质是希望能够用分布式的方式来处理一些数据,但是具体的作用涉及到核心技术,所以这里不能直接说明。 但是他的核心思想,就是把数据分发到很多台机器上来处理,然后需要有一台机器来控制N多台机器的分布式处理,大概如下

  • 问题内容: 我正在尝试制定MySQL的SQL语句。我有一系列半小时报告的一系列服务器的统计信息。我有一个统计表,其列类似于以下内容: 现在,我想生成一系列报告,这些报告将在所有服务器上的1小时或1天的时间内对所有bytesIn和bytesOut进行整理。IE。我知道我需要SUM(bytesIn)作为bytesIn,SUM(bytesOut)作为bytesOut,但是不知道如何将所有时间“聚集”到每

  • 问题内容: 在基于Spring的设置中收集Hibernate / Ehcache统计信息并通过JMX公开它们似乎很容易。互联网上有很多资源可以提供帮助,例如http://snippets.dzone.com/posts/show/11159 但是,所有这些文章都假设有人正在使用某种Hibernate会话工厂。我不是- 我的实体带有JPA注释,并且使用。如果我要部署到Java EE容器,则可以通过J

  • 我调用服务器数据通过使用ajax在index.html.它是完美的获取这些数据。现在,我正在和服务人员一起工作。我可以缓存所有的静态资产(图像,js,css),并在Chrome开发工具的应用程序选项卡中的缓存存储中检查这些缓存的资产。我可以在网络选项卡中看到这些资产也被缓存(磁盘缓存)。 现在,我想使用ServiceWorker缓存这些ajax响应(图像文件数组)。在“网络”选项卡中,我可以看到它

  • 问题内容: 我是Laravel的新手。我已经对该主题进行了研究,但似乎找不到找到可以解决问题的答案。 我知道Laravel的默认缓存驱动程序设置为 file ,可以更改。它还有一些手工缓存命令,例如: 1) 即使Laravel具有一些自动处理某些缓存的内置命令和功能(无法确切了解哪些部分),我仍然必须在查询结果上手动使用Cache Facade,对吗? 它不会自动执行操作,仅在我想更改某些内容时才

  • 本文向大家介绍操作系统中缓冲与缓存之间的区别,包括了操作系统中缓冲与缓存之间的区别的使用技巧和注意事项,需要的朋友参考一下 在这篇文章中,我们将了解操作系统中缓冲和缓存之间的区别- 正在缓冲 它是主内存中的一个区域。 这意味着它与RAM(随机存取存储器)相关联。 缓冲区将数据的原始副本存储在内存中。 缓冲与发送方和接收方之间的数据流速度匹配。 快取 缓存将数据的原始副本存储在内存中。 缓存可以提高