Question

在Windows和Android Google Chrome浏览器中，（尚未对其他人进行测试）来自服务工作者的响应时间线性增加到存储在该特定缓存存储中的项目数使用Cache.match()函数时使用以下选项;

ignoreSearch = true

在多个缓存中划分项目有助于但并非总是方便。此外，即使存储的项目少量增加也会使响应时间产生很大差异。根据我的测量结果，缓存中项目数量每增加十倍，响应时间大约翻倍。

Answer 1

我的question in chromium issue tracker的正式回答显示，问题是Chrome中缓存存储实施的已知性能问题，只有在Cache.match() ignoreSearch参数设置为{{1 }}

您可能知道true用于忽略URL中的查询参数，同时将请求与缓存中的响应进行匹配。 Quote from MDN：

...是否忽略url中的查询字符串。例如，如果设置为如果http://foo.com/?value=bar的？value = bar部分将被忽略在进行比赛时。

由于停止使用查询参数匹配并不是很方便，我已经提出了以下解决方法，我在这里发布它希望能为某人节省时间;

ignoreSearch

这很有效，因为它可以正确地处理每个请求一个查询参数，同时仍能以闪电般的速度处理其他请求。而且您不必在应用程序中更改任何其他内容。

Answer 2

我遇到了同样的问题，之前的方法导致了一些应该为 ignoreSearch:false 的请求错误。一个对我有用的简单方法是通过使用 url.contains('A') && 简单地将 ignoreSearch:true 应用到某些请求......见下面的例子：

    self.addEventListener("fetch", function(event) {
         
      var ignore
    
      if(event.request.url.includes('A') && event.request.url.includes('B') && event.request.url.includes('C')){
        ignore = true
      }else{
        ignore = false
      }
      event.respondWith(
        caches.match(event.request,{
            ignoreSearch:ignore, 
          })
          .then(function(cached) {
            ...
           }

Answer 3

根据guy in that bug report，问题与缓存中的项目数量有关。我提出了一个解决方案并将其发挥到极致，为每个资源提供了自己的缓存：

var cachedUrls = [
    /* CACHE INJECT FROM GULP */
];

//update the cache
//don't worry StackOverflow, I call this only when the site tells the SW to update
function fetchCache() {
    return Promise.all(
        //for all urls
        cachedUrls.map(function(url) {
            //add a cache
            return caches.open('resource:'url).then(function(cache) {
                //add the url
                return cache.add(url);
            });
        });
    );
}

在我们这里的项目中，有一些静态资源配置了高缓存到期集，我们使用查询参数（存储库修订号，注入到html中）仅作为管理[浏览器]缓存的方法。 /> 使用您的解决方案有选择地使用ignoreSearch并不是真的有效，因为我们必须将它用于所有静态资源，以便我们可以获得缓存命中！

但是，我不仅不喜欢这个黑客，而且仍然表现得非常慢。

好的，所以，鉴于它只是ignoreSearch所需的一组特定资源，我决定采用不同的路线;
只需手动删除网址请求中的参数，而不是依赖ignoreSearch。

self.addEventListener('fetch', function(event) {
    //find urls that only have numbers as parameters
    //yours will obviously differ, my queries to ignore were just repo revisions
    var shaved = event.request.url.match(/^([^?]*)[?]\d+$/);
    //extract the url without the query
    shaved = shaved && shaved[1];

    event.respondWith(
        //try to get the url from the cache.
        //if this is a resource, use the shaved url,
        //otherwise use the original request
        //(I assume it [can] contain post-data and stuff)
        caches.match(shaved || event.request).then(function(response) {
            //respond
            return response || fetch(event.request);
        })
    );
});

服务工作者响应时间慢

3 个答案: