如何在HTML内容加载完成后执行外部JS文件？

一、把代码包裹在匿名函数中是否符合规范？ #

完全符合规范，而且是推荐的最佳实践。

• 这种做法能避免变量、函数污染全局作用域，减少不同脚本之间的变量冲突风险；
• 确保DOM结构完全加载后再执行依赖DOM元素的代码，避免出现找不到元素的错误。

二、其他实现HTML加载后执行JS代码的方法 #

1. 将JS脚本放在</body>标签前 #

浏览器会按顺序解析HTML，当执行到</body>前的脚本时，页面DOM已经构建完成，无需监听事件即可直接访问DOM元素。
示例HTML结构：

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

对应的JS文件代码无需包裹事件监听：

let file = document.getElementById("test");
function test1(){
  // 此处编写使用file变量的代码
}
function test2(){
  // 此处编写使用file变量的代码
}

2. 给<script>标签添加defer属性 #

如果希望把脚本放在<head>标签内，可以添加defer属性。浏览器会异步加载脚本，但会等待DOM解析完成后，再按脚本的引入顺序执行。
示例HTML结构：

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

这种方式下，JS文件同样无需监听DOMContentLoaded，直接编写代码即可访问DOM元素。

3. 监听window.load事件（不推荐） #

window.load事件会在DOM和所有外部资源（图片、样式表、音频等）全部加载完成后触发，触发时机远晚于DOMContentLoaded。如果仅需操作DOM，不建议使用这种方式。
代码示例：

window.addEventListener("load", function() {
  let file = document.getElementById("test");
  // 后续代码逻辑
});

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