一、浏览器对 script 的基本加载行为
同步阻塞与异步执行的差异
在没有使用 async 或 defer 的情况下，HTML 解析会被脚本加载阻塞，浏览器需要先下载并执行脚本，再继续渲染页面。这种行为会直接影响初次渲染时间与用户体验。若脚本体积较大，解析阶段的阻塞会带来明显的延迟。
默认的 <script src=\"...\"></script> 标签会立即下载并执行，执行完成后才继续解析 HTML 文档，这意味着文档的渲染路径被打断，而且页面中的后续内容需要等待脚本执行完毕才能访问。
为了解决这一问题，可以通过在脚本标签上使用 defer 或 async 属性来改变默认行为，但需要注意它们的执行时机和顺序差异。这成为后续实现「加载完成再执行」的基础认知。
<!-- 未使用 defer/async 时的默认行为是阻塞解析 -->
<script src="dep.js"></script>
<script src="main.js"></script>
<p>页面继续解析...</p>
关键点：阻塞、执行顺序、渲染路径是我们设计加载策略时必须理解的核心。
浏览器如何处理 script 标签
浏览器在遇到一个 <script> 标签时，会中断文档解析，下载并执行脚本，然后再继续解析。这一过程会导致页面首次渲染的时间点向后移动，从而影响用户对页面的感知速度。
如果使用 defer，浏览器会在文档解析完成后再按顺序执行脚本，且不会阻塞文档解析，促进首屏渲染速度的提升。但是需要注意，defer 仍保留了顺序，且依赖于文档的完整解析完成时刻才执行。
使用 async 时，脚本会并行下载并在下载完成后立即执行，执行顺序不再保证。对于彼此没有依赖的脚本这是一个高效选项，但若脚本之间存在依赖关系，async 可能导致执行顺序错乱。
<!-- defer 场景：按顺序执行且不阻塞解析 -->
<script src="a.js" defer></script>
<script src="b.js" defer></script>
</body>
要点：选择合适的属性能影响渲染性能与执行顺序，理解它们的执行时机是实现“加载完成再执行”的基础。
DOMContentLoaded、load 等事件的角色
在脚本执行与 HTML 解析的协同过程中，DOMContentLoaded 事件标志着文档的初步结构已经就绪；而 load 事件则在页面及其所有资源（如图片、脚本、样式表）全部加载完成后触发。合理利用这两个事件，可以在不阻塞页面渲染的前提下，确保代码在正确时机执行。
通过将逻辑放在 DOMContentLoaded 的监听回调中，能够确保对文档结构的依赖已经就绪；若对资源加载有强依赖，则可结合 load 事件进行晚一点的初始化，以避免未加载完毕的资源引起的错误。
<!-- 监听 DOM 就绪后再执行逻辑 -->
document.addEventListener('DOMContentLoaded', () => {// 依赖结构的初始化代码
});
二、实现“加载完成再执行”的核心机制
基于 defer/async 的策略分析
defer 的策略是把脚本放到文档结束前加载，等到文档解析完成后按顺序执行，极大降低了渲染阻塞的风险；而 async 适合无依赖关系的脚本，可以独立下载并在就绪后尽快执行，减少等待时间。综合来看，如果需要严格的执行顺序且有依赖关系，推荐使用 defer；若脚本之间相互独立且对执行时刻不敏感，则可考虑 async 提升并行性。
在实际项目中，将关键的初始化脚本放入带有 defer 的标签中，可以确保 加载完成再执行 的需求得到满足，同时不会阻塞页面渲染。
<!-- 顺序执行且不阻塞渲染 -->
<script src="vendor.js" defer></script>
<script src="app.js" defer></script>
要点：对依赖关系清晰的场景，优先考虑 defer，以保证加载完成后再执行，提升用户体验和代码稳定性。
基于 Promise 的串行加载实现
当需要对若干脚本按严格顺序加载时，可以通过动态注入和 Promise 链 来实现“加载完成后再执行”的控制流，确保每个脚本全都加载完成再进入下一个阶段。
下面的模式展示了如何用一个通用的加载器逐个加载脚本，并在全部加载完成后执行初始化逻辑，确保依赖关系不被打破。
<!-- 动态串行加载的示例 -->
function loadScript(src) {return new Promise((resolve, reject) => {const s = document.createElement('script');s.src = src;s.async = false; // 保证按顺序执行s.onload = () => resolve(src);s.onerror = () => reject(new Error('Failed to load ' + src));document.head.appendChild(s);});
}loadScript('dep.js').then(() => loadScript('core.js')).then(() => {// 全部脚本加载完成后执行初始化if (typeof init === 'function') init();}).catch(err => console.error(err));
核心要点：通过返回 Promise，逐步串行加载，确保每个脚本的依赖在执行前已就绪，达到“加载完成再执行”的目标。
动态注入脚本的异步控制
除了上述串行加载，还有一种常见做法是通过动态注入脚本并在 onload 或 Promise 回调中触发后续逻辑，确保“加载完成再执行”是强制执行的结果。
动态加载的好处是可以在任意时刻开始加载，且可以在单个入口点集中控制依赖关系，匹配复杂的加载时序需求。实现要点在于将后续动作放在回调中，避免在脚本未就绪时执行。
<!-- 动态注入并在加载完成后执行 -->
function inject(src) {return new Promise((resolve, reject) => {const s = document.createElement('script');s.src = src;s.onload = () => resolve(src);s.onerror = () => reject(new Error('Load failed: ' + src));document.head.appendChild(s);});
}inject('a.js').then(() =>inject('b.js')
).then(() =>// 继续执行需要依赖的代码startApp()
).catch(console.error);
实践建议：尽量将依赖关系用清晰的模块化结构表达，动态加载时保持错误处理，确保任意失败都能回退或给出明确诊断。
三、实战技巧：将加载顺序落地到实际项目
多脚本依赖的组织
在大型应用中，通常会出现多脚本的依赖关系网络。为确保顺序性和可维护性，建议先绘制一个依赖图，将核心依赖放在前端入口处，使用 集中管理的加载器 实现统一控制。
一个可维护的办法是把依赖以模块形式导出，通过 import 或自定义加载器来组装初始化流程，这样可以把“谁依赖谁”的关系在代码层面清晰表达。
<script type="module">
import {init as initApp} from './src/init.js';
import {loadDependencies} from './src/loadDeps.js';loadDependencies(['dep1.js','dep2.js']).then(() => {initApp();
});
</script>
关键点：模块化加载与依赖管理能够显著降低维护成本，确保加载顺序在大型项目中仍然可靠。
结合模块化与动态导入
使用 ESM 模块 与动态导入（import()）可以在运行时按需加载代码，同时保持模块之间的显式依赖关系。顶层 await 的普及也让串行加载变得更加直观，但需要浏览器对模块的支持。
通过将核心逻辑放在模块内，后续页面只需按需引入，便能实现“加载完成再执行”的约束，同时提升代码复用性与测试性。
<script type="module">
import {start} from './modules/start.js';
async function main(){await import('./modules/depA.js');await import('./modules/depB.js');start();
}
main();
</script>
要点：模块化和动态导入为复杂依赖提供了清晰的编排方式，同时降低了耦合度。
四、综合实践：从理论到工程落地的要点
预加载与关系到渲染性能的权衡
在页面进入阶段，通过 link rel=preload 提前获取将要执行的脚本，可以降低就绪时间，此举对渲染性能有显著影响。预加载要点在于只对真正需要尽早拿到的脚本使用，否则可能引发资源竞争和带宽浪费。
一个常见的做法是对核心脚本（如应用入口、框架初始化）使用预加载，然后在实际需要时再正式加载并执行，以实现更加稳定的加载时序。
<link rel="preload" href="main.js" as="script">
<script src="main.js" defer></script>
要点：合理的预加载策略能减少等待时间和卡顿感，但需避免资源抢占导致的加载瓶颈。
容错与回退的考虑
在实际环境中，网络波动、资源丢失等情况不可避免，因此实现“加载完成再执行”时，务必为加载失败提供回退路径，确保应用在离线或资源不可用时仍能提供基本功能或错误提示。
通过在加载器中捕获错误、设置超时、以及在失败分支提供备用实现，可以提升系统的鲁棒性，并降低由于依赖失败导致的全局崩溃风险。
<!-- 错误处理示例 -->
loadScript('main.js').then(() => {// 初始化}).catch(err => {console.error(err);// 回退策略，例如启用简化模式或提示用户});
核心原则：在确保加载顺序的同时，留有容错空间，使工程在各种网络条件下都具备可用性。
以上内容围绕“HTML 中 JS 文件的顺序加载机制揭秘：如何确保加载完成再执行方法的实战技巧”这一主题展开，聚焦从浏览器对 script 的基本加载行为、到实现“加载完成再执行”的核心机制，以及在真实项目中的落地实战。通过对 defer、async、动态加载、模块化导入等多种技术路径的综合运用，可以在不牺牲渲染性能的前提下，确保关键逻辑在加载完成后再执行，从而实现更稳定、可维护的前端应用。希望这些实战技巧能帮助你在实际开发中更高效地控制脚本执行时序，提升用户体验。
