问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答

如何知道javascript中的DOM操作哪个更快？

头像
SJkun
    10841822

    例如有3个button,
    id 为b1/b2/b3，都有class ="button"。

    假如想对这3个进行DOM操作(动态添加样式类)，一开始的获取可以是：

    一：分别进行三次var button? = document.getElementById()，然后放到一个数组里（后面有循环调用）；
    二：使用querySelectorAll()获得Nodelist对象,然后转换成数组；
    三：使用document.getElementsByClassName(names);

    我想知道哪一个运行起来会更快点，这要如何知道？

    javascriptdom
    阅读 4.3k
    4 个回答
    得票最新
    头像
    agui1989
      4.6k34312394
      ✓ 已被采纳

      方法楼上各位提供了，但我对结果比较感兴趣，于是测试了一下：

      <!DOCTYPE html>
<html>
<head>
    <title>dom速度测试</title>
</head>
<body>
<div class="haha" id="hehe">你们好</div>

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
    console.time("test0");
    var a=document.getElementById('hehe');
    //console.log(a.innerHTML);
    console.timeEnd('test0');

    console.time("test2");
    var c=document.querySelector("#hehe");
    //console.log(c.innerHTML);
    console.timeEnd('test2');

    console.time("test4");
    var d=$("#hehe");
    //console.log(d.html());
    console.timeEnd('test4');


    console.time("test1");
    var b=document.getElementsByClassName('haha');
    //console.log(b[0].innerHTML);
    console.timeEnd('test1');

    

    console.time("test3");
    var c=document.querySelector(".haha");
    //console.log(c.innerHTML);
    console.timeEnd('test3');

    

    console.time("test5");
    var e=$(".haha");
    //console.log(e.html());
    console.timeEnd('test5');
</script>
</body>
</html>

      测试结果：
      test0: 0.022ms
      test2: 0.041ms
      test4: 0.209ms
      test1: 0.021ms
      test3: 0.0261ms
      test5: 0.671ms

      刷新多次后观察结果，排序上偶尔会不同，但平均水平和以上给出的结果差不多：
      1.用jQuery方法选择器的效率明显较低；
      2.document.getElementById()与document.querySelector()的效率基本没有差别，但前者效率稍高一点；
      3.最让我意外的是：用class比用id选择器的效率稍高一些，不知这是为什么？但jquery的$(".classnae")选择器的效率永远是最低的)

      头像
      xiaoboost
        7.7k82842
        console.time("test");
//code..
console.timeEnd("test");

        自己用上面的代码测试一遍不就知道了……

        头像
        新しい世界
          1.5k61242

          使用 console API

          假设要执行的语句为 xxx;

          在代码中这样写

          console.time("code1");
xxx;
console.timeEnd("code1");

//output:
code1: (运行时间)
          头像
          公子孟尝
            6962420

            方法有两种：
            第一种：利用console API

            console.time("time");
// code
console.timeEnd("time");

            第二种：利用Date对象

            var start = Date.now();
// code
var stop = Date.now();

// code 执行所耗费的毫秒
console.log( stop - start )
            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            推荐问题