html中的async、defer、ready、onload有什么区别

html中的async、defer、ready、onload的区别是：当使用 async 属性时，浏览器会异步加载和执行脚本，使用 defer 属性时，浏览器会延迟执行脚本，直到HTML文档解析完成；ready 事件通常与jQuery库一起使用，用于检测DOM（文档对象模型）的加载状态。

一、html中的async、defer、ready、onload的区别

在HTML中，async、defer、ready 和 onload 都是用于控制JavaScript脚本加载和执行时机的属性或事件。

1、async 属性

async 是一个可选属性，可应用于<script>标签。当使用 async 属性时，浏览器会异步加载和执行脚本，这意味着脚本的加载和执行不会阻塞HTML解析。当脚本加载完成后，浏览器会立即执行它，而不管它在HTML文档中的位置。需要注意的是，由于 async 脚本是立即执行的，因此无法保证它们的执行顺序。

2、defer 属性

defer 同样是一个可选属性，适用于<script>标签。使用 defer 属性时，浏览器会延迟执行脚本，直到HTML文档解析完成。defer 脚本会按照在HTML文档中出现的顺序执行。因此，如果有多个依赖关系的脚本，可以使用 defer 属性来确保它们按照预期顺序执行。

3、ready 事件

ready 事件通常与jQuery库一起使用，用于检测DOM（文档对象模型）的加载状态。当DOM结构加载完成时（即使相关资源如图片尚未加载），ready 事件会触发。这使得开发人员能够在DOM元素可用时立即执行一些操作，而无需等待整个页面加载完成。

4、onload 事件

onload 事件用于检测整个页面（包括所有资源如图片、样式表等）的加载状态。当页面及其所有资源加载完成时，onload 事件会触发。通常，onload 事件用于在页面加载完成后执行一些操作，如初始化脚本或加载额外的内容。