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方法通常將原始選擇作為返回值返回，這可以非常優雅地簡化代碼。