Javascript等待文档加载

在前端开发中，有时需要在页面完全加载后才开始执行一些操作，否则会因为页面元素还未完全加载而出现错误。因此，在Javascript中等待文档加载完成是一项很重要的任务。

方法1：window.onload事件

window.onload = function() {
  // 在此处编写代码
}

使用window.onload事件可以实现等待文档加载完成后再执行代码的功能。当浏览器解析完文档所有的HTML、CSS、Javascript并完成页面渲染后，会触发window.onload事件。因此，在该事件中编写代码即可确保页面加载完成后才执行。

但是，使用window.onload事件有一个缺点：只有当页面完全加载完成后才会执行代码，如果页面元素过多，可能需要等待较长时间。

方法2：document.ready事件

$(document).ready(function() {
  // 在此处编写代码
});

document.ready事件是jQuery库提供的一种事件，可以实现在文档加载完成后立即执行代码。与window.onload事件不同的是，document.ready事件在页面DOM结构加载完成后就会执行，而要等到图片和其他外部文件都加载完成后，才会执行window.onload事件。

方法3：DOMContentLoaded事件

document.addEventListener('DOMContentLoaded', function() {
  // 在此处编写代码
});

DOMContentLoaded事件是原生Javascript提供的一种事件，也可以实现在文档加载完成后立即执行代码。与window.onload事件相似，DOMContentLoaded事件在整个页面加载完毕后再执行，但是它不会等待图片和其他外部资源加载完成。

方法4：defer和async属性

<script src="example.js" defer></script>

<script src="example.js" async></script>

defer和async属性是