顺序错乱导致referenceerror或undefined，因浏览器按html顺序逐块加载执行，块间不共享执行时机；var声明提升但赋值未完成时读取为undefined，let/const因tdz访问即报referenceerror，函数声明可跨块调用而函数表达式不可。
为什么<script>顺序错乱会导致ReferenceError或undefined</script>
浏览器按HTML中出现的顺序，逐个加载、解析、执行每个<script>块。每个块内部完成自己的变量提升（<code>var声明被提升，<code>let/<code>const不提升），但块与块之间**不共享执行时机**——前一个脚本没执行完，后一个脚本根本看不到它的赋值结果。</script></p> <ul> <li> <code>var a = 1</code>在第二个<script>里读取时为<code>undefined：说明它所在<script>已执行，但赋值语句还没跑完；若报<code>ReferenceError: a is not defined，则是该<script>压根没加载或位置在读取它的脚本之后</script> </li> <li> <code>let b = 2</code>哪怕写在最前面，后续<script>仍会报错：因为<code>let不提升，且存在暂时性死区（TDZ），访问即抛错</script> </li> <li> <code>function foo() {}</code>可跨块调用，但<code>var foo = function() {}</code>或<code>const foo = () => {}</code>不行——前者只提升变量名（值为<code>undefined</code>），后者完全不提升</li> </ul> <h3>DOM就绪前执行脚本导致document.getElementById返回null</h3> <p>脚本放在<code></code>里，浏览器一遇到就暂停HTML解析、立即执行，此时<code></code>和所有元素都还没生成，<code>document.getElementById</code>必然返回<code>null</code>。这不是代码bug，是加载流程决定的。</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5117" title="HTML Extract"><img src="https://img.php.cn/upload/skill/000/000/081/179033952939354.jpg" alt="HTML Extract" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5117" title="HTML Extract" class="overflowclass">HTML Extract</a> <p class="overflowclass">使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...</p> </div> <a rel="nofollow" href="/xiazai/skill5117" title="HTML Extract" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <ul> <li>别依赖“脚本很小所以能等到DOM”——规范就是“遇到就执行”，网络稍慢就失效</li> <li> <code>defer</code>只对带<code>src</code>的外部脚本有效，内联脚本必须用<code>document.addEventListener('DOMContentLoaded', () => { ... })</code>包裹</li> <li>把脚本移到<code></code>前只是权宜之计，一旦引入异步加载或动态插入，顺序就不可控；<code>defer</code>才是声明式保障</li> </ul> <h3>动态插入的script不继承前序脚本的变量状态</h3> <p>用<code>document.createElement('script')</code>插入的脚本，会触发一次**全新的全局执行上下文创建流程**——它有自己的变量提升阶段，不继承之前脚本中<code>let</code>/<code>const</code>的值，也不感知前序脚本里尚未执行的赋值语句。</p> <ul> <li>常见错觉：“插进去就等于接在上一个<script>后面”，结果发现<code>a突然变<code>undefined</script> </li> <li> <code>async = true</code>是默认行为，下载完立刻执行，完全不保序；设<code>async = false</code>虽能同步阻塞，但会拖慢页面，慎用</li> <li> <code>defer = true</code>只对同域脚本有效，且只延迟到DOM解析完成，解决不了跨脚本变量链断裂问题</li> <li>真正可靠的方案是封装成Promise：<code>loadScript('a.js').then(() => loadScript('b.js'))</code>，显式控制依赖链</li> </ul> <h3>编辑器实时预览中window.onerror捕获不到异常</h3> <p>HTML编辑器（如Monaco）里用户写的JS，通常通过<code>eval()</code>、<code>new Function()</code>或注入<code>iframe</code>执行，这类“间接执行”产生的错误，浏览器明确不触发<code>window.onerror</code>——不是监听没配好，是规范限制。</p> <ul> <li>必须在执行入口加<code>try</code>/<code>catch</code>：比如<code>new Function(userCode)</code>外层包一层，否则错误直接抛到控制台，无法上报</li> <li> <code>new Function()</code>比<code>eval()</code>更可控：作用域统一，避免严格模式下<code>SyntaxError</code>难定位</li> <li>用户代码含异步逻辑（<code>setTimeout</code>、<code>Promise</code>）时，还需额外监听<code>unhandledrejection</code>和<code>error</code>（后者需绑定到<code>iframe.contentWindow</code>）</li> <li>若坚持走DOM注入路径，不能用<code>innerHTML</code>，而要手动创建<code>script</code>元素并append到<code>iframe.contentDocument.head</code>，才能复现真实<script> </script> 实际排查时，最容易被忽略的是：**你以为的“顺序执行”，其实是多个独立执行上下文的拼接；你以为的“全局变量”，在动态插入或间接执行场景下根本不存在**。问题往往不出在单个脚本里，而出在上下文切换的缝隙中。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
