rel="preload" 如何影响 window.onload？答案

【问题标题】：How does rel="preload" influences window.onload?rel="preload" 如何影响 window.onload？
【发布时间】：2021-07-22 17:36:10
【问题描述】：

rel="preload" 指令的使用如何影响 window.onload 事件？假设我有以下代码：

!DOCTYPE html>
<html>
<head>
  <script>
          window.onload = () => {
          console.log("page loaded")
          };
  </script>

  <link rel="preload" as="image" href="othersite.com/myimg.jpg" />
  <title>Website</title>
</head>

<body>
  <h1>Heading for the content below</h1>
  <p>Text text text</p>
  <img src="othersite.com/myimg.jpg" />
</body>

</html>

是否有可能在使用 rel=preload 调用的资源完全下载之前触发 onload 事件？所以这里控制台将在下载并显示图像 myimg.jpg 之前打印“页面加载”。

我在这里读到以下内容：https://www.programmersought.com/article/5145872680/

另外，preload不会阻塞windows的onload事件，除非对预加载资源的请求来自将阻止窗口加载。

我不确定它的实际含义。这是否意味着可以在使用 rel=preload 的资源完全下载之前触发 onload 事件？

【问题讨论】：

标签： javascript html window onload preload

【解决方案1】：

是否有可能在使用 rel=preload 调用的资源完全下载之前触发 onload 事件？

是的。 Preload 强制在不阻塞 window.onload() 的情况下发出优先级请求。所以是的，它可以被解雇earlier。

对于您的第二个问题，我认为问题在于措辞不当。我在网上又找到了一个类似的说法

最重要的是，preload 不会阻止窗口的 onload 事件，除非该资源也被阻止该事件的资源请求。

这大概是指这种情况：

假设您有一个 URL 字体资源。一个是使用 preload(non-blocking) 获取的，一个是从 CSS 样式表 <link> 获取的（没有任何 preload/prefetch 指令，所以阻塞） .如果您的 CSS 样式表位于字体 <link> 之上，那么在解析样式表时，它已经请求了字体 URL 并阻止了渲染。第二个带有预加载的<link> 在这里毫无意义。

【讨论】：

非常感谢！问题是我正在通过查看页面 onload 事件何时触发来衡量是否使用预加载的性能改进。这个可以吗？由于各种原因，我无法使用其他指标。
显然，如果您只关心页面加载，那么您可以检查此指标。不过，Onload 将比某些内容加载更早触发。我想您总是可以进行有无预加载速度测试。如果您可以使用，Google Lighthouse 会提供所有这些指标。需要指出的是，当浏览器发现预加载的内容较晚时，预加载确实会产生影响。 CSS 文件请求的字体只有在 CSS 文件下载后才会下载。您可以预加载它。 web.dev/preload-critical-assets