爲什麼$（div＃id）比$（＃id）慢？

除非我的測試出現問題，否則當我在Chrome上運行此jsfiddle時，對於$("#id")選擇器，我需要11ms左右的時間，對於$(div#id)選擇器，則需要56ms。

$(document).ready(function(){ 
    startTime = new Date().getTime(); 
    for (i = 0; i < 10000; i++) 
    { 
     s = $("#idC12"); 
    }   
    $("#idResults").html("c12 by id only time: "+elapsedMilliseconds(startTime)); 

    startTime = new Date().getTime(); 
    for (i = 0; i < 10000; i++) 
    { 
     s = $("div#idC12"); 
    }   
    $("#classResults").html("c12 by tagname#id: "+elapsedMilliseconds(startTime)); 
}); 

function elapsedMilliseconds(startTime) 
{ 
    var n = new Date(); 
    var s = n.getTime(); 
    var diff = s - startTime; 
    return diff; 
}

http://jsfiddle.net/MhWUc/

來源

2013-04-02 mazlix

除了下面的非常好的答案，我會說，因爲你應該有一個頁面上的唯一ID，沒有一點是如此具體的div＃id ... –

這是因爲$("#id")內部使用天然document.getElementById函數，它使用一個地圖從ID鏈接到具有該ID的（唯一的）元件。

下面是jQuery的源相關代碼：

 // Easily-parseable/retrievable ID or TAG or CLASS selectors 
     rquickExpr = /^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/ 
     ... 
     // Speed-up: Sizzle("#ID") 
     if ((m = match[1])) { 
      if (nodeType === 9) { 
       elem = context.getElementById(m); 
       // Check parentNode to catch when Blackberry 4.6 returns 
       // nodes that are no longer in the document #6963 
       if (elem && elem.parentNode) { 
        // Handle the case where IE, Opera, and Webkit return items 
        // by name instead of ID 
        if (elem.id === m) { 
         results.push(elem); 
         return results; 
        } 
       } else { 
        return results; 
       } 
      } else { 
       // Context is not a document 
       if (context.ownerDocument && (elem = context.ownerDocument.getElementById(m)) && 
        contains(context, elem) && elem.id === m) { 
        results.push(elem); 
        return results; 
       } 
      }

你會發現：

當正則表達式檢測#someId形式
它使用任何提供的上下文只增加了一個測試，並沒有讓它更快

請注意，這ru le在jQuery之外依然如此，當定義CSS規則或使用document.querySelector：當你知道id時，沒有比使用document.getElementById（除了緩存的元素...）更快的事情。

來源

2013-04-02 17:18:58

準備好，設置，去吧！你贏了:) – jmar777

要添加到此，$（div＃id）必須在div上運行一個額外的選擇器。我不得不看看$（＃id）是否首先被查找並檢查以確保分隔，但我想象ir先運行一個querySelectAll（div），然後檢查id。 –

有時我會忘記爲什麼要使用jQuery，然後我會看到其中的一些註釋並記住原因。這是一個黑暗，黑暗的世界...... – jmar777

一段時間以來我一直在源代碼，但我知道，#some-id選擇使用document.getElementById()進行處理，而更復雜的方法（例如，tagName#some-id）必須通過document.querySelectorAll要經過的滋滋聲，並最終。

來源

2013-04-02 17:19:29 jmar777

$('div#id')比較慢，因爲它沒有直接映射到本地getElementById()方法。

來源

2013-04-02 17:19:35

當您使用div＃id時，首先選中所有的div。

當你使用#id時，它直接進入ID表。

來源

2013-04-02 17:20:04

這是不是仍然是從右到左的實現？ – jmar777

@ jmar777我不這麼認爲。我認爲這就是CSS的工作原理，而不是jQuery的選擇過程。我發誓我只是讀了一些關於這個。也許我錯了。我會尋找它 – Ian

很確定它是[從右到左]（http://davidwalsh.name/selectors）... – jmar777

爲什麼$（div＃id）比$（＃id）慢？

回答

相關問題