jQuery：如果在页面底部使用外部JS，为什么要使用document.ready？ [英] jQuery: Why use document.ready if external JS at bottom of page?

问题描述

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

  var SomeNamepsace = {}; 
 
 SomeNamepsace.firstMethod = function（）{
 //做某事
}; 
 
 SomeNamepsace.secondMethod = function（）{
 //做别的事
}; 
 
 $（document）.ready（function（）{
 SomeNamepsace.firstMethod（）; 
 SomeNamepsace.secondMethod（）; 
}）; 
  

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

解决方案

很好的问题。

在整个把脚本放在页面底部的建议和什么问题上存在一些困惑）它试图解决。对于这个问题，我不会谈论将脚本放在页面底部是否会影响性能/加载时间。如果您还将脚本放在页面的底部，我只会讨论是否需要 $（document）.ready 。 p>

我假定您在脚本中立即调用的那些函数中引用DOM（任何简单的 document 或 document.getElementById ）。我还假设你只询问这些[DOM引用]文件。 IOW，您的DOM引用代码需要的库脚本或脚本（如jQuery）需要放置在页面的较早部分。

回答您的问题

strong>：如果您在页面底部包含DOM引用脚本，则不需要 $（document）.ready 。

>相关的实现，如 $（document）.ready 经验法则是：与页面内的DOM元素交互的任何代码都应放置/包含在页面的更下方比它引用的元素。最简单的方法是在关闭< / body> 之前放置该代码。请参阅此处和这里。它也适用于IE的令人畏惧的操作中止错误。

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



另外，将所有DOM引用脚本移动到页面底部通常很困难或不切实际（例如，任何发布文档的脚本）。写调用必须保持）。其他时候，你正在使用一个框架来呈现一些模板或者创建一些动态的JavaScript，在这些框架中需要包含 之前的引用函数。

最后，它曾被称为最佳实践，将所有DOM引用代码都嵌入到 window.onload 中，但它被 $（document）.ready 执行良好的文档原因。

所有这些加起来高于 $（document）.ready 通用的解决方案太早引用DOM元素。

I am including all of my JS as external files that are loaded at the very bottom of the page. Within these files, I have several methods defined like so, which I call from the ready event:

var SomeNamepsace = {};

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

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

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

However, when I remove the ready function and call the methods straight-up, everything works just the same, but executes significantly faster—almost a whole second faster on a pretty basic file! Since the document should be loaded at this point (as all the markup comes before the script tags), is there any good reason to still be using the ready event?

解决方案

Great question.

There is some confusion around the whole "put scripts at the bottom of your page" advice and what problem(s) it attempts to solve. For this question I am not going to talk about whether putting scripts at the bottom of the page affects performance/loadtimes or not. I am only going to talk about whether you need $(document).ready if you also put scripts at the bottom of the page.

I'm assuming you are referencing the DOM in those functions you are immediately invoking in your scripts (anything as simple as document or document.getElementById). I'm also assuming you are asking only about these [DOM-referencing] files. IOW, library scripts or scripts that your DOM-referencing code requires (like jQuery) need to be placed earlier in the page.

To answer your question: if you include your DOM-referencing scripts at the bottom of the page, No, you do not need $(document).ready.

Explanation: without the aid of "onload"-related implementations like $(document).ready the rule of thumb is: any code that interacts with DOM elements within the page should to be placed/included further down the page than the elements it references. The easiest thing to do is to place that code before the closing </body>. See here and here. It also works around IE's dreaded "Operation aborted" error.

Having said that, this by no means invalidates the use of $(document).ready. Referencing an object before it has been loaded is [one of] the most common mistakes made when beginning in DOM JavaScript (witnessed it too many times to count). It is jQuery's solution to the problem, and it doesn't require you to have to think about where this script will be included relative to the DOM elements it references. This is a huge win for developers. It's just one less thing they have to think about.

Also, it's often difficult or impractical to move all DOM-referencing scripts to the bottom of the page (for example any script that issues document.write calls have to stay put). Other times, you are using a framework that renders some template or creates pieces of dynamic javascript, within which references functions that need to be included before the js.

Finally, it used to be "best practice" to jam all DOM-referencing code into window.onload, however it has been eclipsed by $(document).ready implementations for well document reasons.

All this adds up to $(document).ready as a far superior, practical and general solution to the problem of referencing DOM elements too early.

这篇关于jQuery：如果在页面底部使用外部JS，为什么要使用document.ready？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！