Question

非常基本的问题。

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

e.g。

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

var n = 0;

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

console.log(n);

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

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

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

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

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

Answer 1

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

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

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

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

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

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

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

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

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

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

1 个答案: