$() 与 document.ready()

Jquery document.ready() 以及 window.onload 理解

[TOC]

## 1. document.ready()

document.ready() 用于在文档加载完成后执行特定的函数。因此，在功能上，它们没有显著的区别。它们都确保了在执行其中的代码之前，整个 HTML 文档已经被完全加载和解析（DOM树构建结束）。

document.ready() 实际上是 jQuery 中的一个方法，用于绑定一个函数到 `DOMContentLoaded` 事件上。当 HTML 文档被完全加载和解析完成后（不包括样式表、图像和子框架的完成加载），就会触发这个事件。

### 1.1. 语法糖

$(function () {}) 是 jQuery 的简写形式，等价于 $(document).ready(function () {}) 当你将函数作为参数传递给 `$` 函数时，jQuery 会自动将其绑定到 `document.ready` 事件上。

### 1.2. document.ready()的生命周期

至于它们的生命周期，可以简单地理解为：

1. 当浏览器开始加载一个页面时，它会首先解析 HTML 文档。

2. 在解析过程中，如果遇到 `<script>` 标签，并且该标签没有设置 `async` 或 `defer` 属性，那么浏览器会立即执行该脚本。如果脚本依赖于尚未完全加载的 DOM 元素，那么可能会出现错误。

3. 当 HTML 文档被完全加载和解析完成后，会触发 `DOMContentLoaded` 事件。此时，所有的 DOM 元素都已经可用，但可能还有一些资源（如样式表、图像等）尚未完全加载。

4. 如果你在这个时候使用 `$(function () {})` 或 `document.ready()`，那么绑定的函数会被执行。这确保了你的代码在尝试访问或操作 DOM 元素时不会出现问题。

5. 最后，当页面上的所有资源（包括样式表、图像等）都加载完成后，会触发 `load` 事件。但通常我们不需要等待所有资源都加载完成才执行代码，所以 `$(function () {})` 和 `document.ready()` 就足够了。

总的来说，`$(function () {})` 和 `document.ready()` 在 jQuery 中是等价的，它们都用于在文档加载完成后执行特定的函数，确保你的代码在访问或操作 DOM 元素时不会出现问题。它们的生命周期与 HTML 文档的加载和解析过程紧密相关。

### 1.3. 针对引用文件说明

文本此小节的引用文件指的是通过`<script>` 和 `<link>` 标签引用的js脚本和样式，`<script>` 和 `<link>` 标签实际上是 DOM 结构的一部分。当你解析 HTML 文档时，浏览器会创建一个 DOM（文档对象模型），这个模型是一个树形结构，包含了文档中的所有元素，包括 `<script>` 和 `<link>` 标签。

然而，`<script>` 标签的加载和执行行为与其他 DOM 元素有所不同。当浏览器遇到 `<script>` 标签时，默认情况下会立即下载并执行该脚本，这可能会导致页面的渲染被阻塞，直到脚本执行完毕。这种行为可以通过设置 `<script>` 标签的 `async` 或 `defer` 属性来改变。

对于 `<link>` 标签，它通常用于加载 CSS 样式表。浏览器会下载这些样式表，并在需要时应用到 DOM 元素上。虽然样式表的加载不会影响 DOM 结构的创建，但它可能会影响到页面的渲染，因为浏览器需要等待样式表加载完成才能正确地渲染页面。

关于 `$(function () {})` 或 `$(document).ready()`，它们确保绑定的函数在 DOM 完全加载后执行，但并不意味着所有的 `<script>` 标签都加载和执行完成了。这些函数只关心 DOM 结构是否准备好，而不关心外部资源（如通过 `<script>` 标签加载的 JavaScript 文件）是否加载和执行完毕。如果 `<script>` 标签中的代码依赖于 `$(document).ready()` 内部的逻辑，并且这些 `<script>` 标签在 `$(document).ready()` 调用之前就已经开始执行，那么可能会出现问题。

因此，虽然 `<script>` 和 `<link>` 标签是 DOM 结构的一部分，但它们的加载和执行行为可能与其他 DOM 元素有所不同，而且不一定会在 `$(document).ready()` 执行之前完成。如果你需要确保某个特定的 `<script>` 标签加载并执行完成后再执行某些代码，你可能需要使用其他方法，比如回调函数、Promise 或其他异步处理技术。

## 2. window.onload

window.onload 在 jquery 中存在，它是的当整个页面（包括所有框架、图像、样式表以及其他资源）完成加载时，会触发 window.onload 事件，它的基本使用方法如下：

```js
window.onload = function(){
   // 代码块
}
// 上面的代码在js原生中应该写成监听load事件的方式
window.addEventListener('load', function() {
    // 页面加载完成后的处理逻辑
});
```

### 2.1. 使用场景

+ 初始化页面上的交互组件，如轮播图、菜单等。

+ 调整布局大小或位置，尤其是依赖于图片或其他动态内容加载后的尺寸计算。

+ 执行一些依赖于完整 DOM 结构和所有资源加载的脚本，比如初始化图表、地图渲染等。

+ 避免在文档未加载完全时执行可能导致错误或无效操作的脚本。

### 2.2. 注意事项

+ 单一事件处理：如果直接给 window.onload 赋值新的函数，那么原有的事件处理程序将会被替换而不是追加。

+ 执行顺序：window.onload 通常比 DOMContentLoaded 事件稍晚触发，因为它等待的是所有内容加载完成，包括图片和其他外部资源，这可能会导致用户界面响应较慢。

+ 异步加载：随着现代 Web 开发趋势，越来越多的内容采用异步加载，这时可能需要配合其他更精细的生命周期钩子或者 Promise 机制来确保代码在合适的时候执行。

+ 跨浏览器兼容性：对于早期的 Internet Explorer（IE），可能需要使用 window.attachEvent 方法来添加事件监听器：

```Javascript
if (window.attachEvent) { // IE8及更早版本
    window.attachEvent('onload', function() {
        // ...
    });
} else if (window.addEventListener) { // 其他现代浏览器
    window.addEventListener('load', function() {
        // ...
    }, false);
}
```

+ 避免阻塞：将大量初始化逻辑放在 window.onload 中可能会延迟页面可交互的时间，因此应尽量优化这些代码，只包含必须等到页面完全加载后才能执行的逻辑。对于那些不依赖页面所有资源加载的逻辑，可以考虑使用 DOMContentLoaded 事件。

> 注意：非资源类的元素（div，span）本身是没有onload事件的，onload事件是window对象的事件，它监听所有资源是是否加载完成，例如img标签就可以使用onload事件来监听图片是否加载渲染完毕
```js
<img src="your-image-url.jpg" onload="imageLoaded(event)">
<script>
function imageLoaded(event) {
  // 图片加载完成后执行的代码
  var imgElement = event.target;
  console.log('Image loaded successfully!');
  // 可以在这里获取图片的尺寸、执行动画、修改样式等等
}
</script>
```

### 2.3. document.ready() 与 window.onload 的区别