$(document).ready：从多个方面的阐述

一、介绍$(document).ready

$(document).ready()函数，或者称之为$(function () {} )，是 jQuery 常用的方法之一。它是对文档（HTML页面）加载完成时执行的函数的一种绑定方式。具体来说，$(document).ready()函数会在页面内 DOM结构构造完成后立即执行，即在页面的元素全部加载完毕之后，但并不等同于图片、媒体文件等外部资源的加载，这些不属于 DOM 结构。

$(document).ready(function () {
    //code do something here
});

二、$(document).ready与window.onload的区别

$(document).ready和window.onload两个函数都是在页面加载完成后执行。但是它们之间的区别还是很明显的：

1. 加载速度的差异

$(document).ready与文档DOM加载完成时就可以调用，而不用等到外部资源文件（如图片和样式表）也加载完成。而window.onload必须等到所有内容，包括外部文件图片等全部加载完成之后才能执行。这也就是为什么html页面元素结构可能会在一个图片加载完成之后才被$(document).ready函数捕获。

2. 捕获事件的不同

$(document).ready和window.onload事件捕获不同的内容。$(document).ready所捕获的是文档的DOM元素结构，而window.onload所捕获的是整个html页面所有的元素和文件，包括外部资源文件外部的资源。

3. $(document).ready和window.onload绑定方法不同

$(document).ready可以多次绑定，而window.onload只能绑定一次。$(document).ready函数可以绑定多次，每次DOM结构处理完毕之后都会被执行；而window.onload只能绑定一次，第二次绑定就会覆盖掉第一次，引起冲突。

$(document).ready(function () {
    console.log("我会被执行多次");
});
$(document).ready(function () {
    console.log("我也会被执行多次");
});

window.onload = function () {
    console.log("我只会执行一次");
};

三、$(document).ready的优点

$(document).ready的应用很广泛，具有如下优点：

1. 加快页面渲染速度

因为$(document).ready只等到DOM结构加载完毕就开始执行，所以它比window.onload更快。

2. 增加交互体验

$(document).ready的另一个优点就是可以增加交互体验。在没有使用$(document).ready的情况下，当JS操作了一个还没加载完的元素的时候，就会抛出异常，从而导致JS调试工作难度加大。但是使用了$(document).ready函数之后，页面中的元素就都被加载完毕，这就避免了上述情况所带来的麻烦

3. 简化操作代码

使用$(document).ready，可以大大简化操作代码。在没有使用$(document).ready的情况下，无论在何处书写代码，都会在文档中寻找元素实例句柄以进行操作。但是使用$(document).ready之后，代码都放在该函数中。不仅使代码更加整洁，而且执行效率更高。

$(document).ready(function () {
    $("button").click(function () {
        $("p").hide();
    });
});

四、$(document).ready最佳实践

下面列举几个$(document).ready的最佳实践：

1. 保证语句正确

在使用$(document).ready函数时，一定要确保语句的正确性。如果有遗漏，则可能造成页面无法动态加载，甚至导致死锁。可以采用相应的语法检查工具来确保代码的正确性。

$(document).ready(function () {
    $("button").click(function () {
        $("p").hide()
    }
});

2. 减少DOM操作数量

在使用$(document).ready函数的过程中，尽量避免DOM操作的频繁发生，可以减少代码的消耗，提高页面性能响应速度。

$(document).ready(function () {
    var myvalue;
    for (var i = 0; i < 1000; i++) {
        myvalue += i;
    }
    $("#output-value").html(myvalue);
});

3. 优化选择器

合理优化选择器可以极大地提升页面渲染速度和响应速度，减少DOM操作。

$(document).ready(function () {
    $("input[name='name']").val("Tom");
});

4. 增强可读性

在使用$(document).ready函数时，可以通过如下方式增强代码的可读性：

对于复杂的回调函数，可以考虑单独声明一个函数，然后作为参数传递到$(document).ready中；
对于大型代码，可以将代码分割成模块，提高可读性；
使用注释来解释代码的用途，提高可读性。

$(document).ready(function () {
    function submitForm() {
        // some validation
        if (isValid()) {
            $("form").submit();
        }
    }

    function isValid() {
        // some validation code
    }

    $("#submit-button").click(function () {
        submitForm();
    });
});

总结

$(document).ready函数是操作DOM结构，提高页面渲染速度，增加交互体验，简化操作代码的有力工具。而且，只要合理实践，遵守最佳使用方法，就能够完美完成各种需求。

原创文章，作者：TSMLH，如若转载，请注明出处：https://www.506064.com/n/371695.html