作为一名前端开发者，了解HTML加载事件处理程序至关重要。在加载HTML文档时，有四个关键事件处理程序：async、defer、ready和onload。它们在脚本加载和页面可用性方面发挥着不同的作用。
1. async
async属性允许脚本在下载的同时并行执行。这意味着脚本可以立即开始加载和执行，而无需等待文档解析完毕。它在加载非关键脚本时很有用，这些脚本不需要阻塞页面渲染。
优点：
- 提高页面的响应速度。
- 并行加载多个脚本，而不影响页面渲染。
缺点：
- 脚本执行顺序不可控，可能导致意外的结果。
- 不适用于需要顺序执行的脚本。
2. defer
defer属性也允许脚本在文档解析后延迟执行，但与async不同，它保证了脚本按照它们出现的顺序执行。这意味着这些脚本会在文档加载后立即加载，但在页面呈现之前执行。它适用于不需要阻塞页面渲染但需要按照特定顺序执行的脚本。
优点：
- 加载脚本不会阻塞页面渲染。
- 确保脚本按照预期顺序执行。
缺点：
- 脚本执行仍然会延迟页面的可用性。
- 对于需要立即执行的脚本不适用。
3. ready
ready事件处理程序在文档的DOM树构建完毕后触发。它允许脚本在页面加载之前访问和操作DOM元素。这对于在页面加载后立即执行功能至关重要，例如隐藏加载指示器或显示内容。
优点：
- 允许在页面加载之前操作DOM。
- 在页面可用之前执行关键功能。
缺点：
- 不会阻塞页面渲染。
- 仅适用于文档的DOM树构建完毕后的操作。
4. onload
onload事件处理程序在整个页面及其所有资源（包括图像、脚本和样式表）完全加载后触发。它允许脚本在所有内容可用后执行操作，例如跟踪页面加载时间或启动分析脚本。
优点：
- 所有页面资源加载完毕后触发。
- 用于跟踪页面加载时间和其他页面可用性指标。
缺点：
- 阻塞页面渲染，直到所有资源加载完毕。
- 对于需要在页面完全加载之前执行的操作不适用。
使用场景
- async：非关键脚本，不需要顺序执行，需要立即执行。
- defer：需要按照特定顺序执行的脚本，不需要阻塞页面渲染。
- ready：在页面加载之前需要访问和操作DOM元素。
- onload：在页面及其所有资源完全加载后需要执行的操作。
总结
async、defer、ready和onload事件处理程序提供了在不同页面加载阶段执行脚本的灵活性。了解它们的差异对于优化页面性能和确保页面可用性至关重要。通过明智地选择正确的处理程序，您可以创建具有高响应能力和可用性的Web应用程序。
在日常Web开发中，为了提高网页加载性能，我们经常需要管理脚本的加载和执行。在这方面，HTML提供了async、defer、ready和onload这四个属性，它们可以让我们控制脚本的加载和执行时机，从而优化网页的性能。本文将详细阐述这四个属性之间的区别，帮助你更好地理解和使用它们。
1. async
async属性用于异步加载脚本，这意味着脚本将与页面其他部分并行加载。当脚本加载完成后，它将立即执行，而不会等待页面其他元素加载完成。
应用场景：
- 需要立即执行的脚本，例如分析或广告脚本。
- 不依赖页面其他元素的脚本。
优点：
- 异步加载，不会阻塞页面渲染。
- 可以提高脚本执行速度。
缺点：
- 可能会破坏脚本执行顺序。
- 可能导致页面显示不一致。
2. defer
defer属性也是用于异步加载脚本，但与async属性不同，它会推迟脚本的执行，直到页面文档对象模型（DOM）加载完成。也就是说，脚本将在页面其他内容加载完毕后执行。
应用场景：
- 需要在页面加载完成后执行的脚本，例如表单验证或页面交互脚本。
- 不影响页面渲染顺序的脚本。
优点：
- 与async属性类似，异步加载不会阻塞页面渲染。
- 保证了脚本执行顺序，避免了潜在的错误。
缺点：
- 比async属性执行脚本稍慢。
- 只有浏览器支持DOM事件时才可用。
3. ready
ready事件是在DOM加载完成后触发的，它表示页面已经可以与其内容进行交互，但可能仍有一些资源，例如图像或样式表，仍在加载中。
应用场景：
- 当DOM加载完成后需要执行特定的动作，例如绑定事件处理程序或显示元素。
优点：
- 保证了脚本在所有DOM元素可用后执行。
- 可以在DOM加载完成后立即执行代码。
缺点：
- 可能比onload事件稍慢。
- 可能会错过页面加载期间发生的某些事件。
4. onload
onload事件是在页面及其所有资源（包括图像、样式表和其他脚本）加载完成后触发的。它是页面加载生命周期中最晚的事件。
应用场景：
- 当所有页面资源加载完成后需要执行特定的动作，例如跟踪页面加载时间或显示页面结束标志。
优点：
- 确保所有页面资源都已加载完成后才执行代码。
缺点：
- 比其他事件执行速度最慢。
- 不能保证脚本执行的顺序。
总结
async、defer、ready和onload属性为我们提供了灵活的方式来控制脚本的加载和执行，从而优化网页的性能。通过理解这些属性之间的区别，我们可以根据具体需要选择最合适的属性，以提高脚本的执行效率和页面加载速度。
异步加载模式：async
- async是HTML5中引入的属性，用于异步加载脚本。
- 当标记了async时，浏览器会在解析HTML时立即加载该脚本，并立即执行。
- 这意味着脚本不会阻塞页面的渲染，即使脚本本身需要很长时间加载。
- 缺点是，async脚本的执行顺序是不可预测的，因为它依赖于脚本的加载时间。
延迟加载模式：defer
- defer是HTML4中的属性，也用于延迟加载脚本。
- 与async不同，defer脚本会在DOM加载完成（所有HTML内容解析完成）后才开始加载和执行。
- 优点是，defer脚本的执行顺序是确定的，并且不会阻塞页面的渲染。
DOM加载事件：ready
- ready事件在DOM加载完成后触发，此时页面中的所有HTML元素和DOM节点都已解析完毕。
- 可以使用jQuery的$(document).ready()或原生JavaScript的document.addEventListener(‘DOMContentLoaded’)来监听ready事件。
- 在ready事件发生后，可以安全地操作DOM元素和执行脚本，因为此时页面结构已经加载完成。
页面加载完成事件：onload
- onload事件在整个页面（包括图像、样式表和iframe）加载完成后触发。
- 可以使用window.onload事件处理程序来监听onload事件。
- onload事件发生得最晚，因为它等待所有外部资源都加载完毕。
使用场景：
- 需要立即执行的脚本：使用async
- 需要延迟执行的脚本，且执行顺序不重要：使用defer
- 需要在DOM加载完成后执行的脚本或操作：监听ready事件
- 需要在整个页面加载完成后执行的脚本或操作：监听onload事件
以下是一个使用场景示例：
- 导航栏脚本：可以使用async加载，因为它需要在页面渲染之前执行，以实现导航功能。
- 分析脚本：可以使用defer加载，因为它不需要立即执行，而且执行顺序不重要。
- 内容加载脚本：可以在ready事件发生后执行，以确保DOM结构已加载完成。
- 广告脚本：可以在onload事件发生后执行，以确保整个页面都已加载，包括图像和广告。
需要注意的是：
- async和defer只能用于外部脚本，不能用于内嵌脚本。
- async和defer会在加载脚本后立即执行，而ready和onload是在相应的事件触发后执行。
- 对于关键脚本，建议使用defer而不是async，以确保执行顺序。
- 对于非关键脚本，可以使用async以加快页面加载速度。
