jQuery中document与window以及load与ready区别详解

window与document对象的区别

熟悉JavaScript开发的开发者通常了解window对象和document对象，也知晓load事件与ready事件的概念。作者原本自认为对这些概念理解透彻，但近期在实际开发中遇到的问题表明，这些知识点的实际应用比想象中更为复杂。

从直观层面来看，window对象代表浏览器窗口本身，而document对象则代表窗口内加载的DOM元素。从层级关系上进一步分析，document是window的一个属性，而window则是最高层级的对象。

两者的主要区别在于高度表现。假设浏览器中加载的页面内容很长，超出了一屏显示范围并出现滚动条，此时$(window).height()与$(document).height()的值是不相等的。由于window窗口的大小固定，document的高度通常会大于window的高度。具体表现可参考相关图示。

load事件与ready事件的机制对比

接下来讨论load事件与ready事件，此处特指jQuery提供的事件处理方法。

首先分析load事件，它主要用于替代原生的window.onload，但仅适用于以下两种特定场景：

第一种场景是在window对象上，例如代码$(window).load(fn);。

第二种场景是在带有URL资源的元素上，包括images、scripts、frames和iframes，例如代码$(“img”).load(fn);。

除了上述两种情况，其他任何元素都不具备load事件。例如，尝试执行$(document).load(fn);属于错误写法，该代码不会执行。

load事件的触发条件是页面完全加载完成。这不仅仅指DOM结构加载完毕，还包括所有链接引用的资源（如图片）全部加载结束。如果页面包含大量图片，必须等待每一张图片都加载完成后，load事件才会触发。

最关键的一点是，jQuery官方文档明确指出load事件的跨浏览器兼容性较差（It doesn't work consistently nor reliably cross-browser）。经测试验证，谷歌浏览器仅支持$(window).load(fn);，而火狐浏览器则同时支持$(window).load(fn);和$(“img”).load(fn);。

因此，除非有不可替代的特殊需求，否则强烈建议不要使用load事件。

最后讨论ready事件，该事件可以绑定到任意元素上，例如$(window).ready(fn);、$(document).ready(fn);或$(“div”).ready(fn);等。

ready事件的触发不要求页面完全加载，只要DOM结构加载完毕即可触发。

ready事件允许同时注册多个回调函数，执行时严格按照注册的先后顺序进行。需要注意的是，即使注册的是不同元素的ready事件，依然遵循先注册先执行的顺序。以下代码示例展示了这一机制：

$(window).ready(function(){
alert("window");
});
$(document).ready(function(){
alert("document");
});
$("div").ready(function(){
alert("div");
});

按照常规逻辑，div元素可能最先加载完成，因此可能会认为alert("div");会最先执行，随后才是alert("document");或alert("window");。然而实际情况是，alert("div");反而是最后执行的。这表明，无论是否在同一个元素上注册ready事件，回调函数的执行顺序始终取决于注册的先后顺序。

此外，ready事件与window.onload（或<body onload=””>）存在冲突。如果同时使用了window.onload（或<body onload=””>），将导致ready事件无法执行。

最佳实践建议

经过上述详细分析，最终结论是：$(document).ready(fn);在兼容性和安全性方面表现最佳。若有此类需求，应优先采用这种方式。