一文搞懂 script 标签
💡
原文中文，约5200字，阅读约需13分钟。
📝
内容提要
本期教程介绍了 HTML 中 <script> 标签的基本功能和用法，包括内联、外置和动态引入三种方式。还涵盖了加载方式（async & defer）、模块化使用以及安全机制（integrity、nonce、referrerPolicy 和 crossorigin）。此外，还介绍了一些其他属性，如 language 和 charset。
🎯
关键要点
- 本期教程介绍了 HTML 中 <script> 标签的基本功能和用法。
- 引入 JS 的方式主要有三种：内联、外置和动态引入。
- 内联方式是将 JS 代码直接写在 <script> 标签内。
- 外置脚本通过 src 属性引入外部 URL 或 JS 文件。
- script 标签可以放置在 HTML 任意位置，执行顺序基本上由上至下。
- 动态引入可以在 JS 代码中动态添加 script 标签。
- 加载方式包括 async（异步加载）和 defer（延迟加载）。
- defer 属性将脚本执行放到文档解析完成后，多个 defer 脚本按出现顺序执行。
- async 属性允许脚本的网络请求并行于 HTML 页面解析，尽快执行脚本。
- 模块化使用通过 type 属性指定脚本的 MIME 类型，支持 ES6 模块功能。
- nomodule 属性用于兼容不支持模块的老版本浏览器。
- 安全机制包括 integrity、nonce、referrerPolicy 和 crossorigin 属性。
- integrity 属性用于检验加载的 JS 文件是否完整，防止篡改。
- nonce 属性与 Content-Security-Policy 配合使用，确保脚本的安全性。
- referrerPolicy 属性与 HTTP 头里的 Referer 配合使用，控制引荐人信息。
- crossorigin 属性配置 CORS 请求，控制跨域资源的加载。
- onload 和 onerror 属性用于动态引入时处理加载成功或失败的事件。
- language 和 charset 属性已过时，不再推荐使用。
➡️
