我将所有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事件?
好问题。
整个“页面底部的放置脚本”建议及其尝试解决的问题都有些混乱。对于这个问题,我不会谈论在页面底部放置脚本是否会影响性能/加载时间。我只说说是否还需要$(document).ready在页面底部放置脚本 。
$(document).ready
我假设您在那些立即在脚本中调用的函数中引用了DOM(任何简单的方法如documentordocument.getElementById)。我还假设您仅在询问这些[DOM-referencing]文件。IOW,库脚本或您的DOM引用代码所需的脚本(如jQuery)需要放在页面的前面。
document
document.getElementById
要回答您的问题 :如果您在页面底部添加了DOM引用脚本,则不需要$(document).ready。
说明 : 没有"onload"像$(document).ready拇指法则这样的相关实现的帮助,是:与页面内的DOM元素交互的任何代码都应比其所引用的元素放置/包含在页面的下方。最简单的方法是将该代码放在结束之前</body>。看到这里和这里。它也可以解决IE令人恐惧的“操作中止”错误。
"onload"
</body>
话虽如此,但这绝不会使的使用无效$(document).ready。在加载对象之前引用对象是从DOM JavaScript开始时最常犯的错误之一(见证了很多次以至于无法计算)。这是jQuery的解决方案,它不需要您考虑与该脚本所引用的DOM元素有关的位置。对于开发人员来说,这是一个巨大的胜利。他们要做的只是减少一件事。
另外,将所有DOM引用脚本移到页面底部通常很困难或不切实际(例如,发出document.write呼叫的任何脚本都必须保留)。有时,您使用的是呈现某些模板或创建动态JavaScript的框架,其中引用了需要在js 之前 包含的功能。
document.write
最后,它曾经是将所有DOM引用代码塞入其中的“最佳实践”window.onload,但是由于文档原因,它已被$(document).ready实现掩盖了。
window.onload
所有这些加起来$(document).ready是对过早引用DOM元素的问题的一种优越,实用和通用的解决方案。