如何知道javascript中的DOM操作哪个更快？-PHP中文网问答

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

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

PHP中文网 2017-04-10 18:02:05

[JavaScript讨论组]

624

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

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

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

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

PHP中文网

认证高级PHP讲师

全部回复(4)

高洛峰2017-04-10 18:04:05 4楼

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

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

<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")选择器的效率永远是最低的)

赞 +0

添加回复

高洛峰2017-04-10 18:04:05 3楼

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

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

赞 +0

添加回复

阿神2017-04-10 18:04:05 2楼

使用 console API

假设要执行的语句为 xxx;

在代码中这样写

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

//output:
code1: (运行时间)

赞 +0

添加回复

PHPz2017-04-10 18:04:05 1楼

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

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

第二种：利用Date对象

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

// code 执行所耗费的毫秒
console.log( stop - start )

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>