页面加载完成后执行JS

当页面加载完成之后，在网站上 dom 可用之前，有可能需要执行一些 JavaScript。该操作可以帮助我们将一些代码延迟到网站加载完成后再执行。这篇文章将会从几个方面对页面加载完成后执行JS进行详细的阐述。

一、 window.onload 方法

使用 window.onload 方法可以在页面加载完成后执行 JavaScript。该方法是最简单的处理方式，但在某些情况下，它可能不太适用。

一个重要的注意点是：当使用 window.onload 方法时，必须确保所有内容（包括图片和其他资源）都已完全下载并可用于操作。否则，该方法不会被触发，并且您的代码将无法按预期工作。

二、 document.ready 方法

在 jQuery 中，可以使用 document.ready 方法。这个方法的执行时机是在 DOM 加载完成，但在其他资源加载完成之前。使用 document.ready 方法不会等待像图片这样的资源下载完毕。

在 jQuery 中使用 document.ready 方法的优点是它能够确保在内容下载之前，执行 JavaScript 的代码可用。因此，可以在下载完成之前进行一些信息搜集或其他一些操作。

三、 defer 属性

defer 属性是 HTML5 中的一项新功能，它可以告诉浏览器不要等待文件完全加载，而是在 DOMContentLoaded 事件触发之前执行 JavaScript。也就是说，该属性仅在指定的脚本被加载时才会产生影响。

使用 defer 属性的好处在于它将脚本完全分离了，因此不会影响页面的下载速度。而且，这个属性的运行不会被阻塞，因此它能够轻松地在 DOMContentLoaded 事件触发之前加载代码。

需要注意的是，当使用 defer 属性时，代码的执行顺序与它们在脚本文件中的出现顺序相同。

四、 async 属性

async 属性是 HTML5 中的另一项新功能，它允许浏览器异步加载脚本。当 async 属性被设置为 true 时，浏览器将会在下载过程中并行地加载脚本，这意味着它们可能会在页面的其他部分还没有下载完毕的情况下开始运行。

由于 async 方式是并行地下载脚本，因此通常不适用于那些需要严格控制脚本的执行顺序的地方。如果您有其他脚本或库依赖于主要脚本，则应该使用 defer 属性。

五、 MutationObserver

MutationObserver 用于监听文档中 DOM 元素的变化，并能在特定情况下触发回调函数。这个 API 可以帮助我们监视文档流中的标记，例如添加、删除或修改元素。

当您需要在页面的特定位置动态加载代码时，可以使用 MutationObserver 方法。这个方法可以让您在特定节点初始化之前等待，并且只有当他们存在时才执行代码。

六、 Conclusion

以上是一些常用的方法来在网页加载完成后执行 JavaScript，需要根据具体情况进行选取。总的来说，我们需要随时注意代码的执行顺序和一些细节问题。

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com