Menu
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"
...
643
In words: Calling document. getElementById() is very fast.
getElementById is very fast and you shouldn't have to worry about performance.
getElementById() can run about 15 million operations a second, compared to just 7 million per second for querySelector() in the latest version of Chrome. But that also means that querySelector() runs 7,000 operations a millisecond.
The document. getElementbyId( "myId") is faster because its direct call to JavaScript engine. jQuery is a wrapper that normalizes DOM manipulation in a way that works consistently in every major browser.
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)\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>
Since you say "CSS elements" I suspect that a lot of your slow performance is not because of repetitive use of document.getElementById() (which you should avoid anyway) but rather how many times you modify the style object for a given node.
Every single time you change a property on style you force the browser to re-draw that element and possibly many others on the page.
var elem = document.getElementById( 'desc' );
elem.style.textDecoration = "none"; // browser re-draw
elem.style.borderWidth = "2px"; // browser re-draw
elem.style.paddingBottom = "5px"; // browser re-draw
Here, the better solution is to use CSS classes and switch or add/remove the class name from the node. This lets you pack in as many style changes you want at the cost of only a single re-draw.
var elem = document.getElementById( 'desc' );
elem.className = "whatever"; // Only one browser re-draw!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
