控制台执行是当场响应，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></script> 标签的位置直接决定它何时中断 HTML 解析、何时执行。浏览器从上到下读 HTML，遇到 <script></script> 就暂停解析，先下载（如果是外部）、编译、执行，再继续往下。
对比三种写法，效果一目了然：
-
<script>alert(1)</script>：页面白屏，弹窗出现后才开始渲染 body 内容 -
<p>文字</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5980" title="javascript-pro"><img src="https://img.php.cn/upload/skill/000/000/081/179074807567238.jpg" alt="javascript-pro" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5980" title="javascript-pro" class="overflowclass">javascript-pro</a> <p class="overflowclass">专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发</p> </div> <a rel="nofollow" href="/xiazai/skill5980" title="javascript-pro" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <script>alert(2)</script>：“文字”已显示在屏幕上，再弹窗 -
<script src="slow.js" defer></script><p>文字</p>：“文字”先显示，等整个 HTML 解析完才执行 slow.js
用一个现场小实验直观对比
新建一个空白 HTML 文件，复制粘贴以下内容，用浏览器打开：
日志：
<script>document.getElementById("log").textContent += "【script执行】";</script>
打开后你会看到：日志：【script执行】
接着，不刷新页面，打开控制台（Ctrl+Shift+J），输入：
document.getElementById("log").textContent += "【控制台执行】";回车后，文字立刻变成：日志：【script执行】【控制台执行】
关键点：第一段文字是 HTML 解析到那一行时“自动触发”的；第二段是你手动敲出来的，发生在 script 执行完成后的任意时刻——哪怕页面早已渲染完毕、用户都开始滚动了，它依然能立即生效。
为什么初学者容易混淆？
因为两者都能操作 DOM、都能调用函数、看起来输出差不多。但本质区别在于：
- 控制台代码没有“插入点”，它永远在最后执行，且只执行一次（除非你重复敲）
- script 标签有明确的“插入点”，它的执行时机被 HTML 结构牢牢锁定，还可能被
defer、async或网络延迟进一步推迟 - 控制台可以读取 script 已创建的变量，但 script 无法访问控制台临时定义的变量（作用域隔离）
