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中搜索$('#template')元素20次？ 还是库/引擎足够智能以存储指针？

而且，我们要去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方法通常将原始选择作为返回值返回，这可以非常优雅地简化代码。