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

Question

除非我的测试有问题，否则当我在 Chrome 上运行这个 jsfiddle 时，$("#id") 选择器大约需要 11 毫秒，$ 大约需要 56 毫秒(div#id) 选择器。

$(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 形式时使用
• 任何提供的上下文只会增加测试，并不会使其更快

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