window.onload和$(document).ready()的区别

需要记住的一件事（或者说是回忆起来的）是无法像使用ready那样堆叠多个onload。换句话说，jQuery魔法允许在同一页上有多个ready，但你不能用onload这样做。

最后一个onload会覆盖之前的任何onload。

处理这个问题的一种好方法是使用由Simon Willison编写并在使用多个JavaScript Onload函数中描述的函数。

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代码中引用时触发，但内容不一定已加载。当HTML文档加载完毕时，Document.ready执行。

$(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");
});

当HTML文档已加载完成时，会触发document.ready事件；而当所有内容（包括图片等）都已加载完成时，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 等。

IMPORTANT: 同步脚本会暂停 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内置函数，当HTML页面加载时触发。 window.onload只能写一次。

document.ready是jQuery库的一个函数，当HTML和所有JavaScript代码、CSS和包含在HTML文件中的图像完全加载时触发。document.ready可以根据需要多次编写。

1. 获取文档对象并推入堆栈，因为它不在本地作用域中，所以必须进行哈希表查找以找到文档的位置，幸运的是，文档是全局绑定的，因此只需要一次查找。
2. 查找并选择对象$，因为它不在本地作用域中，所以必须进行哈希表查找，可能会有碰撞。
3. 在全局作用域中查找对象f，这是另一个哈希表查找，或者推送函数对象并初始化它。
4. 调用选定对象的ready方法，这涉及对选定对象进行另一个哈希表查找以查找方法并调用它。
5. 完成。

window.onload = function() {...}

这将会

1. 在全局范围内找到对象窗口，如果JavaScript被优化，它将知道由于窗口没有改变，已经选择了对象，因此不需要进行任何操作。
2. 函数对象被推送到操作数栈上。
3. 通过哈希表查找检查onload是否是属性，既然是属性，就像调用函数一样调用。

在最好的情况下，这只需花费一个哈希表查找，这是必要的，因为必须获取onload。

理想情况下，jQuery会将他们的查询编译成可以粘贴的字符串，以执行您想要的jQuery操作，但不需要运行时分派jQuery。这样，您就有以下选项：

1. 像今天一样动态调度jquery。
2. 让jQuery将您的查询编译为纯JavaScript字符串，可以传递给eval来执行您想要的操作。
3. 直接复制第2步的结果到您的代码中，并跳过eval的成本。

window.onload是由DOM API提供的，它表示“当给定资源已加载时，加载事件将触发”。

“加载事件在文档加载过程的末尾触发。此时，文档中的所有对象都在DOM中，并且所有图像、脚本、链接和子框架都已完成加载。”DOM onload

但是，在jQuery中，$(document).ready()只有在页面文档对象模型（DOM）准备好执行JavaScript代码时才会运行。这不包括图像、脚本、iframes等。jquery ready event

因此，jquery ready方法将比DOM onload事件更早运行。