资源按需加载的核心是“用时再载”，需依场景选 async/defer、动态创建 script、import() 或 loadJS：async 适合无依赖脚本，defer 按序执行 DOM 相关逻辑，import() 实现模块化按需加载，loadJS 管理复杂依赖顺序。
资源按需加载的核心是“用时再载”，不提前占用带宽和执行时间。JavaScript 文件的异步引入不是简单加个 async 就完事，而是要结合场景选对方式——既要保证不阻塞页面渲染，又要满足执行时机、依赖顺序或条件触发等实际需求。
用 async 或 defer 属性快速上手
适合大多数静态引入场景，无需写额外 JS 代码：
-
async：脚本下载时不阻塞 HTML 解析，下载完立刻执行，适合彼此无依赖的独立脚本（如统计代码、广告 SDK）。多个
async脚本执行顺序不确定。 - defer：同样不阻塞解析，但会等到整个 HTML 解析完成、DOM 构建完毕后，再按书写顺序依次执行。适合操作 DOM 的初始化逻辑，比如表单校验插件、导航菜单脚本。
二者都写在 <script> 标签里，例如：<script async src="analytics.js"></script><script defer src="init.js"></script>
动态创建 script 标签实现可控加载
当需要运行时判断是否加载、指定插入位置、或链式加载多个资源时，手动创建标签更灵活：
立即学习“Java免费学习笔记（深入）”；
- 用
document.createElement('script')创建元素，设置src和async = true（默认即为 true） - 绑定
onload回调，在脚本就绪后执行初始化逻辑 - 可统一处理错误（
onerror），并支持插入到<head>或<body>任意位置
封装成函数后使用简洁清晰：
function loadScript(src, callback) {<br> const s = document.createElement('script');<br> s.src = src;<br> s.onload = callback;<br> s.onerror = () => console.error(`加载失败：${src}`);<br> document.head.appendChild(s);<br>}<br>loadScript('plugin.js', () => Plugin.init());
用 import() 实现真正按需与模块化
这是现代前端按需加载的推荐方式，尤其适合 SPA 中的路由级或组件级拆分：
- 返回 Promise，天然支持
async/await和错误捕获 - 只在调用时发起请求，完全避免初始加载负担
- 配合打包工具（Vite/Webpack），自动做代码分割，生成独立 chunk
典型用法：
button.addEventListener('click', async () => {<br> try {<br> const { Modal } = await import('./modal.js');<br> Modal.show();<br> } catch (err) {<br> console.error('模块加载失败', err);<br> }<br>});
借助轻量库管理复杂依赖（如 loadJS）
当项目中存在多层依赖（例如 A → B → C）、需要严格保序、或兼容旧浏览器时，手动维护容易出错。loadJS 这类工具提供简洁 API：
-
loadJS('lib.js', true)：按顺序加载，确保后续脚本能用它 -
loadJS('app.js', initApp)：加载完立即回调 - 仅 1KB，无构建依赖，直接通过 script 引入即可用
它底层仍是动态创建 script，但封装了参数识别、有序执行（通过 async=false 模拟）、错误兜底等细节，省去重复造轮子。
