window.onload 与 $(document).ready()
JavaScript 的 window.onload 和 jQuery 的 $(document).ready() 方法有什么区别？
$().ready() 的方式有时会在 window.onload 之后触发。
$(window).on('load', function(){}); 是 jQuery 的 window.onload 等价物
ready 事件在 HTML 文档加载后发生，而 onload 事件在稍后发生，此时所有内容（例如图像）也已加载。
onload 事件是 DOM 中的标准事件，而 ready 事件是 jQuery 特有的。 ready 事件的目的是它应该在文档加载后尽早发生，以便向页面中的元素添加功能的代码不必等待所有内容加载。
window.onload 是内置的 JavaScript 事件，但由于它的实现在浏览器（Firefox、Internet Explorer 6、Internet Explorer 8 和 Opera）之间存在微妙怪癖，因此 jQuery 提供document.ready，它将这些抽象出来，并在页面的 DOM 准备好后立即触发（不等待图像等）。
$(document).ready（注意它是 not document.ready，它是未定义的）是一个 jQuery 函数，包装并为以下事件提供 一致性：
document.ondomcontentready / document.ondomcontentloaded - 加载文档的 DOM 时触发的新事件（可能在加载图像等之前的一段时间）；同样，在 Internet Explorer 和世界其他地方略有不同
和 window.onload （即使在旧浏览器中也可以实现），它会在整个页面加载（图像、样式等）时触发
window 的 load 事件在浏览器中以合理一致的方式实现。 jQuery 和其他库试图解决的问题是您提到的问题，即 load 事件直到所有依赖资源（例如图像和样式表）都加载后才会触发，这可能是 DOM 加载后的很长时间完全加载、渲染并准备好进行交互。当 DOM 准备好时在大多数浏览器中触发的事件称为 DOMContentLoaded，而不是 DOMContentReady。
onload（FF/IE/Opera 存在差异）。至于DOMContentLoaded，你是完全正确的。编辑澄清。
document.onload 是可用的）。就 window.onload 而言：window.onload = fn1;window.onload=fn2; - 只有 fn2 会在加载时被调用。一些免费的虚拟主机将他们自己的代码插入到文档中，有时这会破坏页面内的代码。
$(document).ready() 是一个 jQuery 事件。 JQuery 的 $(document).ready() 方法在 DOM 准备好后立即被调用（这意味着浏览器已经解析了 HTML 并构建了 DOM 树）。这使您可以在文档准备好进行操作时立即运行代码。
例如，如果浏览器支持 DOMContentLoaded 事件（正如许多非 IE 浏览器所做的那样），那么它将触发该事件。 （请注意，DOMContentLoaded 事件仅在 IE9+ 中添加到 IE。）
为此可以使用两种语法：
$( document ).ready(function() {
console.log( "ready!" );
});
或速记版本：
$(function() {
console.log( "ready!" );
});
$(document).ready()的要点：
它不会等待图像被加载。
用于在 DOM 完全加载时执行 JavaScript。将事件处理程序放在这里。
可以多次使用。
当您收到“$ 未定义”时，将 $ 替换为 jQuery。
如果您想处理图像，则不使用。改用 $(window).load() 。
window.onload() 是一个原生 JavaScript 函数。当页面上的所有内容（包括 DOM（文档对象模型）、横幅广告和图像）加载完毕时，会触发 window.onload() 事件。两者之间的另一个区别是，虽然我们可以有多个 $(document).ready() 函数，但我们只能有一个 onload 函数。
当页面上的所有内容（包括 DOM（文档对象模型）内容和 异步 JavaScript、框架和图像强>。你也可以使用body onload=。两者都是一样的； window.onload = function(){} 和 <body onload="func();"> 是使用同一事件的不同方式。
jQuery $document.ready 函数事件比 window.onload 稍早执行，并在页面上加载 DOM（文档对象模型）后调用。它不会等待图像、帧完全加载。
摘自以下文章：how $document.ready() is different from window.onload()
一个小提示：
总是使用 window.addEventListener 将事件添加到窗口。因为这样您就可以在不同的事件处理程序中执行代码。
正确代码：
window.addEventListener('load', function () { alert('Hello!') }) window.addEventListener('load', function () { alert('Bye!') })
无效的代码：
window.onload = function () { alert('Hello!') // 不行！！！ } window.onload = function () { alert('Bye!') }
这是因为 onload 只是被覆盖的对象的属性。
与 addEventListener 类比，最好使用 $(document).ready() 而不是 onload。
$(document).ready(function() { // 当 HTML 文档被加载并且 DOM 准备好时执行 alert("Document is ready"); }); // .load() 方法从 jQuery 1.8 开始不推荐使用 $(window).on("load", function() { // 当整个页面完全加载时执行，包括 // 所有框架、对象和图像 alert("Window已加载"); });
$(document).ready() 是一个 jQuery 事件，在 HTML 文档完全加载时发生，而 window.onload 事件在页面上的所有内容（包括图像）加载后发生。
window.onload 也是 DOM 中的纯 javascript 事件，而 $(document).ready() 事件是 jQuery 中的方法。
$(document).ready() 通常是 jQuery 的包装器，以确保所有加载的元素都可以在 jQuery 中使用...
查看 jQuery 源代码以了解它是如何工作的：
jQuery.ready.promise = function( obj ) {
if ( !readyList ) {
readyList = jQuery.Deferred();
// Catch cases where $(document).ready() is called after the browser event has already occurred.
// we once tried to use readyState "interactive" here, but it caused issues like the one
// discovered by ChrisS here: http://bugs.jquery.com/ticket/12282#comment:15
if ( document.readyState === "complete" ) {
// Handle it asynchronously to allow scripts the opportunity to delay ready
setTimeout( jQuery.ready );
// Standards-based browsers support DOMContentLoaded
} else if ( document.addEventListener ) {
// Use the handy event callback
document.addEventListener( "DOMContentLoaded", completed, false );
// A fallback to window.onload, that will always work
window.addEventListener( "load", completed, false );
// If IE event model is used
} else {
// Ensure firing before onload, maybe late but safe also for iframes
document.attachEvent( "onreadystatechange", completed );
// A fallback to window.onload, that will always work
window.attachEvent( "onload", completed );
// If IE and not a frame
// continually check to see if the document is ready
var top = false;
try {
top = window.frameElement == null && document.documentElement;
} catch(e) {}
if ( top && top.doScroll ) {
(function doScrollCheck() {
if ( !jQuery.isReady ) {
try {
// Use the trick by Diego Perini
// http://javascript.nwbox.com/IEContentLoaded/
top.doScroll("left");
} catch(e) {
return setTimeout( doScrollCheck, 50 );
}
// detach all dom ready events
detach();
// and execute any waiting functions
jQuery.ready();
}
})();
}
}
}
return readyList.promise( obj );
};
jQuery.fn.ready = function( fn ) {
// Add the callback
jQuery.ready.promise().done( fn );
return this;
};
我还创建了下面的图像作为两者的快速参考：
https://i.stack.imgur.com/ys1tK.png
关于将 $(document).ready() 与 Internet Explorer 一起使用的注意事项。如果在加载整个文档之前中断了 HTTP 请求（例如，当页面流式传输到浏览器时，单击了另一个链接）IE 将触发 $(document).ready 事件。
如果 $(document).ready() 事件中的任何代码引用 DOM 对象，则可能找不到这些对象，并且可能会发生 Javascript 错误。要么保护您对这些对象的引用，要么将引用这些对象的代码推迟到 window.load 事件。
我无法在其他浏览器（特别是 Chrome 和 Firefox）中重现此问题
活动
$(document).on('ready', handler) 绑定到来自 jQuery 的 ready 事件。 在加载 DOM 时调用处理程序。 图片等资产可能仍然丢失。如果文档在绑定时准备好，它将永远不会被调用。 jQuery 为此使用 DOMContentLoaded-Event，如果不可用则模拟它。
$(document).on('load', handler) 是从服务器加载所有资源后将触发的事件。图像已加载。 onload 是原始 HTML 事件，而 ready 是由 jQuery 构建的。
功能
$(document).ready(handler) 实际上是一个 promise。 如果在调用时文档准备就绪，将立即调用处理程序。 否则它会绑定到 ready-Event。
Before jQuery 1.8、$(document).load(handler) 作为 $(document).on('load',handler) 的别名存在。
延伸阅读
时机
关于功能就绪
一个例子
承诺
移除的事件别名
$.fn.load 感到困惑。事实上，它从 jquery 1.8 开始就已经过时了。我相应地更新了它
window.onload：一个普通的 JavaScript 事件。
document.ready：加载整个 HTML 时的特定 jQuery 事件。
要记住的一件事（或者我应该说回忆）是您不能像使用 ready 那样堆叠 onload。换言之，jQuery 魔术允许在同一页面上使用多个 ready，但您不能使用 onload 来做到这一点。
最后的 onload 将取代之前的任何 onload。
处理这个问题的一个好方法是使用一个显然由 Simon Willison 编写并在 Using Multiple JavaScript Onload Functions 中描述的函数。
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
}
else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
// Example use:
addLoadEvent(nameOfSomeFunctionToRunOnPageLoad);
addLoadEvent(function() {
/* More code to run on page load */
});
Document.ready（一个 jQuery 事件）将在所有元素就位时触发，并且可以在 JavaScript 代码中引用它们，但不一定会加载内容。 Document.ready 在加载 HTML 文档时执行。
$(document).ready(function() {
// Code to be executed
alert("Document is ready");
});
但是，window.load 将等待页面完全加载。这包括内部框架、图像等。
$(window).load(function() {
//Fires when the page is loaded completely
alert("window is loaded");
});
document.ready 事件在 HTML 文档已加载时发生，而 window.onload 事件总是在所有内容（图像等）已加载时发生。
如果您想在渲染过程中“早期”干预，您可以使用 document.ready 事件，而无需等待图像加载。如果您需要在脚本“执行某些操作”之前准备好图像（或任何其他“内容”），则需要等到 window.onload。
例如，如果您正在实施“幻灯片放映”模式，并且需要根据图像大小执行计算，则可能需要等到 window.onload。否则，您可能会遇到一些随机问题，具体取决于图像的加载速度。您的脚本将与加载图像的线程同时运行。如果您的脚本足够长，或者服务器足够快，那么您可能不会注意到问题，如果图像恰好及时到达。但最安全的做法是允许加载图像。
document.ready 可能是一个不错的事件，您可以向用户显示一些“正在加载...”标志，并且在 window.onload 上，您可以完成任何需要加载资源的脚本，然后最终删除“正在加载...”符号。
例子 ：-
// document ready events
$(document).ready(function(){
alert("document is ready..");
})
// using JQuery
$(function(){
alert("document is ready..");
})
// window on load event
function myFunction(){
alert("window is loaded..");
}
window.onload = myFunction;
时光荏苒，现在是 ECMAScript 2021，IE11 被越来越少的人使用。相比之下，最多的两个事件是 load 和 DOMContentLoaded。
DOMContentLoaded 在初始 HTML 文档完全加载并解析后触发。
load 在 DOMContentLoaded 和整个页面加载后触发，等待所有相关资源完成加载。资源示例：脚本、样式表、图像和 iframe 等。
重要提示：同步脚本将暂停 DOM 解析。
这两个事件都可以用来确定 DOM 是否可以使用。举些例子：
<script>
// DOM hasn't been completely parsed
document.body; // null
window.addEventListener('DOMContentLoaded', () => {
// Now safely manipulate DOM
document.querySelector('#id');
document.body.appendChild();
});
/**
* Should be used only to detect a fully-loaded page.
*
* If you just want to manipulate DOM safely, `DOMContentLoaded` is better.
*/
window.addEventListener('load', () => {
// Safely manipulate DOM too
document.links;
});
</script>
window.onload 是 JavaScript 内置函数。 window.onload 在 HTML 页面加载时触发。 window.onload 只能写入一次。
document.ready 是 jQuery 库的一个函数。 document.ready 在 HTML 和 HTML 文件中包含的所有 JavaScript 代码、CSS 和图像完全加载时触发。 document.ready可根据需要多次写入。
当您说 $(document).ready(f) 时，您告诉脚本引擎执行以下操作：
获取对象文档并推送它，因为它不在本地范围内，它必须进行哈希表查找以查找文档在哪里，幸运的是文档是全局绑定的，因此它是单个查找。找到对象 $ 并选择它，因为它不在本地范围内，它必须进行哈希表查找，这可能有也可能没有冲突。在全局范围内查找对象 f，这是另一个哈希表查找，或者推送函数对象并对其进行初始化。 call ready of selected object，这涉及到另一个哈希表查找所选对象以找到方法并调用它。完毕。
在最好的情况下，这是 2 个哈希表查找，但这忽略了 jQuery 完成的繁重工作，其中 $ 是 jQuery 的所有可能输入的厨房接收器，因此可能会有另一个映射将查询分派到正确的处理程序.
或者，您可以这样做：
window.onload = function() {...}
这将
在全局范围内找到对象window，如果对JavaScript进行了优化，它就会知道由于window没有改变，它已经有了选择的对象，所以什么都不需要做。函数对象被压入操作数堆栈。通过进行哈希表查找来检查 onload 是否是属性，因为它是，所以它被称为函数。
在最好的情况下，这会花费一次哈希表查找，这是必要的，因为必须获取 onload。
理想情况下，jQuery 会将它们的查询编译为字符串，这些字符串可以粘贴来执行您希望 jQuery 执行的操作，但无需 jQuery 的运行时分派。这样你就可以选择
像我们今天做的那样动态调度 jquery。让 jQuery 将您的查询编译为纯 JavaScript 字符串，该字符串可以传递给 eval 以执行您想要的操作。将 2 的结果直接复制到您的代码中，并跳过 eval 的成本。
window.onload 由 DOM api 提供，它表示“加载给定资源时触发加载事件”。
"加载事件在文档加载过程结束时触发。此时，文档中的所有对象都在 DOM 中，并且所有的图像、脚本、链接和子框架都有加载完毕。” DOM onload
但是在 jQuery 中 $(document).ready() 只会在页面文档对象模型 (DOM) 准备好执行 JavaScript 代码时运行。这不包括图片、脚本、iframe 等。jquery ready event
所以 jquery ready 方法会比 dom onload 事件更早运行。
DOMContentLoaded不会。因此，在异步加载外部脚本时，文档 jquery 就绪处理程序非常有用DOMContentLoaded（如果存在）或readystatechanged（对于 IE）的 js 函数：github.com/dperini/ContentLoaded/blob/master/src/… 所以大概这就是实现 jQuery 的ready.onload这样的事件。onload是存储触发load事件时要调用的函数的对象属性的名称。