是否可以同时使用 preconnect 和 preload rel 属性？答案

【问题标题】：Is it possible to use preconnect and preload rel attributes together?是否可以同时使用 preconnect 和 preload rel 属性？
【发布时间】：2021-07-29 08:19:14
【问题描述】：

假设您有一个提供文档的 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">

Waterfall

【问题讨论】：

我认为你可以，这可能相当于拥有<link rel="preconnect" href="https://d3i4yxtzktqr9n.cdn.net/" crossorigin><link rel="preload" href="https://d3i4yxtzktqr9n.cdn.net/main.js" as="script" crossorigin>。但是，预加载本身应该负责预连接步骤，所以我不确定你会赢多少。

标签： javascript css performance lighthouse preconnect

【解决方案1】：

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

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

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

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

【讨论】：

dns-prefetch 是 IE 支持的最接近 preconnect 的等价物，我不认为 preload 是。
@Kaiido 是的，你是对的。我只提到了使用预连接和预加载的描述案例，其中 IE 无法处理预连接，因此查看下一个给定指令 preload