时间过得真快，现在是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>

当你说$(document).ready(f)时，你告诉脚本引擎做以下事情:

获取对象文档并推送它，因为它不在本地范围内，它必须执行哈希表查找来查找文档的位置，幸运的是，文档是全局绑定的，所以这是一个单一的查找。 找到对象$并选择它，因为它不在本地范围内，它必须进行哈希表查找，这可能有冲突，也可能没有冲突。 在全局作用域中找到对象f，这是另一个哈希表查找，或者push函数对象并初始化它。 调用所选对象的ready，这涉及到对所选对象的另一个哈希表查找，以找到方法并调用它。 完成了。

在最好的情况下，这是2次哈希表查找，但这忽略了jQuery所做的繁重工作，其中$是jQuery所有可能输入的厨子，因此可能有另一个映射将查询分派给正确的处理程序。

或者，你可以这样做:

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

这将

在全局范围内找到对象窗口，如果JavaScript是优化的，它会知道因为窗口没有改变，它已经有了选择的对象，所以什么都不需要做。 函数对象被压入操作数堆栈。 通过查找哈希表来检查onload是否是一个属性，因为它是，所以它像函数一样被调用。

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

理想情况下，jQuery会将它们的查询编译为字符串，这些字符串可以被粘贴来做你想要jQuery做的事情，但没有jQuery的运行时分派。通过这种方式，您可以任选其一

像我们今天做的那样动态分派jquery。 让jQuery编译你的查询纯JavaScript字符串，可以传递给eval做你想要的。 将2的结果直接复制到代码中，并跳过eval的代价。

窗口。onload是内置的JavaScript事件，但是由于它的实现在浏览器(Firefox、Internet Explorer 6、Internet Explorer 8和Opera)上有一些微妙的特点，jQuery提供了文档。ready，它将这些抽象出来，并在页面的DOM准备好后立即触发(不等待图像等)。

美元(文档)。准备(注意，这不是文档。ready(未定义)是一个jQuery函数，包装并提供以下事件的一致性:

DOMContentLoaded -一个新的事件，当文档的DOM加载时触发(这可能是在图像等加载之前的一段时间);同样，在ie浏览器和世界其他地方略有不同 和窗口。Onload(即使在旧浏览器中也实现了)，当整个页面加载(图像，样式等)时触发。

在Internet Explorer中使用$(document).ready()需要注意。如果一个HTTP请求在整个文档加载之前被中断(例如，当一个页面流到浏览器时，另一个链接被单击)IE将触发$(document)。准备好活动。

如果$(document).ready()事件中的任何代码引用DOM对象，则存在找不到这些对象的可能性，并且可能发生Javascript错误。要么保护对这些对象的引用，要么将引用这些对象的代码延迟到窗口。负载的事件。

我无法在其他浏览器(特别是Chrome和Firefox)中重现此问题

窗口。onload:普通的JavaScript事件。

文档。ready:整个HTML加载完成时的特定jQuery事件。

窗口。onload是由DOM api提供的，它说“加载事件在给定资源加载时触发”。

"加载事件在文档加载过程结束时触发。此时，文档中的所有对象都在DOM中，所有图像、脚本、链接和子帧都已完成加载。” DOM onload

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

因此jquery ready方法将在dom onload事件之前运行。