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

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

var SomeNamepsace = {};

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

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

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

但是,当我删除ready函数并直接调用方法时,一切都运行相同,但执行速度明显更快 - 在一个非常基本的文件上几乎快一秒! 由于此时应该加载文档(因为所有标记都出现在脚本标记之前),还有什么理由仍然使用ready事件吗?

restlessdesign asked 2019-09-10T02:52:05Z
1个解决方案
115 votes

好问题。

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

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

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

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

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

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

最后,它曾经是“最佳实践”,将所有DOM引用代码堵塞到$(document).ready中,但出于文档原因,它已被$(document).ready实现黯然失色。

所有这些加起来就是$(document).ready,它是一个非常优越,实用且通用的解决方案,可以过早地引用DOM元素。

Crescent Fresh answered 2019-09-10T02:53:14Z
translate from https://stackoverflow.com:/questions/1438883/jquery-why-use-document-ready-if-external-js-at-bottom-of-page