jQuery:如果页面底部有外部 JS,为什么要使用 document.ready?

IT技术 javascript jquery html
2021-01-15 05:54:09

我将我所有的 JS 作为外部文件包含在页面的最底部。在这些文件中,我定义了几个方法,我从 ready 事件调用它们:

var SomeNamepsace = {};

SomeNamepsace.firstMethod = function () {
    // do something
};

SomeNamepsace.secondMethod = function () {
    // do something else
};

$(document).ready(function () {
    SomeNamepsace.firstMethod();
    SomeNamepsace.secondMethod();
});

然而,当我删除 ready 函数并直接调用方法时,一切都一样,但执行速度明显更快——在一个非常基本的文件上几乎快了一整秒!由于此时应该加载文档(因为所有标记都在脚本标记之前),是否还有充分的理由继续使用就绪事件?

1个回答

很好的问题。

整个“将脚本放在页面底部”建议及其试图解决的问题存在一些混淆。对于这个问题,我不会谈论将脚本放在页面底部是否会影响性能/加载时间。我只说$(document).ready 如果你也把脚本放在页面底部,你是否需要

我假设您在脚本中立即调用的那些函数中引用了 DOM(任何像document一样简单的东西document.getElementById)。我还假设您只询问这些 [DOM 引用] 文件。IOW、库脚本或 DOM 引用代码所需的脚本(如 jQuery)需要放在页面的较早位置。

回答您的问题:如果您在页面底部包含 DOM 引用脚本,则不,您不需要$(document).ready.

说明没有"onload"相关实现的帮助,$(document).ready经验法则是:与页面内的 DOM 元素交互的任何代码都应该放置/包含在页面下方而不是它引用的元素。最简单的方法是将该代码放在结束之前</body>请参阅此处此处它还可以解决 IE 可怕的“操作中止”错误

话虽如此,这绝不会使$(document).ready. 在加载之前引用对象是在 DOM JavaScript 中开始时最常见的错误[之一](见证它的次数太多了,数不过来)。它是 jQuery 对问题的解决方案,它不需要您考虑相对于它引用的 DOM 元素,该脚本将包含在何处。这对开发人员来说是一个巨大的胜利。这只是他们需要考虑的少一件事。

此外,将所有引用 DOM 的脚本移动到页面底部通常很困难或不切实际(例如,任何发出document.write调用的脚本都必须保持原状)。其他时候,您正在使用一个框架来呈现一些模板或创建动态 javascript 片段,其中引用需要在 js之前包含的函数

最后,它曾经是“最佳实践”,以堵塞所有DOM引用代码到window.onload,但它已被掩盖$(document).ready了实现良好的文档的原因

所有这些加起来$(document).ready是解决过早引用 DOM 元素问题的一个非常优越、实用和通用的解决方案。

“如果您在页面底部包含引用 DOM 的脚本,不,您不需要 $(document).ready。”忽略您稍后在帖子中解决的 document.write 问题,这个答案做出了一个天真的假设在运行 javascript 之前下载和处理所有 CSS。这可能不是真的。浏览器可以并行下载外部文件。
2021-03-14 05:54:09
不完全正确,如果您defer准备好任何脚本文档,将确保它们在准备好的代码之前执行。见:w3.org/TR/html5/the-end.html#the-end
2021-04-10 05:54:09