为什么$(div#id)比$(#id)慢？

Question

除非我的测试有什么问题，否则当我在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/

Answer 1

这是因为$("#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表单时使用
• 任何提供的上下文只会添加一个测试，而不会使其更快

请注意，在jQuery之外，当定义CSS规则或使用document.querySelector时，此规则仍然适用:当您知道id时，没有什么比使用document.getElementById更快的了(除了缓存的元素...)。

Answer 2

我在源代码中已经有一段时间了，但我知道#some-id选择器过去是由document.getElementById()处理的，而更复杂的选择器(例如tagName#some-id)必须经过sizzle并最终通过document.querySelectorAll。

Answer 3

$('div#id')比较慢，因为它不直接映射到本机getElementById()方法。