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

我包括我所有的JS作为外部文件,加载在页面的最底部。 在这些文件中,我有几个方法定义如下,我从ready事件中调用:

var SomeNamepsace = {}; SomeNamepsace.firstMethod = function () { // do something }; SomeNamepsace.secondMethod = function () { // do something else }; $(document).ready(function () { SomeNamepsace.firstMethod(); SomeNamepsace.secondMethod(); }); 

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

伟大的问题。

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

我假设你在脚本中直接调用的那些函数中引用DOM(与document一样简单)。 我还假设你只询问这些[DOM-referencing]文件。 IOW,您的DOM引用代码需要的库脚本或脚本(如jQuery)需要放在页面的较早部分。

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

说明如果没有像“ $(document).ready "onload"这样的"onload"相关实现的帮助,那么经验法则是:任何与页面内的DOM元素交互的代码都应该放置在页面的下方, 。 最简单的方法是在closures</body>之前放置该代码。 看到这里和这里 。 它也适用于IE的可怕的“操作中止”错误 。

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

另外,将所有DOM引用脚本移动到页面底部通常是困难的或不切实际的(例如,任何发出document.write调用的脚本都必须保持放置)。 其他时候,你正在使用一个框架来呈现一些模板或创build一些dynamic的JavaScript,其中引用函数,需要包括 js 之前

最后,过去是将所有DOM引用代码都embedded到window.onload “最佳实践”,但是由于文档上的原因 ,它已经被$(document).ready实现所淹没。

所有这些加起来就像$(document).ready一样,是过早引用DOM元素的一个更优越,实用和通用的解决scheme。