顺序错乱导致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><head></code>里，浏览器一遇到就暂停HTML解析、立即执行，此时<code><body></code>和所有元素都还没生成，<code>document.getElementById</code>必然返回<code>null</code>。这不是代码bug，是加载流程决定的。</p> <ul> <li>别依赖“脚本很小所以能等到DOM”——规范就是“遇到就执行”，网络稍慢就失效</li> <li> <code>defer</code>只对带<code>src</code>的外部脚本有效，内联脚本必须用<code>document.addEventListener('DOMContentLoaded', () => { ... })</code>包裹</li> <li>把脚本移到<code></body></code>前只是权宜之计，一旦引入异步加载或动态插入，顺序就不可控；<code>defer</code>才是声明式保障</li> </ul> <h3>动态插入的script不继承前序脚本的变量状态</h3> <p>用<code>document.createElement('script')</code>插入的脚本，会触发一次**全新的全局执行上下文创建流程**——它有自己的变量提升阶段，不继承之前脚本中<code>let</code>/<code>const</code>的值，也不感知前序脚本里尚未执行的赋值语句。</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill4293" title="Doc To HTML"><img src="https://img.php.cn/upload/skill/000/000/081/178998486916110.jpg" alt="Doc To HTML" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill4293" title="Doc To HTML">Doc To HTML</a> <p>使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。</p> </div> <a href="/xiazai/skill4293" title="Doc To HTML" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <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> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</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> 实际排查时，最容易被忽略的是：**你以为的“顺序执行”，其实是多个独立执行上下文的拼接；你以为的“全局变量”，在动态插入或间接执行场景下根本不存在**。问题往往不出在单个脚本里，而出在上下文切换的缝隙中。
