等待 JavaScript

在当今的网络世界中，JavaScript 已经成为了前端开发的基本语言。前端程序员需要使用它来实现动态交互效果、处理用户输入等功能。但是，由于 JavaScript 是一门解释性语言，它需要在客户端运行，因此我们有时候需要等待 JavaScript 代码加载完成才能执行某些操作。

JavaScript 加载的三种方式

JavaScript 可以通过以下三种方式来加载：

1. 直接嵌入 HTML 页面中；
2. 通过 script 标签引入外部 JavaScript 文件；
3. 通过 AJAX 获取 JavaScript 代码并执行。

无论是哪一种方式，都需要等待 JavaScript 代码加载完成后才能执行后续的操作。

如何等待 JavaScript 加载完成

1. 使用 window.onload 事件

window.onload 事件会在整个页面（包括图片、JavaScript 代码等）加载完成后触发。我们可以在 onload 事件中编写需要等待 JavaScript 加载完成后执行的代码。

window.onload = function() {
  // 这里写需要等待 JavaScript 加载完成后执行的代码
};

但是，这种方式有一个明显的缺点，即浏览器会等到所有内容加载完成后才触发 onload 事件。

2. 使用 defer 和 async 属性

我们可以在 script 标签中使用 defer 和 async 属性来控制 JavaScript 代码的加载和执行。

<script src="path/to/your/javascript" defer></script>

使用 defer 属性可以让页面在加载 JavaScript 代码时不阻塞，而是继续加载页面其他内容，等到页面加载完成后再执行 JavaScript 代码。使用 async 属性也可以达到相同的效果，但是会和其他异步加载的资源一起竞争加载，不一定按照代码的顺序执行。

3. 使用 DOMContentLoaded 事件

DOMContentLoaded 事件会在文档解析完成后触发，这时 HTML 和 CSS 已经加载完成，但是 JavaScript 没有加载完成。我们可以在 DOMContentLoaded 事件中编写需要等待 JavaScript 加载完成后执行的代码。

document.addEventListener('DOMContentLoaded', function() {
  // 这里写需要等待 JavaScript 加载完成后执行的代码
});

结语

无论使用哪种方式等待 JavaScript 加载完成，我们都需要注意页面性能和用户体验。在大型项目中，需要延迟加载 JavaScript 代码、压缩合并代码等优化措施来提升页面性能。在必要的情况下，我们也可以使用加载状态提示、骨架屏等方式来提高用户体验。