Javascript 正在等待窗口加载事件以注册服务工作进程

我无意中发现了这个片段：

//检查服务人员是否已注册
if（导航器中的“serviceWorker”）{
//使用窗口加载事件保持页面加载性能
window.addEventListener（'load'，（）=>{
register（'/sw.js'）；
});
}

如果没有窗口

load

事件处理程序，页面加载的性能究竟如何降低

---

既然PWA中的一个主要用途是缓存，那么服务工作者是否应该尽早连接起来呢

并不是使用load event listener进行阻塞

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

下次用户访问应用程序时，服务人员已经在那里了。准备好从浏览器缓存中交付资源

---

service worker没有与主线程一起运行。

请参阅，service worker不仅仅是作为web应用程序的一部分下载的一些JS文件。这也是一个问题。web应用程序中的SW JS代码将与浏览器的SW实现对话，以缓存加载SW JS文件之前/之后加载的文件。就软件的缓存能力而言，按什么顺序加载文件的顺序或时间并不重要

---

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

服务人员在后台从主线程加载，但他们仍然消耗计算机资源，如果是预缓存，还消耗网络资源。如果当前呈现页面需要500KB才能呈现，并且您希望预缓存该页面以完全脱机工作，则服务人员还必须下载该500KB。这与呈现的当前页面竞争，因此建议延迟注册服务工作人员，直到当前页面为用户准备就绪

---

您可以在上阅读有关注册服务人员的更多信息。

请澄清您的意思。并不是用load event listener进行阻塞。-为什么它会被阻塞？正如您已经提到的，SW在另一个线程中运行。无论如何，您都需要加载所有资源，然后服务人员将它们存储在浏览器中-但是，如果在加载页面之前软件没有启动，则在第一次访问之后，只有在第二次访问之后，软件才会存储它们。当然，安装部分是在主线程中进行的。在软件激活时，服务工作者开始自己缓存所有必需的资产。第二次访问时，他们可以通过浏览器（离线）获得服务。但这也可能取决于您如何存储要缓存的文件：使用fetch event listener，一旦获取文件，它们就会被存储，这可能会发生在第二次访问时……谢谢，谷歌自己对用户第一次访问的解释在上下文中是有意义的。考虑把答案加上答案。

<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>