原生Jquery選擇器VS緩存object.find（）

我的其他程序員，我失去了我的想法。我關注了JS性能方面的許多書籍，並且他們都在說，最好是將DOM對象緩存以備將來參考和管理，而不是創建新的Jquery對象。這聽起來很合理。但現在我的信仰在顫抖。我試圖在我的公司開發代碼約定，我正想從一個性能角度來解決這個問題。我有一段代碼如下：原生Jquery選擇器VS緩存object.find（）

 $("#registratorType").attr("readonly", "readonly"); 
     $("#registratorType").attr("size", "25"); 
     $("#id").attr("readonly", "readonly"); 
     $("#id").attr("size", "25"); 
     $("#serial").attr("readonly", "readonly"); 
     $("#serial").attr("size", "25"); 
     $("#duration").attr("size", "25"); 
     $("#stoppingDuration").attr("size", "25"); 
     $("#speeddata").removeAttr("disabled");

它不是整個事情，但我認爲，你已經有了這個想法。我將獲得所有這些表單並將其包裝在緩存的參考中。

var $form = $('#vehicleProfile'); 
    $form.find("#registratorType").attr("readonly", "readonly"); 
    $form.find("#registratorType").attr("size", "25"); 
    $form.find("#id").attr("readonly", "readonly"); 
    $form.find("#id").attr("size", "25"); 
    $form.find("#serial").attr("readonly", "readonly"); 
    $form.find("#serial").attr("size", "25"); 
    $form.find("#duration").attr("size", "25"); 
    $form.find("#stoppingDuration").attr("size", "25"); 
    $form.find("#speeddata").removeAttr("disabled");

我已經測試了最新的chrome中的性能，並且感到震驚！我的方法失敗了3-4次。我的意思是我的功能運行在42毫秒，而老的是12-14毫秒。對我的方法有沒有真正的價值？我的方法是反模式嗎？請幫幫我！

來源

2013-02-06 user1929437

這不是「緩存參考」的含義。 – Bergi

我認爲在'find（）'中使用ID選擇器是無用的，你應該做的就像var'$ registratorType = $（'#registratorType'）; [']' –

緩存_finds_ like'var registratorType = $（「#registratorType」）;'然後使用'registratorType.attr（）'作爲'registratorType'變量是一個jQuery對象 – andyb

由於所有的選擇器都是id選擇器，所以它們相當快（document.getElementById是O(1)表查找）。但是，將它們限制爲使用find()的某個父元素，則需要進行DOM樹搜索，這是明顯的減速。

「緩存未來引用的DOM對象」意味着您永遠不會應用相同的選擇器兩次。做一次，並將其存儲在一個變量中（就像您使用$form一樣）。因此，而不是

$("#id").attr("readonly", "readonly"); 
    $("#id").attr("size", "25");

應該

var $id = $("#id"); 
    $id.attr("readonly", "readonly"); 
    $id.attr("size", "25");

由於jQuery allows chaining，上面也可以寫成

$("#id").attr("readonly", "readonly").attr("size", "25");

順便說一句，你實際上似乎想用prop() instead of attr()，和這些功能也接受value maps：

$("#id").prop({readonly: true, size: 25});

來源

2013-02-06 10:13:49 Bergi

您也可以傳遞一個map （'「readonly」：「readonly」，「size」：「25」}）;'如果用在包含多個元素的jQuery對象上，性能會得到改進）。 – nnnnnn

所以底線是，除了DOM樹的醜陋之外，除了那些名稱被保留並且不能在DOM樹中使用，通過id尋址元素之外，沒有其他缺點。例如，如果我在頁面上有兩個相似的表單，我可以在ID的前面加上前綴並獲得更好的性能？ – user1929437

@ user1929437：是的，可能。但是，如果您正確地執行了緩存（將DOM元素的引用存儲在變量中），以便在整個應用運行時只進行一次DOM選擇，您將不會注意到它。 – Bergi

因爲你是通過他們的ID找到元素。所有瀏覽器都有一個getElementById，它是獲取元素的最有效方法。

用類標識的元素重試你的基準。

來源

2013-02-06 10:14:03

所以底線是，除了DOM樹的醜陋之外，除了這些名稱被保留並且不能在DOM樹中使用，通過id尋址元素之外，沒有其他缺點。例如，如果我在頁面上有兩個相似的表單，我可以在ID的前面加上前綴並獲得更好的性能？ – user1929437

理論上是的，我讀過一些瀏覽器在500個不同的ID後有一個性能下降，但我從來沒有自己嘗試過。 –

原生Jquery選擇器VS緩存object.find（）

回答

相關問題