很多人以为 script 标签只是用来写 JavaScript 代码的地方。这种理解没错，但并不完整。实际上，这个看似简单的标签背后隐藏着许多值得探索的细节。
脚本加载的两种方式：async 与 defer
浏览器解析 html 文档时，是从上到下一边解析一边渲染的。当遇到普通的 script 标签时，它会暂停解析，直到脚本下载并执行完成后才会继续。这就是为什么我们通常把脚本放在 body 底部的原因。
不过，async 和 defer 属性提供了更好的解决方案。
使用 defer 属性的脚本会异步下载，但会等到整个页面解析完成后，按照它们在文档中出现的顺序执行。这意味着它不会阻塞页面解析，又能保证执行顺序。
<scriptdefersrc="js/script1.js"></script>
<scriptdefersrc="js/script2.js"></script>async 属性的脚本也是异步下载，但它会在下载完成后立即执行，不保证执行顺序。这意味着如果多个脚本有依赖关系，使用 async 可能会导致错误。
<scriptasyncsrc="js/script1.js"></script>
<scriptasyncsrc="js/script2.js"></script>简单来说，defer 适合需要按顺序执行且不急于执行的脚本，而 async 适合独立且需要尽快执行的脚本，比如网站统计分析代码。
跨域脚本处理：crossorigin 属性
script 标签可以加载跨域资源，JSONP 技术就是利用了这个特性。但随着网络安全要求的提高，crossorigin 属性变得越来越重要。
设置 crossorigin 属性后，浏览器会启用 CORS（跨域资源共享）检查。如果服务器没有正确配置 CORS 响应头，浏览器会拒绝执行脚本。
<scriptsrc="https://fly63.com/script.js"crossorigin="anonymous"></script>crossorigin 有两个可选值：
anonymous：启用 CORS 但不发送凭据
use-credentials：启用 CORS 并发送凭据（如 cookies）
使用 crossorigin 的主要好处是：
配合 integrity 属性可以验证资源完整性，防止脚本被篡改
能够获取更详细的脚本错误信息
符合内容安全策略（CSP）的要求
模块化脚本：type="module"
现代浏览器已经支持 ES 模块，只需设置 type="module" 即可使用 import 和 export 语法。
<scripttype="module">
import { utils } from'./utils.js';
// 使用导入的模块
</script>使用模块化脚本有几个特点：
自动启用严格模式
支持顶级 await
默认具有 defer 的行为（异步加载不阻塞页面）
支持按需导入
对于需要导入映射的情况，可以使用 importmap：
<scripttype="importmap">
{
"imports": {
"vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
}
}
</script>这样在代码中就可以直接使用 import Vue from 'vue'，而不需要写完整的 URL。
安全增强：nonce 属性
除了上述属性，nonce 也是一个重要的安全特性。它通常与内容安全策略（CSP）一起使用，防止跨站脚本攻击（XSS）。
nonce 是一个随机生成的字符串，只有匹配 CSP 头中指定的 nonce 值的脚本才会被执行。
服务器端设置 CSP 头：
Content-Security-Policy: script-src 'nonce-abc123'HTML 中使用：
<scriptnonce="abc123">
// 只有 nonce 值匹配的脚本才会执行
</script>这种方式可以有效防止恶意脚本注入，提高网站安全性。
实际应用建议
对于主要功能脚本，优先使用 defer 而不是将脚本放在 body 底部
加载第三方资源时，总是使用 crossorigin 属性
在现代项目中，可以考虑使用 type="module" 利用浏览器原生模块支持
对于重要网站，实施 CSP 策略并使用 nonce 增强安全性
理解这些属性和它们的用途，不仅能优化页面加载性能，还能提高网站的安全性。虽然有些细节看起来复杂，但掌握它们对于前端开发者来说是非常有价值的。
学习更多技能
请点击下方公众号
