1. 需求背景与目标
在现代前端开发中，精确控制两段 script 标签的加载顺序关系到页面初始化、依赖加载和用户体验。本节将从需求动机、影响因素和基本约束出发，帮助读者建立对顺序控制的直观认知。
关键点包括阻塞行为、加载策略和回调依赖，这些都会直接影响后续脚本的执行时机。
1.1 现状分析
常见场景下，如果两段脚本存在依赖关系，默认的执行顺序会被网络延迟和解析时间打乱。因此，确保前一个脚本加载完成再执行后续脚本是最直接的需求。
在没有显式异步控制的情况下，脚本标签的放置顺序通常是执行的先后依据，但跨网络加载时机仍需要额外的控制策略。
1.2 典型用例
一个典型用例是：第一个脚本提供全局对象和初始化函数，第二个脚本依赖这个全局对象来完成注册。此时，两段脚本的相对顺序变得至关重要。
2. 核心方法论
2.1 禁用 async、利用阻塞加载保证顺序
最直接的做法是去掉异步属性，让两个 script 标签以默认的阻塞加载行为执行，确保前一个脚本完成后再执行后续。对于简单场景，这种方法极其直观。
2.2 使用 defer 实现并行加载、保留执行顺序
使用 defer 时，浏览器会并行加载资源，但脚本的执行顺序仍然保持与在文档中的顺序一致，且在文档解析结束后一次性执行。这通常是提升并行性而不改变依赖关系的好方法。
2.3 动态注入脚本实现顺序控制
通过动态创建脚本并监听 onload，可以实现显式的顺序控制。这是通过 Promise 链接的常用方法，确保前一个脚本就绪再加载下一个。
// 动态逐个加载并顺序执行
function loadScript(src) {return new Promise((resolve, reject) => {const s = document.createElement('script');s.src = src;s.onload = resolve;s.onerror = reject;document.head.appendChild(s);});
}
(async () => {await loadScript('lib/first.js');await loadScript('lib/second.js');
})();
2.4 模块化加载的顺序特性
模块化加载通过 import 图谱实现顺序。依赖图决定执行顺序。
import './a.js';
import './b.js';
3. 常见坑点与解决思路
3.1 浏览器行为差异
不同浏览器对等待、并行和执行时机的策略可能略有差异。为确保一致性，在多浏览器环境下要进行基线测试，并考虑使用现代加载策略的降级方案。
3.2 第三方脚本的干扰
外部依赖可能改变全局对象、覆盖变量，导致后续脚本失效。此时，以明确的依赖边界和命名空间管理，并尽量使用模块化或自执行的初始化。
3.3 网络波动与超时导致的顺序漂移
网络延迟会影响阻塞加载的时序。为降低风险，可以将关键初始化放在 window.onload 或 DOMContentLoaded 事件后再执行，或使用计量策略来确保关键资源就绪。
3.4 测试与监控策略
通过浏览器开发者工具的网络面板和性能标签，可以观察到加载顺序与时间线。启用资源跟踪与时间线分析有助于快速定位顺序错位的原因。
