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

小编典典

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

javascript

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

var SomeNamepsace = {};

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

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

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

但是，当我删除ready函数并直接调用方法时，所有工作原理都相同，但是执行起来明显更快—在一个漂亮的基本文件上，几乎快了一秒钟！由于应该在此时加载文档（因为所有标记都在script标记之前），是否有充分的理由仍然使用ready事件？

阅读 401

2020-05-01

共1个答案

小编典典

好问题。

整个“页面底部的放置脚本”建议及其尝试解决的问题都有些混乱。对于这个问题，我不会谈论在页面底部放置脚本是否会影响性能/加载时间。我只说说是否还需要$(document).ready在页面底部放置脚本 。

我假设您在那些立即在脚本中调用的函数中引用了DOM（任何简单的方法如documentordocument.getElementById）。我还假设您仅在询问这些[DOM-referencing]文件。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元素的问题的一种优越，实用和通用的解决方案。

2020-05-01