link 标签与 script 标签的知识回炉

基础不扎实引起的知识回炉

今天扒拉一段线上代码的时候发现一个脚本是 link 标签引入，因此便没多想，直接引用到自己的工程中，一通命令行操作准备验证完提交到远程的时候，脚本不工作了。what？？？

潜意识告诉我，脚本不都是下载下来自动执行的吗？

后来换成 script 标签发现竟然是可以的，一些log也都出来了。

这里面究竟是什么在作妖，一顿 google，发现 Stack Overflow 上已经有了答案。

Difference between script and link as="script" tags

原来，link 中的 rel 属性仅仅标识的是当前 href 的文档与当前文档之间的联系，可能会有 stylesheet, 这是我们经常用到的一个值，另外还有经常遇到的 preload， 被用于预加载。因此当我的页面用的 link preload 去加载一个 script 的时候，本质仅仅是提前进行了网络下载，被下载的 script 并没有被加载到 html 中运行。

标准中对 rel 的解释：

rel Attribute:

This attribute names a relationship of the linked document to the current document. The attribute must be a space-separated list of the link types values. The most common use of this attribute is to specify a link to an external style sheet: the rel attribute is set to stylesheet, and the href attribute is set to the URL of an external style sheet to format the page. WebTV also supports the use of the value next for rel to preload the next page in a document series.

事实已经很清晰了。

• <link rel="preload" href="xxx" as="script">

  仅仅用于资源的一些预下载，下载完后不会被加载执行

• <script src="xxx"></script>

  资源会被下载，并被加载执行

参考链接

1. https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload
2. https://stackoverflow.com/questions/51105967/difference-between-script-and-link-as-script-tags
3. https://stackoverflow.com/questions/12178429/whats-the-difference-between-using-link-and-script-tag-to-reference-javascript