js页面加载后执行的几种方式小结

理解您的需求，本文将为您详细讲解“JS页面加载后执行的几种方式小结”的攻略。JS页面加载后执行代码是我们用来实现页面交互效果，改变DOM节点的状态，增强网站功能等重要手段，因此必须要掌握。

一、使用 window.onload

window.onload 是最常用也是最古老的一种方式，它是在网页的所有资源（包括图片和嵌入的 iframe 等）都加载完成后才会执行。下面是一个使用 window.onload 的示例代码：

window.onload = function() {
  // 这里是我们要执行的代码
  alert('页面加载完成了！');
};

使用 window.onload 的优点是我们可以在页面上任何位置使用它，而不需要引入其他的JS库或插件。但是也存在缺点，例如：无法同时注册多个 onload 事件，而且 onload 内添加的函数必须是匿名函数。

二、使用 document.ready

jQuery 的 document.ready 也是很常用的，它和 window.onload 的区别在于，document.ready 是在 DOM 准备就绪后就会执行，不需要等待其他资源的加载。下面是一个使用 document.ready 的示例代码：

$(document).ready(function() {
  // 这里是我们要执行的代码
  alert('DOM准备就绪了！');
});

使用 document.ready 的优点是它比 onload 更快，因为它只需要等待 DOM 的准备就绪，而不需要等待其他资源的加载。但是需要注意的是，使用 document.ready 必须引入 jQuery 库。

三、使用defer特性

defer 是 HTML5 新增的一个属性，它可以在不阻止页面的情况下异步加载脚本文件，并确保按照顺序执行，与 window.onload 、 document.ready 不同的是，脚本文件的加载不会阻塞页面渲染过程。下面是一个使用 defer 特性的示例代码：

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

使用 defer 特性的优点是可以让脚本文件异步加载，不阻塞页面渲染，提高页面加载速度，但是需要注意的是，defer 特性只对外部脚本文件有效，内部脚本文件不支持 defer 特性。

四、使用async特性

async 是 HTML5 新增的一个属性，与 defer 特性相比，其特点是不保证脚本文件按照顺序执行，只要完成了加载就会立即执行。下面是一个使用 async 特性的示例代码：

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

使用 async 特性的优点是可以异步加载脚本文件，不阻塞页面渲染，提高页面加载速度。但是需要注意的是，async 特性只对外部脚本文件有效，内部脚本文件不支持 async 特性。

以上就是 JS 页面加载后执行的几种方式的小结，根据实际需求选择适合自己的方式进行编程即可。