Question

我在Google Workbox documentation中偶然发现了这个片段：

<script>
// Check that service workers are registered
if ('serviceWorker' in navigator) {
  // Use the window load event to keep the page load performant
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js');
  });
}
</script>

在没有窗口load事件处理程序的情况下，页面加载的性能如何降低？

由于PWA的主要用途之一是缓存，因此服务工作者通常不应该更早地挂机吗？

Answer 1

服务人员在后台从主线程中进行加载，但是他们仍然会消耗计算机资源，如果要进行预缓存，还会消耗网络资源。如果当前渲染页面需要500KB渲染时间，并且您要预缓存该页面以使其完全脱机工作，则服务工作者还必须下载该500KB。这样可以与当前呈现的页面竞争，因此建议延迟注册服务工作者，直到为用户准备好当前页面为止。

您可以在web fundamentals上阅读有关注册服务工作者的更多信息。

Answer 2

不是通过加载事件侦听器进行阻止。

您仍然需要加载所有资源，然后服务人员将它们存储在浏览器中。

下一次用户访问应用程序时，服务工作人员已经在那里。准备从浏览器的缓存中传递资源。

服务工作者未在主线程上运行。

Answer 3

请注意，服务工作者不只是将某些JS文件作为您的Web应用程序的一部分进行下载。它也是browser implementation as an API。 Web应用程序中的SW JS代码将与浏览器的SW实施进行对话，以缓存在加载SW JS文件之前/之后加载的文件。对于SW的缓存能力，按什么顺序加载哪个文件的顺序或时间并不重要。

这就是原因，即使您的Web应用程序兼容PWA，不支持软件的浏览器也不会缓存。

等待窗口加载事件以注册服务人员

3 个答案: