javascript - jQuery 与 DOM 性能比较-6ren

javascript - jQuery 与 DOM 性能比较

转载作者：行者123 更新时间：2023-12-01 01:56:22

28

4

我编写此代码是为了对 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 - NetworkX Graph 对象的“同构”比较，而不是默认的 'address' 比较
我想使用 NetworkX Graph 对象作为 Python dict 中的键。但是，我不希望默认的比较行为(即通过对象的地址)。相反，我希望同构图是 dict 中相同元素的键。此行为是否已在某处
比较 float
这个问题已经有答案了: What is the most effective way for float and double comparison? (33 个回答) 已关闭 7 年前。在您认为我
C字符串与字符的输入、比较
我正在学习 C 编程，为了练习，我找到了一个需要解决的任务。这有点像一个游戏，有人选择一个单词，其他人猜测字母。我必须检查有多少给定的单词可能是所选单词的正确答案。输入: 3 3//数字 n 和 m
比较 If 语句中的字符
我两天前开始学习C，在做作业时遇到了问题。我们的目的是从字符数组中获取字符列表，并通过计算连续字符并将其替换为数字来缩短它。对“a4b5c5”说“aaaabbbbbccccc”。这是我到目前为止的代码
比较 if 语句中的指针值
已关闭。此问题需要 debugging details 。目前不接受答案。编辑问题以包含 desired behavior, a specific problem or error, and the
JavaScript 比较
为什么我在 if 中的比较不起作用？答案应该是 8 但它返回 0。 function findMissing(missingArray){ var getArray = missing
JavaScript 比较
我想知道为什么以下 JavaScript 比较会给出不同的结果。 (1==true==1) true (2==true==2) false (0==false==0) false (0==false)
比较、组合和确定字符串的长度？
我想知道是否有人可以帮助我完成这个程序。编写一个接受两个字符串的函数。该函数应该将这两个字符串与字典顺序上排在第一位的字符串组合起来。两个字符串之间应该有一个空格。在一行上打印结果字符串。在一行上打印
JavaBeans 比较
有谁知道一个免费的开源库(实用程序类)，它允许您比较一个 Java bean 的两个实例并返回一个属性列表/数组，这两个实例的值不同？请发布一个小样本。干杯托马斯最佳答案 BeanCompara
Java - 比较
我是java新手。任何人都可以给出以下类声明的含义 public class ListNode, V> { K key; V value; ListNode next;
比较 C 中不同大小的矩阵乘法执行时间
我需要用 C 语言计算和比较 3 种不同大小(100 * 100、1000 * 1000 和 10000 * 10000)的 2 个矩阵相乘的执行时间。我编写了以下简单代码来为 1000 * 1000
聚合函数上的 SQL 比较
当我在 ACCESS 2007 中运行以下 SQL 时 Select Location, COUNT(ApartmentBuildings) AS TotalIBuildingsManaged Fro
multithreading - 互斥体与监视器——比较
根据我对互斥锁的了解——它们通常提供对共享资源的锁定功能。因此，如果一个新线程想要访问这个锁定的共享资源——它要么退出，要么必须不断轮询锁(并在等待锁时浪费处理器周期)。但是，监视器具有条件变量，它
Oracle NUMBER 比较
通常在编程中，不应该比较浮点数据类型是否相等，因为存储的值通常是近似值。由于两个非整数 Oracle NUMBER 值的存储方式不同(以 10 为基数)，是否可以可靠地比较它们是否相等？最佳答案
powershell - 没有隐式类型转换的身份运算符/比较
使用 PowerShell 时，我们偶尔会比较不同类型的对象。一个常见的场景是 $int -eq $bool (即其中 0 -eq $false 、 0 -ne $true 和任何非零值仅等于真，但不
比较 2 个字符串并保存结果
#include #define MAX 1000 void any(char s1[], char s2[], char s3[]); int main() { char string1[
c# - 比较.net中的日期
我想比较两个日期。从这两个日期中，我只使用 ToShortDateString() 获取日期组件，如下所示。现在的问题是当我比较两个日期时。它的 throw 错误—— "Operator >= c
iphone - 比较 NSNumber
用户输入一个数字( float 或整数)，并且它必须大于下限。这是从 UITextField 获取数字的代码: NSNumberFormatter * f = [[NSNumberFormatter
Javascript 子字符串验证/比较
我已经摆弄这段代码大约一个小时了，它让我难以置信。我认为解决方案相当简单，但我似乎无法弄清楚。无论如何，这里去。我制作了一个 javascript 函数来检查用户输入的字符，以便它只能接受 7 个字符
Scala 类和案例类 == 比较
我不太明白为什么当我们在不覆盖 equals 的情况下比较具有相同类属性的两个实例时方法，它将给出 false .但它会给出 true当我们比较一个案例类的两个实例时。例如 class A(val

首页

博学

6Ren·AI

商城

javascript - jQuery 与 DOM 性能比较