为什么预连接资源提示不起作用？

Question

我在 crenshaw.dev/demo/hints.html 创建了一个测试页面，浏览器提示请求 dns-prefetch 并预连接到 mac9416.com。

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <title>Test resource hints</title>
        <link rel="dns-prefetch" href="//mac9416.com">
        <link rel="preconnect" href="https://mac9416.com" crossorigin>
    </head>
    <body>
        Lorem ipsum dolor sit amet,
        <!-- a bunch more to delay page loading -->
        Duis dignissim gravida commodo.

        <script src="https://mac9416.com/blah.js"></script>
    </body>
</html>

但是 according to WebPageTest，直到 index.html 完全加载后才会连接到 mac9416.com。

为什么 Chrome 在解析 <head> 后没有立即连接到 mac9416.com？

更新：

根据接受的答案和评论，我 wrote up 对修复的解释。

The crossorigin attribute, when used with rel="preconnect", doesn't describe where the target origin is but rather what kind of assets will be downloaded from that origin. If the assets use CORS, crossorigin is needed. If CORS won't be used, crossorigin should be omitted. If both types of assets will be present, two resource hints are necessary.

Answer 1

只需删除命名错误的 crossorigin 参数即可。

<link rel="preconnect" href="https://mac9416.com">

此参数不会告诉浏览器该域是外部域（它已经知道）。它告诉浏览器预先打开一个特殊的 "CORS" 连接，字体或 XHR 请求需要它，但脚本、样式表或图像不需要。

为什么预连接资源提示不起作用？

Why is preconnect resource hint not working?

html

web-performance

preconnect