JavaScript：document.getElementById性能下降？ [英] JavaScript: document.getElementById slow performance?
问题描述
我在常见 CSS元素上重复使用 document.getElementById 。
I repetitively use document.getElementById a lot on common CSS elements.
如果我创建一个全局数组来存储我的所有 document.getElementById 元素，是否会有显着的性能提升而不是每次都重新获取元素？
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?
示例，而不是：
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是否很慢！
So all the "yes" answers were bugging me, so I actually timed this to see if getElementById was slow!
以下是结果（表示包含10,000个元素的页面）：
IE8 getElementById：0.4844 ms
IE8 id数组查找：0.0062 ms
IE8 getElementById: 0.4844 ms
IE8 id array lookup: 0.0062 ms
Chrome getElementById：0.0039 ms
Chrome id array lookup：0.0006 ms
Chrome getElementById: 0.0039 ms
Chrome id array lookup: 0.0006 ms
Firefox 3.5与chrome相当。
Firefox 3.5 was comparable to chrome.
每个函数调用半毫秒不会得到我使用数组;）
但是在IE6上可能更糟糕，我没有安装它。
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.
这是我的剧本：
<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)\n"
+ "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屋！
