JavaScript 脚本延迟加载方式

实现 JavaScript 延迟加载的 5 种方法

问题

如何延迟加载 JavaScript 脚本以提高页面加载速度？

解答

延迟加载是指等页面加载完成后再加载 JavaScript 文件，可以避免阻塞页面渲染，提升用户体验。

1. defer 属性

脚本与文档同步解析，但在文档解析完成后才执行。多个 defer 脚本按顺序执行（但部分浏览器可能不遵守）。

<script src="script.js" defer></script>

2. async 属性

脚本异步加载，加载完成后立即执行。多个 async 脚本的执行顺序不可预测。

<script src="script.js" async></script>

3. 动态创建 DOM

监听文档加载事件，加载完成后动态创建 script 标签。

window.addEventListener('load', function() {
  const script = document.createElement('script');
  script.src = 'script.js';
  document.body.appendChild(script);
});

4. setTimeout 延迟

使用定时器延迟加载脚本。

setTimeout(function() {
  const script = document.createElement('script');
  script.src = 'script.js';
  document.body.appendChild(script);
}, 1000);

5. 脚本放在底部

将 script 标签放在 body 底部，让脚本最后加载执行。

<body>
  <!-- 页面内容 -->
  <script src="script.js"></script>
</body>

关键点

defer 和 async 都不阻塞文档解析，但 defer 在文档解析完成后执行，async 在加载完成后立即执行
defer 脚本按顺序执行，async 脚本执行顺序不可预测
动态创建 DOM 方式最灵活，可以精确控制加载时机
脚本放在底部是最简单的优化方式，但仍会阻塞页面渲染