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