2

我在 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。

WebPageTest 瀑布图显示 mac9416.com 仅在下载并解析所有标记后才连接，而不是在解析 head 元素后立即连接

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

更新：

根据接受的答案和评论，我写了一个修复的解释。

与 一起使用时，该crossorigin属性rel="preconnect"不描述目标来源的位置，而是描述将从该来源下载的资产类型。如果资产使用 CORS，crossorigin则需要。如果不使用 CORS，crossorigin则应省略。如果两种类型的资产都存在，则需要两个资源提示。

4

1 回答 1

10

只需删除名称错误的crossorigin参数，它就会起作用。

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

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

于 2019-04-04T16:38:00.607 回答