JavaScript 王国的“信使”：一个关于 script 标签的故事

所以从本质上来说：

你可以把它理解为： “敲门的人” 。

script的 8 个属性：信使的装备清单

信使不是空手来的。它身上带着一整套“装备”，一共 8 个属性，每一个都决定了脚本的行为方式。

我们先来一张“装备表”的感觉。

1、src：信使从哪里来

这是最常用的属性。

含义很简单：

“别执行我肚子里的内容了，去这个地址把脚本拿过来。”

一旦 src 出现：

• 浏览器会发起一个网络请求

你可以把 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、放在 里

问题来了：

• HTML 解析遇到
• 停下来
• 加载
• 执行
• 再继续解析

结果是什么？页面白屏时间变长

2、放在 最后

这就像：装修完房子，再装智能系统

页面先展示，再执行脚本，用户体验明显更好。

结论

• 早期：靠位置优化
• 现代：靠 defer / async

推迟执行脚本：defer 的故事

假设你在公司开会。

• 老板在讲战略
• PPT 在播放
• 你在角落记笔记

这时候有个同事冲进来大喊：“我有个 JS 要执行！”

显然不合适。于是有了 defer。

defer 的规则很清晰：

1. 脚本会并行下载
2. 不阻塞 HTML 解析
3. 等 DOM 解析完成后再执行
4. 按顺序执行

适合：

• 操作 DOM
• 多个脚本有依赖关系

异步执行脚本：async 的自由人

如果说 defer 是守纪律的员工，那 async 就是： “我效率高，我说了算”

async 的行为：

1. 并行下载
2. 下载完立即执行
3. 不管 DOM
4. 多个脚本执行顺序不可控

适合：

• 埋点
• 广告
• 统计
• 与页面逻辑无关的脚本

一句话总结：async = 快且乱，defer = 慢但稳

动态加载脚本：叫外卖式的 JS

有些脚本，不适合一开始就加载。比如：

• 视频播放器
• 富文本编辑器
• 地图 SDK

这时候你会用动态加载。

这相当于： “我现在饿了，才点外卖”

动态加载的特点：

• 完全由 JS 控制
• 执行时机灵活
• 常用于懒加载

在现代工程化中，这几乎是常态操作。

XHTML 中的变化：古老王国的礼仪

如果你接触过 XHTML，你会发现它特别严格。例如：

• 标签必须闭合
• 属性必须有值
• 大写小写

在 XHTML 中：

这一堆 CDATA，一度把无数前端人送走。

好消息是：

• HTML5 已经完全不需要操心这些
• XHTML 基本退出历史舞台

废弃的语法：时代的眼泪

技术在进化，一些写法已经被淘汰。

1. language="javascript"

早已废弃。

2. 内联事件脚本泛滥

还能用，但不推荐。

3. 同步阻塞式加载所有脚本

在 head 里堆一堆

总结：script不只是一个标签

很多新手会觉得：

• 它决定了页面加载性能
• 它影响首屏时间
• 它关系到安全
• 它是工程化的入口

如果 HTML 是“骨架”，CSS 是“皮肤”，那

它一旦设计不好，整个页面都会“反应迟钝”。

END

我是小米，一个喜欢分享技术的31岁程序员。如果你喜欢我的文章，欢迎关注我的微信公众号“软件求生”，获取更多技术干货！

如果你喜欢这种用讲故事的方式聊前端底层知识的文章，欢迎点个在看，我们下次继续聊点更有意思的。