细说document.ready和window.onload

document.ready是jQuery提供的一个函数，用于在文档加载完成后执行一些代码。它相当于JavaScript中的window.onload，但有一些区别。

1. 执行时机：

• document.ready：在DOM树构建完成后即可执行，不需要等待外部资源（如图片）加载完成。

• window.onload：需要等待页面的所有资源加载完成后才能执行，包括外部资源和图片等。

2. 代码书写：

• document.ready：使用jQuery库中的函数，代码可以直接写在一个回调函数中。

• window.onload：需要在JavaScript中使用事件监听的方式来写，或者在HTML中直接调用一个函数。

3. 多次调用：

• document.ready：可以多次调用，每次调用都会将新的函数添加到执行队列中。

• window.onload：只能在页面加载时调用一次，多次调用会覆盖之前的事件。

4. 兼容性：

• document.ready：依赖于jQuery库，只能在引入了jQuery库的页面中使用。

• window.onload：原生JavaScript事件，几乎在所有浏览器中都可以使用。

5. 执行顺序：

• document.ready：多个document.ready函数会按照调用顺序依次执行。

• window.onload：多个window.onload函数会按照调用顺序依次执行。

总的来说，document.ready更适合在DOM加载完成后执行一些操作，比如绑定事件、修改DOM元素等。而window.onload更适合在页面所有资源加载完成后执行一些操作，比如初始化一些需要依赖资源的组件、发送网络请求等。