我在 crenshaw.dev/demo/hints.html 创建了一个测试页面浏览器提示请求 dns 预取并预连接到 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
crossoriginattribute, when used withrel="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,crossoriginis needed. If CORS won't be used,crossoriginshould be omitted. If both types of assets will be present, two resource hints are necessary.
最佳答案
只需删除命名错误的 crossorigin 参数即可。
<link rel="preconnect" href="https://mac9416.com">
此参数不会告诉浏览器该域是外部域(它已经知道)。它告诉浏览器预先打开一个特殊的“CORS”连接，字体或 XHR 请求需要它，但脚本、样式表或图像不需要。
关于html - 为什么预连接资源提示不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55520102/