控制台执行是当场响应，script标签执行是按文档顺序排队；前者依赖当前内存状态、不等待页面加载，后者由HTML解析流程触发、遇script即暂停解析。

控制台执行是“当场响应”，script标签执行是“按文档顺序排队”。这个时间差不是快慢问题，而是触发时机的根本不同——一个靠人工敲击，一个靠HTML解析流程。

控制台：你敲完就跑，不等页面

你在控制台输入 document.title，哪怕页面还在加载图片、字体甚至JS文件，只要DOM树已有标题节点，立刻返回结果。它不关心HTML是否解析完，也不管其他脚本有没有加载，只依赖当前内存中已有的页面状态。

常见体现：

• 输入 document.querySelector("button")，若按钮还没渲染出来，结果是 null；一刷新再试，按钮出现了，就立刻拿到元素
• 输入 2 + 2，不用回车就能看到 4（启用 eager evaluation 时），说明它是纯计算环境，和页面生命周期解耦
• 右键“检查”→ Esc 呼出 Console → 直接运行操作 DOM 的代码，全程不刷新页面，也不影响 HTML 解析进度

script 标签：嵌在哪，就在哪卡一下

<script> 标签的位置直接决定它何时中断 HTML 解析、何时执行。浏览器从上到下读 HTML，遇到 <script> 就暂停解析，先下载（如果是外部）、编译、执行，再继续往下。

对比三种写法，效果一目了然：

• <head><script>alert(1)</script></head>：页面白屏，弹窗出现后才开始渲染 body 内容
• <body><p>文字</p><script>alert(2)</script></body>：“文字”已显示在屏幕上，再弹窗
• <body><script src="slow.js" defer></script><p>文字</p></body>：“文字”先显示，等整个 HTML 解析完才执行 slow.js

用一个现场小实验直观对比

新建一个空白 HTML 文件，复制粘贴以下内容，用浏览器打开：

javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

<!doctype html>
<html>
<body>
  <p id="log">日志：</p>
  <script>document.getElementById("log").textContent += "【script执行】";</script>
</body>
</html>

打开后你会看到：日志：【script执行】

接着，不刷新页面，打开控制台（Ctrl+Shift+J），输入：

document.getElementById("log").textContent += "【控制台执行】";

回车后，文字立刻变成：日志：【script执行】【控制台执行】

关键点：第一段文字是 HTML 解析到那一行时“自动触发”的；第二段是你手动敲出来的，发生在 script 执行完成后的任意时刻——哪怕页面早已渲染完毕、用户都开始滚动了，它依然能立即生效。

为什么初学者容易混淆？

因为两者都能操作 DOM、都能调用函数、看起来输出差不多。但本质区别在于：

• 控制台代码没有“插入点”，它永远在最后执行，且只执行一次（除非你重复敲）
• script 标签有明确的“插入点”，它的执行时机被 HTML 结构牢牢锁定，还可能被 defer、async 或网络延迟进一步推迟
• 控制台可以读取 script 已创建的变量，但 script 无法访问控制台临时定义的变量（作用域隔离）