Question

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.

Closed 11 years ago.

I have written this code to benchmark jQuery vs DOM performance. The performance is defferent in every browser with the worst performer Firefox X25 slower running jQuery. Is this expected behavior? I wasn t expecting to see such an impact with jQuery.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script  type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
<script language="JavaScript" type="text/javascript">
$(function () {
    var i=0;
    var dtb = new Date();
    while(i < 1000000)
    {
        var index = Math.floor(Math.random()*30);
        i++;
        var elem = document.getElementById( d +index);
    }
    var dte = new Date();
    alert(dte-dtb);

    i=0;
    var dtb2 = new Date();
    var body = document.getElementById( cog );
    while(i < 1000000)
    {
        var index = Math.floor(Math.random()*30);
        i++;
        var elem = body.childNodes[index];
    }
    var dte2 = new Date();
    alert(dte2-dtb2);

    i=0;
    var dtb3 = new Date();
    while(i < 1000000)
    {
        var index = Math.floor(Math.random()*30);
        i++;
        var $elem = $("#d"+index);
    }
    var dte3 = new Date();
    alert(dte3-dtb3);



    /////EDIT//////
    ///// Implemented an Array as suggested by Erik Reppen  ////////


    i = 0;
    var idNames=new Array(30);
    while(i<30){
        idNames[i] = $("#d"+i);
        i++;
    }


    i=0;
    var dtb4 = new Date();
    while(i < 1000000)
    {
        var index = Math.floor(Math.random()*30);
        i++;
        var $elem = idNames[index];
    }
    var dte4 = new Date();
    alert(dte4-dtb4);

    /////EDIT//////////////////////////////////////////////



});

</script>
</head>

<body id="cog">
<div id="d0">sdfkjjfgdfd@@@</div><div id="d1">sdffgdfd@@@</div><div id="d2">sddfgfd</div><div id="d3">sdasfd</div><div id="d4">swqedfd</div><div id="d5">sddfdsfd</div><div id="d6">sdfd</div><div id="d7">sdsdffd</div><div id="d8">sdfsdfd</div><div id="d9">sdfkjlkjd</div><div id="d10">sdm ,nfd</div><div id="d11">sdcxvfd</div><div id="d12">sdxzcmfd</div><div id="d13">shgjmdfd</div><div id="d14">sdfvcbd</div><div id="d15">sdf;k;d</div><div id="d16">sdjklfd</div><div id="d17">sd412fd</div><div id="d18">sdfkyhkd</div><div id="d19">sdasdfd</div><div id="d20">sdhdfgsfd</div><div id="d21">sdfdsad</div><div id="d22">sdasdfd</div><div id="d23">sddfgdffd</div><div id="d24">sdklugiffd</div><div id="d25">sddfsafd</div><div id="d26">sdfq21fd</div><div id="d27">42324sdfd</div><div id="d28">sdnhmjkgufksfd</div><div id="d29">sdqwefdLAST</div>
</body>
</html>

Answer 1

这一点:

$( #someId );

最终归结到 JQuery 函数说

document.getElementId( someId ); // and then wrap it in a JQuery object and return it

但首先,它必须用一系列逻辑来根据你发送的批量来弄清楚你的意图是什么。类似的东西(我知道比这还要多得多 ) :

是字符串吗?是的。有空格吗?没有。它是从 #,.或一些有效标签开始的吗?它从#.开始,很好,只是用 ID, 包包和返回它。

现在尝试测试一下这个:

$( #someId.active > .someClass:visible )

V. 无论你为IE7的DOM 写出什么不虔诚的乱七八糟的东西你都会看到JQuery的点

一般来说, 反复重复 DOM 选择是一件愚蠢的事情, 不论您是使用 DOM 核心方法, 还是使用 JQuery 。它喜欢在没有函数在循环中被使用时握住函数调用管理费。尝试比较一些 DOM 方法和 JQ 等效, 然后再缓存初始元素抓取。 JQ 可能仍然比较慢一些, 但我怀疑有什么会减速25倍。

var $_someId = $( #someId );
dom_someId = document.getElementById( someId );
//now try looping a JQuery method vs an equivalent set of DOM methods for each

与原始测试无关但有帮助

本文按下面的评论列出一些例子, 并重提您的问题, 以了解在循环之前要做的事情。

//caching ID names before loop
var i = 30,
idNames = [];
while(i--){ //confusing but tests as i, then inside i is i-=1
idNames[i] =  d +(i+1);
}

注意 : 您将数组索引为 0- 30, 从而杀死循环中随机索引构建语句之后的 + 1 。事实上, 我不清楚为什么 1- 31 不引爆您的子节点环, 因为它从未击中第一个元素, 并且应该尝试访问两个不在那里的元素。撤消 + 1, 并选择 0- 30 。上面的循环假设您想要 1- 31, 但我刚刚看到 HTML 只达到 30, 开始为 1 。

//caching object/property lookup and DOM Access/HTMLCollection/obj instantiation
var bodyChildren = body.childNodes; //DOM object lookups cost performance

//caching JQ so you can use the exact same loop afterwards
var bodyChildren = $( body ).children();

//inside loops
bodyChildren[index];

Answer 2

jQuery 是一个使 DOM 操作正常化的包装纸, 在每个主要浏览器中都以一致的方式运作。它比 DOM 直接操作慢25x 完全合理。性能损失是一个取舍, 要有一个简洁的代码。

JavaScript 通常是一种高度非同步的语言。它的大部分使用涉及等待用户触发的回调或计时器。由于时间太长, 性能几乎从来就不是一个问题。用户不会注意到以一米计的流程与以二千五米计的流程之间的区别。

如果您的脚本中有 is a impressive hit in one of your script, 使用工具分析代码使用的时间最多的地方。

毕竟,过早优化是一切邪恶的根源。

Answer 3

这是因为 $ ("#d"+index); 不做与 document.getElementById (d+index); 相同的事情。后者获得一个 DOM 对象。这是一个本地类型的对象, 包含在浏览器中。

但是, $ < /code> 构建了一个 jQuery 对象。首先, 它必须分析选择器, 因为 jQuery 可以按类、属性、祖先等找到东西, 而 文件. getElementById 只能通过他们的 ID 找到元素。 jQuery 对象不是本地对象, 创建速度要慢得多, 并且潜力也大得多。例如, jQuery 对象( 实际上是本地 DOM 对象的包装) 提供了 next 、 < code> val < /code > 、 < code > < bind 和 < code> on 方法。选择jQuery 要比本地 DOM 对象要慢得多, 但它使得编程容易, 并且往往使执行速度更快, 因为 jQuery 的作者可能比你在 Javascrity 上更好。

Answer 4

您正在使用 jQuery 来杀死蚊子。每次您使用 < code>$ ("#d"+index) , 你就会告诉 jQuery 来解析选择器, 将选择器应用到 DOM, 然后将结果包装在耗时的存储器中。这非常耗时。

士气: 需要时使用 jQuery, 而表演并不是您函数的主旨。

友情链接