jQuery 或原始 JavaScript 是否预编译或缓存变量表达式或选择器？

Question

非常基本的问题。

我想知道 jQuery 或原始 JavaScript 是否足够聪明，可以预编译，或者在函数或选择器中缓存变量表达式，如果没有，是否有任何理由阻止他们这样做？

例如

$('#whatever').on('click', function(){
    $('#template').click();
});

var n = 0;

for(var i = 0; i < 20; i++){
    n = 1 + 1;
    $('#whatever').click();
}

console.log(n);

我们是否要在 dom 中搜索 20 次 $('#template') 元素？或者库/引擎是否足够智能以存储指针？

而且，我们是要 1+1 计算机 2 次，还是该表达式被缓存或预编译？

---

显然，这些都是非常愚蠢的例子，但他们明白了重点。

是的，没有人会（希望）在他们的代码中包含 n = 1 + 1 这一行。

我们可以将代码更改为 `var template = $('#template');在点击处理程序之前，如果它本身不处理它，但我想知道我们/为什么我们必须这样做？

Answer 1

首先，jQuery 是 javascript。 jQuery 没有也不能将特性添加到 JavaScript 作为一种语言。

话虽如此，JavaScript 是 ECMAScript，并且在每个浏览器中的实现方式也不同。我很难（如果不是不可能的话）告诉你 JavaScript 实现的缓存级别，因为作为一种语言，没有任何规定的行为。

我认为出于性能原因缓存对 DOM 元素的引用是有意义的，但我无法说明每个单独的实现在幕后做了什么。

就 jQuery 而言，据我所知，当前版本中没有发生神奇的选择器缓存。每次调用$(...) 时，它都必须重新评估选择器。选择器可以是简单的 css 样式选择器，例如$('#foo .bar baz')，或者它可能是一个元素片段，例如$('<div>foo bar baz</div>').

如果 jQuery 函数传递了一个选择器，它必须重新检查 DOM，因为可能已经添加了可以匹配选择器的新元素，或者现有元素可能已经更改为不再匹配选择器。

就缓存 jQuery 对象而言，保存对 jQuery 对象的引用是很常见的，并且在某些情况下性能更高。确定哪种方法更好的唯一方法是使用性能分析器运行脚本并查看瓶颈在哪里。没有理由仅仅假设以一种特定的方式编写代码会提高代码的性能。

如果您只是想对同一个选择执行一系列操作，请务必利用 jQuery 的方法链：

$('.selector').addClass('foo').removeClass('bar').click(function () {...});

jQuery 方法通常将原始选择作为返回值返回，这样可以非常优雅地简化代码。