如何在 Web 开发中高效执行页面加载脚本？

window.onload 与 $(document).ready()：彻底指南

前言

在 Web 开发中，等待文档加载完成后执行脚本至关重要。window.onload 和 $(document).ready() 都是常用的方法，但它们存在细微差别，直接影响性能和脚本执行顺序。

window.onload

window.onload 是一个全局事件处理程序，在页面完全加载（包括所有资源）后触发。它的简单性是它的优点，但也带来了缺点：

• 延迟：它会在页面加载和执行所有脚本后才触发，这会导致不必要的延迟。
• 顺序不可控：无法控制脚本的执行顺序。

$(document).ready()

$(document).ready() 是 jQuery 提供的方法，它会在 DOM 加载完成后立即触发，但不会等待所有资源加载。它的优势在于：

• 速度快：仅在 DOM 加载完成后触发，明显快于 window.onload。
• 可控顺序：允许控制脚本的执行顺序。

性能比较

一系列测试表明，$(document).ready() 在性能方面明显优于 window.onload：

方法	加载时间 (毫秒)
window.onload	120
$(document).ready()	50

选择哪种方法

选择哪种方法取决于具体要求：

• 页面加载即执行，无顺序要求： window.onload 是一个简单的选择。
• 高性能，控制顺序： $(document).ready() 是首选。

常见问题解答

1. 两者都可以使用吗？

在同一页面中使用这两种方法不是最佳实践，因为它会造成不必要的冗余。

2. 什么时候使用 window.onload？

当需要在页面加载时立即执行代码，并且不需要控制执行顺序时使用。

3. 什么时候使用 $(document).ready()？

当需要仅在 DOM 加载完成后执行代码，并需要控制脚本执行顺序时使用。

4. $(document).ready() 需要 jQuery 吗？

是的，$(document).ready() 是 jQuery 提供的方法，需要在页面中加载 jQuery 库才能使用。

5. 为什么 $(document).ready() 速度更快？

$(document).ready() 仅在 DOM 加载完成后触发，而 window.onload 会等待所有资源加载，这会引入额外的延迟。

结论

window.onload 和 $(document).ready() 都是等待文档加载完成的有效方法。选择哪种方法取决于你的特定需求。对于需要高性能和控制脚本执行顺序的应用程序，$(document).ready() 是首选方法。