引入 JavaScript 的三种核心方式
嗨，老铁！今天咱们聊聊 JavaScript 这玩意儿怎么往你的网页里加。别看这事儿简单，但搞明白了能帮你避免不少坑。其实啊，JavaScript 有三种主流引入方式，分别是：内联方式、内部脚本和外部脚本。别急，我给你掰扯清楚。
1. 内联方式：直接写在 HTML 里
这种方式最简单粗暴，直接把 JS 代码写在 HTML 标签里。适合啥情况呢？就适合那些临时、小范围的代码，比如一个按钮点击事件。代码长这样：
html
`
这种方式的优点是简单，代码自包含，不用单独文件。但缺点也明显：HTML 和 JS 没分开，违反了分离原则，以后维护起来跟一锅粥似的。所以啊，我强烈建议你别常用这种方式，除非真的临时凑合用一下。
2. 内部脚本：写在 HTML 文件里
这种方式是把 JS 代码放在 HTML 文件里，但用专门的标签来包裹。代码结构是这样：
html
`
这种方式的优点是：
- 代码跟 HTML 分开了，可读性更高
- 适合小项目或者临时测试
- 可以放在 HTML 文件开头或结尾
但要注意啊，这种方式的缺点是：
- 如果 JS 代码多，整个页面加载会变慢
- 多个 JS 文件会阻塞渲染，影响页面显示速度
举个例子，假设你有个登录按钮，可以这样写：
html
`
3. 外部脚本：单独的 JS 文件
这种方式是最推荐的，把 JS 代码单独放在一个 .js 文件里，然后在 HTML 里引用。比如你有个 script.js 文件，内容是：
javascript
function login() {
// 登录逻辑…
}
`
然后在 HTML 里这样引用：
html
`
这种方式的核心优势是：
- HTML 和 JS完全分离，维护方便
- 浏览器可以缓存JS 文件，重复访问快
- 多个页面可以共用同一个 JS 文件，减少代码重复
举个例子，像 Google、 这类大厂，他们的 JS 代码动不动就几百 KB，全靠外部脚本加载，不然页面早卡死了。
加载顺序详解：到底谁先谁后
搞懂了引入方式，接下来咱们聊聊加载顺序，这可是个关键点！简单来说，加载顺序决定了你的 JS 代码什么时候能用。记住这原则：
- HTML 文件会顺序解析，遇到
<script>标签会暂停解析，等 JS 载入执行完再继续 - 如果是内部脚本（写在 HTML 里），会同步加载，即加载完再解析 HTML
- 如果是外部脚本（通过
src引用），会异步加载，但执行时机取决于浏览器行为
举个例子，假设你的 HTML 文件这样写：
html
`
那么实际加载顺序是：
- 解析 HTML，遇到第一个内部脚本，暂停解析
- 执行第一个内部脚本，输出 ‘内部脚本1’
- 继续解析 HTML，遇到外部脚本
script2.js，暂停解析 - 浏览器去加载 script2.js，加载完再执行，假设输出 ‘script2’
- 继续解析 HTML，遇到第二个内部脚本，暂停解析
- 执行第二个内部脚本，输出 ‘内部脚本2’
所以最终控制台输出是：‘内部脚本1’、’script2’、’内部脚本2’。注意啊，外部脚本不是按顺序执行的，浏览器会加载完再执行，具体哪个先执行取决于浏览器行为。
三种方式的优缺点对比
为了让你更直观理解，我整理了一个对比表格：
| 方式 | 优点 | 缺点 |
|---|---|---|
| 内联方式 | 简单直接，临时用方便 | HTML/JS 不分离，维护困难 |
| 内部脚本 | 代码自包含，适合小项目 | 阻塞渲染，多个文件加载慢 |
| 外部脚本 | 分离维护方便，可缓存，提升性能 | 需要额外文件，依赖管理复杂 |
权威佐证：Google 开发者建议
关于 JS 加载优化，Google 开发者有专门的建议。他们指出，外部脚本是最优选择，特别是对于大项目。官方文档里提到：
简单来说，外部脚本能显著提升页面加载速度，特别是对于有大量 JS 代码的网站。所以啊，除非特殊情况，否则优先用外部脚本。
实战建议：最佳实践
- 对于核心功能的 JS，放在 HTML 文件底部，避免阻塞渲染
- 对于非核心功能（如轮播图、统计代码），用外部脚本，并设置
async或defer - 如果 JS 代码量大，考虑按需加载，即用户需要时再加载
- 使用
defer来保持代码执行顺序，特别重要！
举个例子，假设你有个电商网站，可以这样：
html
< HTML 结构 -->
`
这样的好处是：
- HTML 解析快，页面先显示
- JS 代码按需加载，不浪费资源
- 核心功能最后加载，确保用户体验
一下
引入 JS 有三种方式，各有优劣。关键是要理解加载顺序和性能影响。记住：外部脚本通常是最佳选择，特别是配合 defer 使用时。当然啦，具体怎么用还得看你项目情况，但这个框架能帮你避免不少坑。希望今天的分享对你有帮助！有啥问题随时问我哈。