📅 最后修改于: 2023-12-03 15:02:14.599000 🧑 作者: Mango
在使用 jQuery 进行前端开发的过程中，我们通常会将一些 JavaScript 代码包含在一个 $(document).ready() 函数中。那么这个函数到底有什么用呢？
$(document).ready() 函数的作用是在 DOM 加载完成后执行一个函数。换句话说，这个函数可以确保我们所有的 JavaScript 代码都是在 DOM 加载完成后才被执行，从而避免了由于 DOM 还未完成加载而导致的 JavaScript 错误。
我们经常在前端开发中遇到一个问题：将 JavaScript 代码放在 <head> 标签中会导致页面速度变慢。原因是，当浏览器遇到 <script> 标签时，它会立即开始下载脚本并解析执行。如果脚本很长或需要执行很长时间，那么页面就会被阻塞，进而导致页面速度变慢。
为解决这个问题，我们可以将脚本放在页面底部，从而避免了脚本解析的阻塞。但这样也会出现一个问题，就是页面底部的 JavaScript 代码可能依赖于页面中的某些元素。如果页面还未加载完成，那么这些代码就会出错。
我们可以使用 $(document).ready() 函数来解决这个问题。将需要等待页面 DOM 加载完成后才执行的 JavaScript 代码放在 $(document).ready() 函数中，即可避免出现 JavaScript 错误。
另外一个 $(document).ready() 函数的用途是减小 JavaScript 文件的大小。在处理 JavaScript 代码时，我们经常需要定义一些变量或者函数，在页面加载时就应该执行。然而，如果这些代码很长或者需要执行很长时间，那么就不能将它们放在 $(document).ready() 函数中。
为此，我们可以使用本地变量来实现，例如：
(function() {
var myVar = 0;
function myFunc() {}
// 其他代码
})();
$(document).ready(function() {
// 这里可以使用 myVar 和 myFunc
});
这种写法可以将页面加载时需要执行的代码与其他代码分开，从而在某些情况下提高页面性能。
在 jQuery 中，$(document).ready() 函数可以确保 JavaScript 代码在 DOM 加载完成后执行，从而避免了由于 DOM 还未完成加载而导致的 JavaScript 错误。此外，我们可以使用 $(document).ready() 函数来分离页面加载时需要执行的代码与其他代码，从而提高页面性能。