google-chrome - Service Worker 响应时间慢

Question

在 Windows 和 Android 谷歌 Chrome 浏览器中，(其他人尚未测试)响应时间来自 服务人员 线性增加存储在该特定 中的项目数缓存存储 当您使用 Cache.match()具有以下选项的功能；

ignoreSearch = true

在多个缓存中划分项目有帮助，但这样做并不总是很方便。此外，即使是少量增加存储的项目也会对响应时间产生很大影响。根据我的测量，缓存中的项目数量每增加十倍，响应时间大约增加一倍。

Answer 1

官方回复我的question in chromium issue tracker表明该问题是 Chrome 中缓存存储实现的已知性能问题，仅在您使用 Cache.match() 时才会发生。与 ignoreSearch参数设置为 true .

如您所知 ignoreSearch用于在将请求与缓存中的响应进行匹配时忽略 URL 中的查询参数。 Quote from MDN :

...whether to ignore the query string in the url. For example, if set to true the ?value=bar part of http://foo.com/?value=bar would be ignored when performing a match.

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

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

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