1

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

例如：

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

 C11   C12     C21  C22

对于查找 c12，路径是 P-C1-C11-C1-C12（根据结构，它可能是不同的路径，但我现在可以记住了）

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

我的第一个问题是我的理解是否正确？问题 2：我一直在考虑彼此之间的性能，并尽量减少我的代码以将重复项放在一起成为函数，另一方面，这需要时间。我应该继续这样做还是只是让它先工作然后再改变它？

谢谢。

4

2 回答 2

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

于 2013-01-27T18:46:11.353 回答
0

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

于 2013-01-27T18:31:02.020 回答