JavaScript的窗口之间有什么区别。onload和jQuery的$(document).ready()方法?
当前回答
当你说$(document).ready(f)时，你告诉脚本引擎做以下事情:
获取对象文档并推送它，因为它不在本地范围内，它必须执行哈希表查找来查找文档的位置，幸运的是，文档是全局绑定的，所以这是一个单一的查找。 找到对象$并选择它，因为它不在本地范围内，它必须进行哈希表查找，这可能有冲突，也可能没有冲突。 在全局作用域中找到对象f，这是另一个哈希表查找，或者push函数对象并初始化它。 调用所选对象的ready，这涉及到对所选对象的另一个哈希表查找，以找到方法并调用它。 完成了。
在最好的情况下，这是2次哈希表查找，但这忽略了jQuery所做的繁重工作，其中$是jQuery所有可能输入的厨子，因此可能有另一个映射将查询分派给正确的处理程序。
或者，你可以这样做:
window.onload = function() {...}
这将
在全局范围内找到对象窗口，如果JavaScript是优化的，它会知道因为窗口没有改变，它已经有了选择的对象，所以什么都不需要做。 函数对象被压入操作数堆栈。 通过查找哈希表来检查onload是否是一个属性，因为它是，所以它像函数一样被调用。
在最好的情况下，这只需要查找一次哈希表，这是必要的，因为必须获取onload。
理想情况下，jQuery会将它们的查询编译为字符串，这些字符串可以被粘贴来做你想要jQuery做的事情，但没有jQuery的运行时分派。通过这种方式，您可以任选其一
像我们今天做的那样动态分派jquery。 让jQuery编译你的查询纯JavaScript字符串，可以传递给eval做你想要的。 将2的结果直接复制到代码中，并跳过eval的代价。
其他回答
在Internet Explorer中使用$(document).ready()需要注意。如果一个HTTP请求在整个文档加载之前被中断(例如，当一个页面流到浏览器时，另一个链接被单击)IE将触发$(document)。准备好活动。
如果$(document).ready()事件中的任何代码引用DOM对象，则存在找不到这些对象的可能性，并且可能发生Javascript错误。要么保护对这些对象的引用，要么将引用这些对象的代码延迟到窗口。负载的事件。
我无法在其他浏览器(特别是Chrome和Firefox)中重现此问题
$(document).ready()是一个jQuery事件，发生在HTML文档完全加载时，而窗口。Onload事件稍后发生，当页面上的所有内容(包括图像)都加载时。
窗口。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;
};
我还创建了下面的图像作为两者的快速参考:
当页面上的所有内容(包括DOM(文档对象模型)内容和异步JavaScript、框架和图像)完全加载时，Windows加载事件将触发。你也可以使用body onload=。两者都是一样的;窗口。Onload = function(){} and <body Onload ="func();>是使用同一事件的不同方式。
jQuery文档。就绪函数事件执行的时间比窗口稍早。onload，在页面上加载DOM(文档对象模型)时调用。它不会等待图像、帧完全加载。
摘自以下文章: $document.ready()与window.onload()的区别
有一件事要记住(或者我应该说要记住)，你不能像准备好了一样叠在一起。换句话说，jQuery神奇地允许在同一个页面上有多个readys，但是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 */
});
窗口。onload是由DOM api提供的，它说“加载事件在给定资源加载时触发”。
"加载事件在文档加载过程结束时触发。此时，文档中的所有对象都在DOM中，所有图像、脚本、链接和子帧都已完成加载。” DOM onload
但是在jQuery中，$(document).ready()只会在页面文档对象模型(DOM)准备好执行JavaScript代码时运行。这并不包括图像，脚本，iframes等jquery就绪事件
因此jquery ready方法将在dom onload事件之前运行。
