Javascript 搜索范围与访问DOM-速度性能

我正在学习javaScript，还有很多疑问。我已经试过搜索这个，但可能我用错了词。我总是拖延这一点，但由于我的项目规模越来越大，我需要澄清

我知道搜索范围和访问Dom的速度都会带来成本。但我不知道哪一个比另一个慢

是不是更快

a）要进入作用域链以获取带有jQuery对象的变量，但只需进入Dom一次

或

b）不要进入范围链，但是再次进入Dom

var $el = $("#el");

//$el is used on this scope (and so, the question makes some sense:))

$el (...)

// some or lot's of code

function a() {

   // some or lot's of code

   function b(){

      // some or lot's of code

      function c() {

         a) $el (...)
         b) var $el = $("#el");
            $el (...)

      }

  }

}

选择A更快。（在顶部声明变量）

当您需要

$（“#el”）

时，请将其存储为变量。多次使用DOM很慢

---

Greg Franko解释了一些最佳实践。请参见幻灯片10-13了解您的问题。

虽然您的问题非常不清楚，但也许我可以用一般的经验法则来回答：

---

DOM很慢。如果可以避免遍历它，请这样做。如果搜索DOM以查找特定节点，请将该引用存储在变量中，以避免再次搜索DOM。

如果我理解了您的问题，您是在询问jQuery中的性能访问元素。这里有一些提示：

• 每次您必须获取对jQuery对象的引用（在您的示例中为$（“#el”）都会产生操作成本。就性能而言，您应该始终尝试根据您的需要声明最少的必要元素

• 如果只用于一些操作，那么访问同级（sibbins（）、父级（closest（）、parent（））或子级（children（）、find（））是一个不错的选择，但是如果要多次使用该元素，最好使用直接选择器，如$（“#el child”）或（#el.child”）来引用它们

• 如果您声明一个变量，比如$el=$（“#el”），您将获得节点当前状态下的引用。有时，这个节点已经被更新、删除、重新创建或其他东西，而这个引用不会保留它们，所以你必须再次调用这个$el=$（“#el”），所以，正如我前面所说，这取决于你的网站逻辑如何工作

---

注意：很抱歉我的英语不好，我知道它一点也不好，呵呵

真的不清楚你在问什么，或者你担心什么。如果你能给出一个真实的例子，而不是这个抽象的逻辑，可能会更好。你的问题不是很清楚，但总的来说：访问变量很快，调用函数来搜索DOM中的某些内容是很慢的。将DOM元素赋给变量一次要比重复赋给变量好。@Rorymcrossan因为这更像是一个理论问题，我只是试图抓住怀疑的本质。但也许你是对的。@Barmar谢谢你，但假设我有100个变量访问DOM。我可以在第一个范围内定义它们吗？即仅使用第一个作用域访问DOM。这是一种好的做法吗？这就是我正在做的，但我从来没有见过这样写的代码。谢谢：）只是为了消除所有的疑虑。我可以使用第一个作用域访问DOM，想象一下，预先定义所有DOM变量，然后始终访问所有函数中的那些变量？这是一个好的实践吗？理论上，但它不太可能像那样工作。您经常会操作DOM，因此某些元素可能还不存在，或者您可能会删除存储引用的元素。如果你想优化，只需要得到你需要的。如果需要多次访问某个元素，请在变量中存储对该元素的引用。另外请注意，通常使用全局变量并不好，因此事先获取所有元素有其折衷之处。谢谢你的建议：）它们将是我的指南。谢谢：）只是为了消除所有疑虑。假设我有100个访问DOM的变量。我可以使用第一个作用域预先定义所有这些“DOM变量”，然后始终访问所有函数中的这些变量？这是一个好的实践吗？是的，当访问DOM元素超过1次时，您应该为它声明一个变量。谢谢：）您的第三点非常重要。我知道这一点。为了消除我的疑虑，使用您的建议，尽可能多次访问DOM，并使用以前的访问创建新变量，假设我有100个变量从DOM中获取元素。在这种情况下，我可以在第一个作用域中定义所有变量，然后在函数内部访问这些变量，而无需再次访问DOM。这是一种好的做法吗？在我的项目中，我只在第一个作用域中访问DOM，但是变量列表变得越来越大，我从来没有见过这样的代码：）如果我必须访问100个元素，我会将类似define的内容设置为null，并且在您第一次访问它时定义它（你可以做一个函数来检查并赋值给一个参数，比如

$el=checkAndAssign（$el，'selector'）；

是这样的函数：

函数checkAndAssign（var，selector）{return var！==null？var:$（'selector'）}）

，但正如我所说，如果引用被更新，你必须小心；）