#id和.class的性能

Question

一些帖子建议#id在基于速度测试的Jquery中比.class更快，或者#id和.class已经针对浏览器进行了优化。但是，我认为这应该取决于它如何遍历HTML Dom树。

例如：

            P
            |
    ---------------
    |             |
    C1            C2
    |             |
 -------       ------
 |     |       |    |

 C11   C12     C21  C22

对于find c12，路径是P-C1-C11-C1-C12 (根据结构的不同，它可能是不同的路径，但我现在能记住)

无论类是c12还是id，它都是相同的路径，这意味着$('#C12')或$('P C1 .C12')的性能是相同的。

我的第一个问题是我的理解是否正确？问题2:我一直在考虑一个函数和另一个函数的性能，并将我的代码最小化以将重复放入函数中，另一方面，这需要时间。我应该继续这样做，还是只是先让它工作，然后再改变它？

谢谢。

Answer 1

为什么要费心去猜测，下面是一个具有相同结构和选择器的活生生的例子：http://jsfiddle.net/3Ah5S/

HTML

<div id="idP" class="classP">
            <h1>P</h1>
            <div id="idC1" class="classC1">
                <b>C1</b>
                <div id="idC11" class="classC11">
                -->C11
                </div>
                <div id="idC12" class="classC12">
                -->C12
                </div>
            </div>
            <div id="idC2" class="classC2">
                <b>C2</b>
                <div id="idC21" class="classC21">
                -->C21
                </div>
                <div id="idC22" class="classC22">
                -->C22
                </div>
            </div>      
        </div>
        <br/>
        <div id="idResults">

        </div>
        <br/>
        <div id="classResults">

        </div>

jquery测试代码

$(document).ready(function(){

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

    startTime = new Date().getTime();
                for (i = 0; i < 10000; i++)
                {
                    s = $(".classC12");
                }           
    $("#classResults").html("c12 by class time: "+elapsedMilliseconds(startTime));
});

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

ID时间肯定更快，因为它利用特定于浏览器的指令来直接获取元素，而不需要遍历DOM树。

更新：按ID搜索更快的原因是，在呈现页面时，浏览器倾向于为DOM树中具有唯一ID的每个元素创建一个变量，因此按ID查询是最快的方法，因为它将直接使用关联的变量获取元素。

一个很好的解释可以在这里找到：http://javascript.info/tutorial/searching-elements-dom

Answer 2

因此，.videoContainer应该比#dialog .videoContainer“更快”，因为它忽略了对#dialog.use this的测试