querySelector 与 getElementById 性能比较


1. querySelector 与 getElementById

首先我们来比较 querySelectorgetElementById 的差别,创建测试文件如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="test"></div>
    <script>
        console.time('querySelector');
        for (var i = 0; i < 100000; i++) {
            document.querySelector("#test");
        }
        console.timeEnd('querySelector');

        console.time('getElementById');
        for (var i = 0; i < 100000; i++) {
            document.getElementById("test");
        }
        console.timeEnd('getElementById');

    </script>
</body>
</html>

测试结果:IE11、Edge、Chrome

pic_39

2. querySelectorAll 与 getElementByClassName

我们再创建一个测试文件来比较 querySelectorAllgetElementByClassName,如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div class="test"></div>
    <div class="test"></div>
    <div class="test"></div>
    <script>
        console.time('querySelectorAll');
        for (var i = 0; i < 10000; i++) {
          document.querySelectorAll(".test");
        }
        console.timeEnd('querySelectorAll');

        console.time('getElementsByClassName');
        for (var i = 0; i < 10000; i++) {
          document.getElementsByClassName("test");
        }
        console.timeEnd('getElementsByClassName');

    </script>
</body>
</html>

测试结果:IE11、Edge、Chrome

pic_40

结论:

IE 差距大。

Chrome 对 querySelectorquerySelectorAll 进行了优化,与传统方式差距很小。


文章作者: iKnow
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 iKnow !
评论
 上一篇
高性能 JavaScript 之 DOM 篇 高性能 JavaScript 之 DOM 篇
高性能 JavaScript 之 DOM 篇Hison发布于 2019-10-26 本篇文章主要分享一下操作DOM时的一些细节,来提高页面性能。首先我们来思考以下几个问题。 如何获取页面中所有class为div1和div2的div元素。
2021-07-13
下一篇 
Tampermonkey 中使用 JavaScript 打包下载图片 Tampermonkey 中使用 JavaScript 打包下载图片
Tampermonkey 例子:// 引入插件:另存和压缩打包 // @require https://cdn.jsdelivr.net/npm/file-saver@2.0.5/dist/FileSaver.min.js //
2021-07-08
  目录