简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
如何知道javascript中的DOM操作哪个更快？
PHP中文网
PHP中文网 2017-04-10 18:02:05
0
4
427

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

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

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

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

PHP中文网
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
返信を追加
PHPzhong
PHPzhong2017-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
返信を追加
人気のトピック
詳細>
人気の記事
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！