小编典典

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事件?


阅读 398

收藏
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