服务工作者响应时间慢

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

ignoreSearch = true

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

官方回答我在铬的问题跟踪问题表明,这个问题是与Chrome浏览器的缓存存储的实现,当你使用它只是发生在一个已知的性能问题Cache.match()与ignoreSearch参数设置true.

您可能知道ignoreSearch用于忽略URL中的查询参数,同时将请求与缓存中的响应进行匹配.来自MDN的报价:

...是否忽略url中的查询字符串.例如,如果设置为true,则执行匹配时将忽略http://foo.com/?value=bar的？value = bar部分.

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

// if the request has query parameters, `hasQuery` will be set to `true`
var hasQuery = event.request.url.indexOf('?') != -1;

event.respondWith(
    caches.match(event.request, {
        // ignore query section of the URL based on our variable
        ignoreSearch: hasQuery,
    })
    .then(function(response) {
        // handle the response
    })
);

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