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建立连接。

为什么<head>被解析后Chrome无法立即连接到mac9416.com？

更新：

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

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

Answer 1

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

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

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

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

1 个答案: