javascript - 在 onload 事件中调用脚本或将代码放在 html 末尾之间的区别

Question

我正在阅读 google maps api 文档，偶然发现了一段解释异步加载 API 的段落。api文档可以在这里找到

作为示例，它显示了一个如下所示的脚本：

function loadScript() {
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = "http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE&callback=initialize";
  document.body.appendChild(script);
}

window.onload = loadScript;

这段代码和只是简单地将脚本调用一直添加到 html 标记的末尾有什么区别？像这样：

        <!-- rest of the markup -->

        <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE&callback=initialize"></script>
    </body>
</html>

Answer 1

您通常希望 JS 脚本在 DOM 加载后运行，并且在读取/解析 html 时不一定会发生此事件。IE 在读取 HTML 和构建 JS 需要遍历的 DOM 之间存在一些时间。