javascript - 是否可以同时使用 preconnect 和 preload rel 属性？

Question

想象一下，您有一个提供文档的 Web 服务器和一个提供所有文档的 js 组件块的 cdn：

有 1 个重要的块 main.js 具有预加载链接 rel。

问题：是否可以在 1 个链接标签上进行预连接和预加载 rel？

今天是：

<link rel="preload" href="https://d3i4yxtzktqr9n.cdn.net/main.js" crossorigin="anonymous" as="script">

我想做：

<link rel="preconnect preload" href="https://d3i4yxtzktqr9n.cdn.net/main.js" crossorigin="anonymous" as="script">

瀑布

标签： javascriptcssperformancelighthousepreconnect

Answer 1

根据我对https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preconnect的理解，preconnect 用于您想要为未来步骤做准备的资源，并在您实际想要时减少处理时间访问资源

例如，在用户正忙于输入用户信息的注册表单上，您已经可以预先连接以建立与某些身份验证服务的连接。

而预加载是针对具有高优先级的所需资源，如字体或样式表，您需要快速。

由于 Internet Explorer 无法处理预连接，因此从技术上讲，您可以使用 preload 作为替代指令。但由于它们有不同的用例，可能不建议这样做，并且预加载具有更高的优先级