HTML脚本引用怎样适配HTML5_调整script位置优化加载【脚本】_技术教程

script不加defer或async会阻塞HTML解析，导致白屏和交互延迟；推荐用defer、async、type="module"或动态import()优化加载策略。

script 标签不加 `defer` 或 `async` 时，浏览器会阻塞 HTML 解析

HTML5 默认按顺序加载和执行，遇到内联或外部脚本时，必须等它下载、解析、执行完才能继续构建 DOM。这对首屏渲染影响极大，尤其当脚本放在里时，用户可能长时间看到白屏。

常见现象：页面顶部有

，但里的按钮半天不响应、文字不显示。

除非脚本必须同步执行（如初始化全局配置、Polyfill 检测），否则不要放在中且不加属性
defer 适合依赖 DOM 结构但需按顺序执行的脚本（如模块化入口）
async 适合完全独立、无执行顺序要求的脚本（如统计埋点、广告 SDK）
现代项目中，type="module" 脚本默认具有 defer 行为，无需额外声明

把 script 移到 body 底部仍不够 —— 需配合 `defer` 或 `type="module"`

仅把放到前，虽能避免阻塞 DOM 构建，但仍有风险：如果 JS 文件体积大或网络慢，DOMContentLoaded 事件仍会被延迟触发，影响交互就绪时间。

更稳妥的做法是保留底部位置，同时显式声明加载策略：


  ...
  ...

defer 脚本会并行下载，但严格按出现顺序执行，且保证在 DOMContentLoaded 前完成
type="module" 不仅自带 defer，还支持顶层 await 和静态导入分析，适合现代构建流程
避免混用：async 脚本不应放在底部——它会跳过顺序约束，可能比 DOM 构建还早执行，导致 document.getElementById 找不到元素

动态 import() 是真正按需加载的关键，不是靠 script 位置解决的

调整位置只能优化初始加载路径，无法解决“某个按钮点击后才需要加载图表库”这类场景。这时候必须用运行时动态导入。

例如点击按钮后加载 ECharts：

button.addEventListener('click', async () => {
  const { default: echarts } = await import('https://cdn.jsdelivr.net/npm/echarts@5.4.3/+esm');
  const chart = echarts.init(document.getElementById('chart'));
  chart.setOption({ /* ... */ });
});

动态 import() 返回 Promise，可配合 try/catch 处理加载失败
CDN 提供的 ES 模块地址需带 +esm 后缀（如 jsDelivr），否则可能返回 CommonJS 格式，导致浏览器报错 Cannot use import statement outside a module
Webpack/Vite 等构建工具会自动代码分割，但最终是否生效，取决于你是否真的用了 import()，而不是只靠 script 标签挪位置