Question

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

var SomeNamepsace = {};

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

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

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

然而，当我删除ready函数并直接调用方法时，一切都运行相同，但执行速度明显更快 - 在一个非常基本的文件上几乎快一秒！由于此时应加载文档（因为所有标记都出现在脚本标记之前），是否还有充分的理由继续使用ready事件？

Answer 1

很棒的问题。

围绕整个“在页面底部放置脚本”的建议以及它试图解决的问题存在一些混淆。对于这个问题，我不打算讨论是否在页面底部放置脚本会影响性能/加载时间。如果您还将脚本放在页面底部，我只会谈论您是否需要$(document).ready 。

我假设您在脚本中立即调用的那些函数中引用了DOM（任何简单的document或document.getElementById）。我还假设你只询问这些[DOM-referencing]文件。 IOW，DOM引用代码所需的库脚本或脚本（如jQuery）需要放在页面的前面。

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

解释：没有 "onload"的帮助 - 与$(document).ready相关的实现，经验法则是：任何与DOM元素交互的代码在页面内应该放置/包含在页面下方而不是它引用的元素。最简单的方法是在结束</body>之前放置该代码。请参阅here和here。它也适用于IE的可怕"Operation aborted" error。

话虽如此，这绝不会使$(document).ready的使用无效。在加载对象之前引用一个对象是在DOM JavaScript中开始时最常见的错误之一（见证了它太多次计算）。它是jQuery的问题解决方案，它不需要你考虑这个脚本相对于它引用的DOM元素的位置。这对开发者来说是一个巨大的胜利。这只是他们不得不考虑的一件事。

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

最后，将所有DOM引用代码插入window.onload过去是“最佳做法”，但$(document).ready的{{1}}实现已使其黯然失色。

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

jQuery：如果在页面底部使用外部JS，为什么要使用document.ready？

1 个答案: