“script”和“link as='script'”标签有什么区别？

Question

除了标准的脚本加载方法外:

<script src="js/script.js"></script>

我看过人们这样做：

<link href="js/script.js" as="script"> 

有什么区别吗？

---

注意：还有一个类似的问题“使用链接和脚本标签引用JavaScript源之间有什么区别？”

，但是它是关于<link href="script.js" type="text/javascript" />的，与本问题不同。

- leonheess

---

使用<link>标签和<script>标签引用JavaScript有什么区别吗？在HTML页面中，通常使用<link>标签来引用CSS文件，而使用<script>标签来引用JavaScript文件。但是，<script>标签也可以用于引用CSS文件，而<link>标签也可以用于引用JavaScript文件。一个重要的区别是，当浏览器遇到<link>标签时，它会同时下载并行解析HTML和CSS文件。这意味着CSS文件能够更早地加载和渲染，从而改善页面性能和用户体验。与此相反，当浏览器遇到<script>标签时，它必须停止解析HTML并开始下载并执行JavaScript文件。这可能会导致页面的延迟和性能问题。为了缓解这个问题，可以将<script>标签放置在HTML文档底部，以便所有其他内容都能够先加载和渲染。总的来说，<link>标签适用于CSS文件，<script>标签适用于JavaScript文件。但是，在特定情况下，两者都可以工作。 - UnpassableWizard

@Rustyjim 我也发现了这个问题，但这是一个旧问题，当时的正确解决方案是链接不能用于加载 JavaScript，但现在似乎不再是这种情况了。 - leonheess

我也发现这个链接可能会有帮助：https://w3c.github.io/preload/#link-element-extensions :) - UnpassableWizard

Answer 1

如果那个 link 标签上有 rel="preload"（或者rel="modulepreload"）的话，它将表示一个预加载请求，该请求会预加载但不运行脚本。相比之下，script 加载并运行脚本。但是没有rel，那个 link 标签就无效，没有任何有用的效果（至少在规范方面）。如果你在规范中查找 link ，你会看到 as 被列为：

as - 预加载请求的潜在目标（对于rel="preload"和rel="modulepreload"）

跟着链接到 as 属性，它说：

as属性指定了通过href属性给定的资源的预加载请求的潜在目标。它是一个枚举属性。每个潜在的目标都是该属性的关键字，映射到相同名称的状态。该属性必须在具有包含preload关键字的rel属性的link元素上指定。它可以在具有包含modulepreload关键字的rel属性的link元素上指定；在这种情况下，它必须具有类似脚本的目标值。对于其他link元素，不能指定该属性。

- T.J. Crowder