在前端开发中，jQuery.ready 是一个用于确保 DOM 加载完成后执行 JavaScript 代码的常见方法。虽然有些人认为这个方法比较慢，但实际上，它是一种非常好用且可靠的方案，可以避免许多因为 DOM 还没加载完全就执行 JavaScript 代码而导致的问题。
如何使用 jQuery.ready
在 jQuery 中，我们可以使用以下方式来调用 ready 方法：
---------------------------- -
-- - --- ----------
---或者更简单地写成：
------------ -
-- - --- ----------
---这两种写法都是等同的，都可以保证代码在 DOM 加载完成后才执行。
为什么 jQuery.ready 被推荐使用
虽然有些人认为 jQuery.ready 执行起来比较慢，但实际上这个方法还是有很多优点的：
可靠性高：使用 jQuery.ready 确保 DOM 加载完成后再执行 JavaScript 代码，可以避免许多因为 DOM 还没加载完全就执行 JavaScript 代码而导致的问题。
跨浏览器支持好：jQuery 对不同浏览器的兼容性做得非常好，因此使用 jQuery.ready 可以确保代码在各种浏览器中都能够正常运行。
易于使用：jQuery.ready 非常容易上手，只需要一行代码就可以完成。
灵活性好：除了可以在 document 上调用 ready 方法以外，还可以在任何 jQuery 对象上调用该方法，使得代码的编写更加灵活。
虽然有时候可能会出现一些问题，比如 ready 方法无法正确地检测 DOM 是否加载完成等，但这些问题都可以通过合理的使用方式和技巧来解决。
如何优化使用 jQuery.ready
虽然 jQuery.ready 本身已经非常好用且可靠，但如果在代码中大量使用该方法，可能会导致页面加载速度变慢。在这种情况下，我们可以考虑使用以下几种方式来优化：
尽量避免使用太多 jQuery.ready：在代码中使用太多 jQuery.ready 可能会导致页面加载速度变慢，因此我们应该尽量减少它的使用次数，只在必要的时候使用即可。
将 JavaScript 代码放在页面底部：将 JavaScript 代码放在页面底部可以避免因为 DOM 还没加载完全就执行 JavaScript 代码而导致的问题，同时也能够提高页面的加载速度。
使用 async 和 defer 属性：HTML5 中引入了 async 和 defer 属性，可以帮助我们更好地管理 JavaScript 代码的执行。其中 async 表示不等待其他脚本的执行，而是异步加载并执行；defer 则表示脚本会按照它们出现在页面中的顺序来执行。
------- -------------------- ---------------
- 使用原生 JavaScript 的 DOMContentLoaded 事件：除了 jQuery.ready 以外，JavaScript 还提供了 DOMContentLoaded 事件，可以用于检测 DOM 是否加载完成。虽然这个事件不如 jQuery.ready 方便易用，但如果我们需要优化代码执行速度，还是可以考虑使用它来代替 jQuery.ready。
--------------------------------------------- ---------- -
-- - --- ----------
---总结
虽然有些人认为 jQuery.ready 比较慢，但实际
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/28283