如果你问我，前端世界里最容易被低估、但权力又最大的标签是谁？
我会毫不犹豫地告诉你：不是 <div>，不是 <span>，而是 <script>。
因为没有它，HTML 就像一张“死去的地图”，CSS 也只是“漂亮的外壳”。而 <script>，就是那个能让页面活过来的信使。
今天我想给你讲一个故事。一个发生在“网页王国”里的故事。
script元素：网页王国里的信使在很久很久以前（也就是你打开一个网页的那一瞬间），浏览器会进入一个叫网页王国的地方。这里有：
HTML 城市：负责地皮和房屋结构
CSS 装修队：负责颜色、大小、排版
JavaScript 军团：负责逻辑、交互、灵魂
而 <script>，就是 JavaScript 军团唯一被允许进入 HTML 城市的通行证。
你把 JavaScript 写在哪里不重要：只要它被 <script> 包裹，浏览器就会认真对待。
所以从本质上来说：
<script> 是 HTML 用来引入或执行脚本代码的容器
你可以把它理解为：“敲门的人”。
script的 8 个属性：信使的装备清单信使不是空手来的。它身上带着一整套“装备”，一共 8 个属性，每一个都决定了脚本的行为方式。
我们先来一张“装备表”的感觉。
1、src：信使从哪里来
这是最常用的属性。
含义很简单：
“别执行我肚子里的内容了，去这个地址把脚本拿过来。”
一旦 src 出现：
<script> 标签内部的代码会被忽略
浏览器会发起一个网络请求
你可以把 src 理解成：“快递单号”
2、type：信件写的是什么语言
在很久以前，我们会看到这样的写法：
但在 HTML5 时代：
默认就是 text/javascript
完全可以省略
现在它更多出现在：
type="module"
或非 JS 脚本（很少见了）
3、async：信使自由行动
这个属性后面我们会重点讲，但先记一句话：async = 我来了就执行，不等别人
4、defer：信使等开会结束再说
和 async 对应：defer = 你慢慢来，文档解析完你再上
5、charset：信件的编码方式
现代浏览器基本都用 UTF-8，这个属性已经很少需要。
6、crossorigin：跨国信件检查
当你加载的是 CDN 脚本时，它会出现。
主要用于：
CORS
错误堆栈的完整性
7、integrity：防篡改印章
含义是：“如果脚本的哈希和我记的不一样，那就别执行。”
安全感直接拉满。
8、nomodule：只给老古董浏览器看
用于 type="module" 的补充：
现代浏览器用模块，老浏览器用旧方案。
标签位置：信使站在哪里最合适？这是一个经典到不能再经典的面试题。
1、放在 <head> 里
问题来了：
HTML 解析遇到 <script>
停下来
加载
执行
再继续解析
结果是什么？页面白屏时间变长
2、放在 <body> 最后
这就像：装修完房子，再装智能系统
页面先展示，再执行脚本，用户体验明显更好。
结论
早期：靠位置优化
现代：靠 defer / async
假设你在公司开会。
老板在讲战略
PPT 在播放
你在角落记笔记
这时候有个同事冲进来大喊：“我有个 JS 要执行！”
显然不合适。于是有了 defer。
defer 的规则很清晰：
脚本会并行下载
不阻塞 HTML 解析
等 DOM 解析完成后再执行
按顺序执行
适合：
操作 DOM
多个脚本有依赖关系
异步执行脚本：async 的自由人如果说 defer 是守纪律的员工，那 async 就是：“我效率高，我说了算”
async 的行为：
并行下载
下载完立即执行
不管 DOM
多个脚本执行顺序不可控
适合：
埋点
广告
统计
与页面逻辑无关的脚本
一句话总结：async = 快且乱，defer = 慢但稳
有些脚本，不适合一开始就加载。比如：
视频播放器
富文本编辑器
地图 SDK
这时候你会用动态加载。
这相当于：“我现在饿了，才点外卖”
动态加载的特点：
完全由 JS 控制
执行时机灵活
常用于懒加载
在现代工程化中，这几乎是常态操作。
XHTML 中的变化：古老王国的礼仪如果你接触过 XHTML，你会发现它特别严格。例如：
标签必须闭合
属性必须有值
大写小写
在 XHTML 中：
这一堆 CDATA，一度把无数前端人送走。
好消息是：
HTML5 已经完全不需要操心这些
XHTML 基本退出历史舞台
技术在进化，一些写法已经被淘汰。
1. language="javascript"
早已废弃。
2. 内联事件脚本泛滥
还能用，但不推荐。
3. 同步阻塞式加载所有脚本
在 head 里堆一堆 <script>，不考虑性能，在今天已经属于“反模式”。
很多新手会觉得：<script> 就是“写 JS 的地方”，但随着你做的项目越来越复杂，你会发现：
它决定了页面加载性能
它影响首屏时间
它关系到安全
它是工程化的入口
如果 HTML 是“骨架”，CSS 是“皮肤”，那 <script> 就是：“神经系统”
它一旦设计不好，整个页面都会“反应迟钝”。
END如果你喜欢这种用讲故事的方式聊前端底层知识的文章，欢迎点个在看，我们下次继续聊点更有意思的。