如何让HTML完全加载后再执行外部JavaScript文件？

嘿，我懂你现在的烦恼——页面还没显示出任何内容，那个prompt对话框就弹出来了，用户根本看不到ToDo列表的操作说明对吧？别担心，有几个简单可靠的方法能完美解决这个问题：

方法1：用DOMContentLoaded事件（最推荐） #

这是浏览器提供的标准事件，专门用来监听DOM完全解析完成的时刻。你只需要把所有JS逻辑包裹在这个事件监听里就行，修改你的todo.js代码如下：

document.addEventListener('DOMContentLoaded', function() {
  // 原来的所有代码都放这里面
  var todos = ["Eat dinner"];
  var input = prompt("What would you like to do?");
  while(input !== "quit") {
    if(input === "list") {
      console.log(todos);
    } else if(input === "new") {
      var newTodo = prompt("Enter a new ToDo item");
      todos.push(newTodo);
    }
    input = prompt("What would you like to do?");
  }
  console.log("Ok, you quit the app! :/");
});

这样一来，只有当页面的所有HTML都被解析成DOM树，浏览器准备好展示内容之后，才会触发这段代码弹出对话框，用户就能先看到ToDo的操作指引啦。

方法2：给script标签加defer属性 #

如果不想改动JS代码，也可以直接在HTML里的script标签上加上defer属性：

<script src="assets/js/todo.js" type="text/javascript" defer></script>

defer的作用是让浏览器继续解析HTML的同时异步加载JS文件，等整个HTML页面解析完成后，再执行这个JS文件。这样也能保证HTML先显示，再弹出对话框。

方法3：确认script标签的位置（基础优化） #

其实你已经把script标签放在</body>之前了，这本身是个好习惯——因为浏览器是按顺序解析HTML的，遇到script标签会先加载执行JS，再继续解析后面的内容。不过有时候如果JS文件很小或者加载速度极快，可能在浏览器渲染页面之前就执行了，所以前面两种方法会更稳妥。

小补充：defer vs async #

别搞混这两个属性哦：

• async是JS文件加载完成后立刻执行，不管HTML有没有解析完，所以可能还是会出现提前弹出对话框的情况；
• defer是严格等HTML解析完成后再执行JS，而且会按照script标签的顺序执行，完全符合我们的需求。

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