JavaScript:document.getElementById 性能慢? [英] JavaScript: document.getElementById slow performance?

查看：55 发布时间：2021/12/20 16:17:14 javascript optimization

本文介绍了JavaScript:document.getElementById 性能慢?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在常见 CSS 元素上反复使用document.getElementById.

如果我创建一个 全局数组 来存储我的所有 document.getElementById 元素而不是每次重新获取元素，是否会显着提高性能?>

示例，而不是:

document.getElementById("desc").setAttribute("href", "#");document.getElementById("desc").onclick = function() {...};document.getElementById("desc").style.textDecoration = "none"document.getElementById("asc").setAttribute("href", "#");document.getElementById("asc").onclick = function() {...};document.getElementById("asc").style.textDecoration = "none"...

简单地做:

var GlobalElementId = [];GlobalElementId ["desc"] = document.getElementById("desc");GlobalElementId ["asc"] = document.getElementById("asc");GlobalElementId [...] = document.getElementById(...);GlobalElementId ["desc"].setAttribute("href", "#");GlobalElementId ["desc"].onclick = function() {...};GlobalElementId ["desc"].style.textDecoration = "none"...

解决方案

所以所有是"的答案都困扰着我，所以我实际上是为了看看 getElementById 是否很慢！

以下是结果(页面上有 10,000 个元素):

IE8 getElementById:0.4844 毫秒
IE8 id 数组查找:0.0062 毫秒

Chrome getElementById:0.0039 毫秒
Chrome id 数组查找:0.0006 毫秒

Firefox 3.5 可与 chrome 相媲美.

每次函数调用半毫秒不会让我使用数组；)但也许在我没有安装的 IE6 上情况更糟.

这是我的脚本:

<头><script type="text/javascript">var numEles = 10000;var idx = {};功能测试(){生成元素()；var t0 = (new Date()).getTime();var x = selectElementsById();var t1 = (new Date()).getTime();无功时间 = t1 - t0;生成索引()；var t2 = (new Date()).getTime();var x = selectElementsWithIndex();var t3 = (new Date()).getTime();var idxTime = t3 - t2;var msg = "getElementById time = " + (time/numEles) + " ms (for one call)
"+ "索引时间 = " + (idxTime/numEles) + " ms (for one call)";警报(味精)；}函数生成元素(){var d = document.getElementById("mainDiv");var str = [];for(var i=0;i<body onload="javascript:test();"><div id="mainDiv"/>

I repetitively use document.getElementById a lot on common CSS elements.

Would there be a significant performance gain if I created a global array to store all of my document.getElementById element in instead of refetching the element each time?

Example, instead of:

document.getElementById("desc").setAttribute("href", "#");
document.getElementById("desc").onclick = function() {...};
document.getElementById("desc").style.textDecoration = "none"
document.getElementById("asc").setAttribute("href", "#");
document.getElementById("asc").onclick = function() {...};
document.getElementById("asc").style.textDecoration = "none"
...

To simply do:

var GlobalElementId = [];
GlobalElementId ["desc"] = document.getElementById("desc");
GlobalElementId ["asc"] = document.getElementById("asc");
GlobalElementId [...] = document.getElementById(...);

GlobalElementId ["desc"].setAttribute("href", "#");
GlobalElementId ["desc"].onclick = function() {...};
GlobalElementId ["desc"].style.textDecoration = "none"
...

解决方案

So all the "yes" answers were bugging me, so I actually timed this to see if getElementById was slow!

Here are the results (for a page with 10,000 elements on it):

IE8 getElementById: 0.4844 ms
IE8 id array lookup: 0.0062 ms

Chrome getElementById: 0.0039 ms
Chrome id array lookup: 0.0006 ms

Firefox 3.5 was comparable to chrome.

Half a millisecond per function call isn't going to get me to use an array ;) But maybe it's worse on IE6, which I don't have installed.

Here's my script:

<html>
<head>
<script type="text/javascript">
    var numEles = 10000;
    var idx = {};

    function test(){
        generateElements();
        var t0 = (new Date()).getTime();
        var x = selectElementsById();
        var t1 = (new Date()).getTime();
        var time = t1 - t0;
        generateIndex();
        var t2 = (new Date()).getTime();
        var x = selectElementsWithIndex();
        var t3 = (new Date()).getTime();
        var idxTime = t3 - t2;

        var msg = "getElementById time = " + (time / numEles) + " ms (for one call)
"
            + "Index Time = " + (idxTime/ numEles) + " ms (for one call)";
        alert(msg);
    }

    function generateElements(){
        var d = document.getElementById("mainDiv");
        var str = [];
       for(var i=0;i<numEles;i++){
           str.push("<div id='d_" + i + "' >" + i + "</div>");
        }
        d.innerHTML = str.join('');
    }

    function selectElementsById(){
        var eles = [];
        for(var i=0;i<numEles;i++){
            var id = ((i * 99) % numEles);
            eles.push(document.getElementById("d_" + id));
        }
        return eles;
    }

    function generateIndex(){
        for(var i=0;i<numEles;i++){
            var id = "d_" + i;
           idx[id] = document.getElementById(id);
        }
    }

    function selectElementsWithIndex(){
        var eles = [];
        for(var i=0;i<numEles;i++){
            var id = ((i * 99) % numEles);
            eles.push(idx["d_" + id]);
        }
        return eles;
    }   
</script>
</head>
<body onload="javascript:test();" >
<div id="mainDiv" />
</body>
</html>

这篇关于JavaScript:document.getElementById 性能慢?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

JavaScript:document.getElementById 性能慢? [英] JavaScript: document.getElementById slow performance?

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

JavaScript:document.getElementById 性能慢? [英] JavaScript: document.getElementById slow performance?

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭