重新认识 script 标签：不只是写 JavaScript 那么简单

很多人以为 script 标签只是用来写 JavaScript 代码的地方。这种理解没错，但并不完整。实际上，这个看似简单的标签背后隐藏着许多值得探索的细节。

脚本加载的两种方式：async 与 defer

浏览器解析 html 文档时，是从上到下一边解析一边渲染的。当遇到普通的 script 标签时，它会暂停解析，直到脚本下载并执行完成后才会继续。这就是为什么我们通常把脚本放在 body 底部的原因。

不过，async 和 defer 属性提供了更好的解决方案。

使用 defer 属性的脚本会异步下载，但会等到整个页面解析完成后，按照它们在文档中出现的顺序执行。这意味着它不会阻塞页面解析，又能保证执行顺序。

<script defer src="js/script1.js"></script>
<script defer src="js/script2.js"></script>

async 属性的脚本也是异步下载，但它会在下载完成后立即执行，不保证执行顺序。这意味着如果多个脚本有依赖关系，使用 async 可能会导致错误。

<script async src="js/script1.js"></script>
<script async src="js/script2.js"></script>

简单来说，defer 适合需要按顺序执行且不急于执行的脚本，而 async 适合独立且需要尽快执行的脚本，比如网站统计分析代码。

script 标签可以加载跨域资源，JSONP 技术就是利用了这个特性。但随着网络安全要求的提高，crossorigin 属性变得越来越重要。

设置 crossorigin 属性后，浏览器会启用 CORS（跨域资源共享）检查。如果服务器没有正确配置 CORS 响应头，浏览器会拒绝执行脚本。

<script src="https://fly63.com/script.js" crossorigin="anonymous"></script>

crossorigin 有两个可选值：

使用 crossorigin 的主要好处是：

现代浏览器已经支持 ES 模块，只需设置 type="module" 即可使用 import 和 export 语法。

<script type="module">
  import { utils } from './utils.js';
  // 使用导入的模块
</script>

使用模块化脚本有几个特点：

对于需要导入映射的情况，可以使用 importmap：

<script type="importmap">
{
  "imports": {
    "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
  }
}
</script>

这样在代码中就可以直接使用 import Vue from 'vue'，而不需要写完整的 URL。

除了上述属性，nonce 也是一个重要的安全特性。它通常与内容安全策略（CSP）一起使用，防止跨站脚本攻击（XSS）。

nonce 是一个随机生成的字符串，只有匹配 CSP 头中指定的 nonce 值的脚本才会被执行。

服务器端设置 CSP 头：

Content-Security-Policy: script-src 'nonce-abc123'

HTML 中使用：

<script nonce="abc123">
  // 只有 nonce 值匹配的脚本才会执行
</script>

这种方式可以有效防止恶意脚本注入，提高网站安全性。

理解这些属性和它们的用途，不仅能优化页面加载性能，还能提高网站的安全性。虽然有些细节看起来复杂，但掌握它们对于前端开发者来说是非常有价值的。

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！