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的代价。
其他回答
窗口。onload:普通的JavaScript事件。
文档。ready:整个HTML加载完成时的特定jQuery事件。
有一件事要记住(或者我应该说要记住),你不能像准备好了一样叠在一起。换句话说,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 */
});
在Internet Explorer中使用$(document).ready()需要注意。如果一个HTTP请求在整个文档加载之前被中断(例如,当一个页面流到浏览器时,另一个链接被单击)IE将触发$(document)。准备好活动。
如果$(document).ready()事件中的任何代码引用DOM对象,则存在找不到这些对象的可能性,并且可能发生Javascript错误。要么保护对这些对象的引用,要么将引用这些对象的代码延迟到窗口。负载的事件。
我无法在其他浏览器(特别是Chrome和Firefox)中重现此问题
窗口。onload是JavaScript内置函数。窗口。当HTML页面加载时,onload触发器。窗口。Onload只能写入一次。
文档。ready是jQuery库的一个函数。文档。ready在HTML文件中包含的HTML和所有JavaScript代码、CSS和图像完全加载时触发。 文档。Ready可以根据需要写多次。
时间过得真快,现在是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>