为什么预连接资源提示不起作用？
Mic*_*haw 2 html web-performance preconnect
我在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>
但是根据 WebPageTest，直到 index.html 完全加载后才会连接到 mac9416.com。
为什么 Chrome 在<head>解析后没有立即连接到 mac9416.com ？
更新：
根据接受的答案和评论，我写了一个修复的解释。
crossorigin与 一起使用时rel="preconnect"，该属性不描述目标来源的位置，而是描述将从该来源下载的资产类型。如果资产使用 CORS，crossorigin则需要。如果不使用 CORS，crossorigin则应省略。如果两种类型的资产都存在，则需要两个资源提示。
只需删除名称错误的 crossorigin参数，它就会起作用。
<link rel="preconnect" href="https://mac9416.com">
这个参数不会告诉浏览器域是外部的（它已经知道了）。它告诉浏览器预先打开一个特殊的“CORS”连接，这是字体或 XHR 请求所需要的，而不是脚本、样式表或图像所需要的。
- 脚本不使用 CORS。CORS 连接的预连接也是如此，然后请求使用单独连接的非 CORS 资产类型。如果它是字体请求或 XHR 请求，那么它也应该使用您预先连接的 CORS 连接。另见 https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#What_requests_use_CORS (3认同)