个人中心
gpt4 book ai didi

javascript - jQuery 与 DOM 性能比较

转载 作者：行者123 更新时间：2023-12-01 01:56:22 28 4
gpt4 key购买 nike

我编写此代码是为了对 jQuery 与 DOM 性能进行基准测试。每个浏览器的性能都不同，表现最差的是 Firefox X25，运行 jQuery 的速度较慢。这是预期的行为吗？我没想到 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>

最佳答案

这个:

$('#someId');

最终归结为 JQuery 函数所说的

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

但首先，它必须执行一系列逻辑，根据您发送的参数来弄清楚您的意图。像这样的东西(我知道还有更多):

它是一个字符串吗？是的。有空格吗？否。它以“#”、“.”或某些有效的 tagName 开头吗？它以“#”开头。太棒了，只需通过 ID 获取、打包并退回即可。

现在尝试对此进行测试:

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

对比。无论您必须为 IE7 中的 DOM 编写什么困惑的内容，您都会看到 JQuery 的全部意义。

一般来说，无论您使用的是核心 DOM 方法还是特别是 JQuery，一遍又一遍地重复 DOM 选择是一件愚蠢的事情。这就像当循环内部没有使用任何函数时提示函数调用开销。尝试在缓存初始元素抓取后比较一些 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 不会炸毁您的 childNodes 循环，因为它永远不会命中第一个元素，并且应该尝试访问不存在的两个元素。删除 +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];

关于javascript - jQuery 与 DOM 性能比较，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10711823/

28 4 0
文章推荐： javascript - 在 Ember 中编写 Or 过滤器
文章推荐： javascript - 从表单提交后的 XMLHttpRequest()
文章推荐： python - 如何从 matplotlib.figure.Figure 列表中保存 matplotlib 图？
文章推荐： javascript - 如何等待所有数据下载到Firebase(Firestore)存储中？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com