理解加载策略的核心目标
关键目标与渲染路径
在现代网页中，加载策略的核心目标是尽可能快地将可见内容呈现给用户，同时为后续交互留出足够的响应时间。渲染路径指从解析 HTML、构建 DOM、到绘制首屏的全过程，任何阻塞资源都会拉长这一路径。
另一个关键点是衡量指标，如首次有意义绘制（FCP）、交互准备就绪时间（TTI），以及首次输入延迟。设计加载策略时需要时刻关注这类指标，确保 JavaScript 不成为拖累。
下面的示例展示一个典型的阻塞脚本场景，若直接在 head 位置引入未分组的外部脚本，浏览器必须在解析完成前等待脚本加载与执行，这会显著延迟渲染。
...
优化加载策略：从静态加载到动态加载
将关键 JS 提前加载与分离
为了缩短关键路径，需要识别并单独处理对首屏渲染至关重要的 JavaScript。关键路径脚本通常包含初始化、事件绑定、以及对页面结构的直接影响，因此应采用内联或尽早加载的方式。
同时应将非关键脚本从首屏中分离，优先处理资源较少、对渲染无直接依赖的部分。分离策略有助于并行下载和缓存，降低首屏阻塞。
...
合理使用 defer、async、模块化脚本
在加载大量 JavaScript 时，了解不同属性对执行顺序的影响至关重要。defer 能确保按顺序执行且在文档解析结束后执行，适合需要保持依赖顺序的脚本。async 则在下载完成后立即执行，适用于独立、无需等待其他脚本的情形。
对于模块化应用，type="module" 脚本采用 ES 模块化加载，支持按需导入和缓存。通过静态引入和动态导入（dynamic import）可以实现进一步的按需加载。
// 动态导入示例：按需加载模块
import('./modules/heavy.js').then(module => { module.init(); }).catch(err => { console.error('加载失败', err); });
执行顺序与模块化：确保正确的执行顺序避免阻塞
执行顺序的影响因素
执行顺序受多方面因素影响，包括依赖关系、资源的下载顺序以及浏览器的执行队列。依赖关系与模块图需要在维护阶段明确清晰，否则会出现未定义行为或重复执行。
为了保持稳定的执行顺序，建议在打包阶段构建显式的依赖图，并通过模块化打包（如代码分割、按需加载）来确保仅在需要时才加载特定模块。
// 模块化加载示例（使用静态导入确保顺序）
import { initUI } from './ui.js';
import { loadData } from './data.js';initUI();
loadData();
动态导入与按需执行
动态导入提供了比静态导入更细粒度的控制能力，能够在用户操作或条件满足时再加载相应模块，从而降低初始包体积。动态导入返回 Promise，便于控制后续流程。
结合断点加载与缓存策略，可以实现更平滑的执行体验。
// 按需加载：点击按钮后加载模块
document.getElementById('loadBtn').addEventListener('click', () => {import('./features/advanced.js').then(mod => mod.run()).catch(err => console.error(err));
});
实际落地：示例与最佳实践
示例：将关键脚本内联与分离
一个可落地的做法，是在 HTML 头部内联仅包含渲染所需的最小 JS 片段，同时将剩余逻辑放置在外部脚本中，利用defer、module 等属性控制执行时机。
通过这种方式，首屏渲染时间明显缩短，用户体验得到提升。
使用预加载与延迟加载策略
结合preload与prefetch可以更智能地控制资源下载时序。preload适用于关键资源，prefetch则用于将来可能需要的资源，以降低等待时间。
下面的示例展示了如何通过 link 标签实现预加载与延迟加载的协同。
在运行时，浏览器会优先下载critical.js，并在可用带宽允许时预取未来可能需要的脚本，以提升后续交互的反应速度。
