我创建了一个测试页面crenshaw.dev/demo/hints.html http://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>
But 根据网页测试 https://www.webpagetest.org/result/190404_GN_22e5f44350231bcee5b6d59c03c2ba22/1/details/#waterfall_view_step1，直到 index.html 完全加载后才会连接到 mac9416.com。
为什么 Chrome 没有立即连接到 mac9416.com<head>已解析？
UPDATE:
根据接受的答案和评论，我wrote up https://crenshaw.dev/preconnect-resource-hint-crossorigin-attribute修复的解释。
The crossorigin属性，当与rel="preconnect", 没有描述目标原点是反而将从该来源下载什么类型的资产。如果资产使用 CORS，crossorigin是需要的。如果不使用 CORS，crossorigin应省略。如果两种类型的资产都存在，则需要两个资源提示。
只需删除名称不好的即可跨域参数，它将起作用。
<link rel="preconnect" href="https://mac9416.com">
此参数不会告诉浏览器该域是外部的（它已经知道这一点）。它告诉浏览器预先打开一个特殊的“CORS”连接，字体或 XHR 请求需要该连接，但脚本、样式表或图像不需要该连接。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
