JavaScript window.onload 事件和 jQuery ready 函数有何不同？
参考回答
window.onload事件和jQuery的$(document).ready()函数都用于在页面加载完成后执行代码，但它们有一些重要的不同点：
window.onload：- 触发时机：
window.onload会等到页面的所有内容，包括图片、样式表、脚本等资源加载完毕后才触发。 - 执行顺序：页面所有资源（包括图片等媒体）加载完成后执行，因此会比较慢，尤其是在有大量资源的情况下。
- 多次绑定：
window.onload只允许一个事件处理函数，如果绑定多个事件处理程序，后一个会覆盖前一个。
- 触发时机：
$(document).ready()：- 触发时机：
$(document).ready()在DOM（文档对象模型）完成加载和解析后立即触发，但不需要等图片和其他媒体文件加载完成。 - 执行顺序：它比
window.onload更早执行，因此用于确保DOM元素已经加载并可操作，通常用于绑定事件或进行DOM操作。 - 多次绑定：
$(document).ready()允许绑定多个事件处理函数，不会覆盖之前的处理程序。
- 触发时机：
详细讲解与拓展
window.onload的行为：window.onload事件会等到页面中的所有资源（如图片、CSS、脚本等）都加载完成后才执行。这意味着，如果页面包含大型图片或者其他资源，window.onload的执行会被延迟。代码会在所有资源都加载完成后执行，包括浏览器窗口的所有内容和外部资源（例如图片、视频等）。
示例：
window.onload = function() { alert("所有资源都加载完成！"); };缺点：由于
window.onload需要等到所有资源都加载完成，特别是在有大量大图片或复杂资源时，可能会导致延迟执行。-
$(document).ready()的行为：$(document).ready()函数会在DOM元素解析完毕后立即执行，而不需要等待图片、视频等媒体资源加载完成。它保证代码会在HTML结构加载完成后尽快执行，这对于操作DOM元素、绑定事件或初始化页面元素非常重要。
示例：
$(document).ready(function() { alert("DOM已经加载完成！"); });优点：
$(document).ready()会在DOM加载完成后快速执行，通常比window.onload更早，因此可以更快地开始对页面元素的操作。 -
多次事件绑定：
window.onload：如果绑定多个事件处理程序，后面绑定的会覆盖前面的，导致只有最后一个事件处理程序会被执行。
window.onload = function() { console.log("事件处理程序1"); }; window.onload = function() { console.log("事件处理程序2"); }; // 只会输出 "事件处理程序2"
$(document).ready()：可以多次绑定事件处理程序，多个ready()函数都会被执行，而不会互相覆盖。$(document).ready(function() { console.log("事件处理程序1"); }); $(document).ready(function() { console.log("事件处理程序2"); }); // 会依次输出 "事件处理程序1" 和 "事件处理程序2"
- 兼容性：
window.onload是原生JavaScript事件，所有现代浏览器都支持。$(document).ready()是jQuery的特性，依赖于jQuery库。它在所有常见浏览器中都兼容，但需要确保页面已经加载了jQuery库。
$(window).load()与window.onload：$(window).load()方法（在jQuery 1.3到1.8中使用）类似于window.onload，会等到所有资源（图片等）加载完毕后才执行。但从jQuery 3.0开始，$(window).load()被废弃，不推荐使用。
总结
window.onload：当页面的所有资源（包括图片、样式表、脚本等）加载完成后才会执行，适用于需要确保所有资源都加载完毕的情况。但它只允许一个处理函数，且会较慢执行，尤其是页面资源较多时。-
$(document).ready()：当DOM加载完成后立即执行，不会等到图片等资源加载完成，适用于需要尽早操作DOM元素的场景。支持多次事件绑定，且执行较快。
一般情况下，推荐使用$(document).ready()，因为它可以在DOM加载完毕后尽早执行代码，特别是在操作DOM和绑定事件时更加高效。