页面加载时自动执行<script>脚本的实现方案咨询

以下是几种可靠的实现方式及常见问题排查：

• 监听DOMContentLoaded事件
  当DOM树完全构建完成（外部资源可能仍在加载）时触发，适合仅需操作DOM的场景：

  document.addEventListener('DOMContentLoaded', function() {
    // 这里写你的执行代码
    console.log('DOM结构就绪，执行脚本');
  });
  

• 监听window的load事件
  等待页面所有资源（图片、样式表、脚本等）加载完成后执行，适合依赖外部资源的操作：

  window.addEventListener('load', function() {
    // 这里写你的执行代码
    console.log('所有资源加载完成，执行脚本');
  });
  

• 将脚本放在body标签末尾
  利用HTML从上到下的解析顺序，把script标签放在</body>前，此时DOM已基本就绪，无需额外监听：

  <body>
    <!-- 页面内容 -->
    <script>
      // 这里写你的执行代码
      console.log('脚本位于body末尾，DOM已就绪');
    </script>
  </body>
  

• 使用defer属性
  给外部脚本添加defer属性，脚本会在DOM解析完成后、DOMContentLoaded事件前执行，且不阻塞DOM解析：

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

常见问题排查 #

• 打开浏览器控制台（F12）检查是否有脚本报错，错误会中断代码执行
• 避免多次绑定同名事件导致回调被覆盖
• 若使用了async属性的脚本，会在下载完成后立即执行，可能早于DOM就绪，不适合操作DOM

内容的提问来源于stack exchange，提问作者Yora