Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > What's faster, saving an HTML DOM node as a variable, or using getElementById?

Reply
Thread Tools

What's faster, saving an HTML DOM node as a variable, or using getElementById?

 
 
ctman770@gmail.com
Guest
Posts: n/a
 
      09-14-2006
Hi Everyone,

Is it faster to save the precise location of an html dom node into a
variable in js, or to use getElementById everytime you need to access
the node?

I want to make my application as fast as possible. I have about 10-20
id tags that need to be accessed and modified from time to time. Would
the jvm perform slowly if I stored all of the dom node strings
"document.node.child...." into a huge js array?

Alternatively, would it also be slow if I had to use getElementById()
everytime I needed to access the node?

Thanks in advance for the help,
C

 
Reply With Quote
 
 
 
 
web.dev
Guest
Posts: n/a
 
      09-14-2006

http://www.velocityreviews.com/forums/(E-Mail Removed) wrote:
> Hi Everyone,
>
> Is it faster to save the precise location of an html dom node into a
> variable in js, or to use getElementById everytime you need to access
> the node?


It would be faster to access a node that you have saved in a variable,
thus avoiding the time it takes to retrieve the node through
getElementById.

> I want to make my application as fast as possible. I have about 10-20
> id tags that need to be accessed and modified from time to time. Would
> the jvm perform slowly if I stored all of the dom node strings
> "document.node.child...." into a huge js array?


Javascript has no relation with Java Virtual Machine. The only thing
they both have in common is that they both start off with "java".

> Alternatively, would it also be slow if I had to use getElementById()
> everytime I needed to access the node?


If you had to access a node many times, then getElementById method
would be slower than if you had stored the node.

 
Reply With Quote
 
 
 
 
ctman770@gmail.com
Guest
Posts: n/a
 
      09-14-2006
Thank you so much for the help.


web.dev wrote:
> (E-Mail Removed) wrote:
> > Hi Everyone,
> >
> > Is it faster to save the precise location of an html dom node into a
> > variable in js, or to use getElementById everytime you need to access
> > the node?

>
> It would be faster to access a node that you have saved in a variable,
> thus avoiding the time it takes to retrieve the node through
> getElementById.
>
> > I want to make my application as fast as possible. I have about 10-20
> > id tags that need to be accessed and modified from time to time. Would
> > the jvm perform slowly if I stored all of the dom node strings
> > "document.node.child...." into a huge js array?

>
> Javascript has no relation with Java Virtual Machine. The only thing
> they both have in common is that they both start off with "java".
>
> > Alternatively, would it also be slow if I had to use getElementById()
> > everytime I needed to access the node?

>
> If you had to access a node many times, then getElementById method
> would be slower than if you had stored the node.


 
Reply With Quote
 
RobG
Guest
Posts: n/a
 
      09-14-2006
(E-Mail Removed) wrote:
> Hi Everyone,
>
> Is it faster to save the precise location of an html dom node into a
> variable in js, or to use getElementById everytime you need to access
> the node?


That depends on how often you intend to access the node. If it is less
than a few hundred times in a tight loop, it likely makes no noticeable
difference.

I'd suggest testing it to find out where the tipping point is, then
deciding if you are ever likely to approach it.


> I want to make my application as fast as possible. I have about 10-20
> id tags that need to be accessed and modified from time to time. Would
> the jvm perform slowly if I stored all of the dom node strings
> "document.node.child...." into a huge js array?


I don't think an array of 20 items is huge. 20,000 is large.


> Alternatively, would it also be slow if I had to use getElementById()
> everytime I needed to access the node?


"Slow" is relative. If you are accessing the nodes infrequently, then
it likely makes zero difference to the perceived speed.

It is difficult to recommend a particular approach without knowing more
about the use to which it will be put, but generally I prefer to store
references in an array. I prefer to identify the nodes to store using
some strategy other than say a sequence of IDs (el-0, el-1, etc.), or a
list provided as an array from some other source.

To me it's much easier to wrap the elements in question in a div and
pass its ID to a function, then use getElementsByTagName or similar to
find the ndoes I want (maybe further distinguished by CSS class name)
and store references to them. For some nodes you can use a common name
attribute and getElementsByName, but that only suits a small sub-set of
elements.


--
Rob

 
Reply With Quote
 
ctman770@gmail.com
Guest
Posts: n/a
 
      09-14-2006
Actually,

One question that pops to my head now is that if I do end up using an
array to store id locations, if I make innerHTML replacements or
additions to other tags either before or after the div, do the
locations all go bad? In that case, it might be better to just use
getElementById all the time.

Thanks,
Clarence

RobG wrote:
> (E-Mail Removed) wrote:
> > Hi Everyone,
> >
> > Is it faster to save the precise location of an html dom node into a
> > variable in js, or to use getElementById everytime you need to access
> > the node?

>
> That depends on how often you intend to access the node. If it is less
> than a few hundred times in a tight loop, it likely makes no noticeable
> difference.
>
> I'd suggest testing it to find out where the tipping point is, then
> deciding if you are ever likely to approach it.
>
>
> > I want to make my application as fast as possible. I have about 10-20
> > id tags that need to be accessed and modified from time to time. Would
> > the jvm perform slowly if I stored all of the dom node strings
> > "document.node.child...." into a huge js array?

>
> I don't think an array of 20 items is huge. 20,000 is large.
>
>
> > Alternatively, would it also be slow if I had to use getElementById()
> > everytime I needed to access the node?

>
> "Slow" is relative. If you are accessing the nodes infrequently, then
> it likely makes zero difference to the perceived speed.
>
> It is difficult to recommend a particular approach without knowing more
> about the use to which it will be put, but generally I prefer to store
> references in an array. I prefer to identify the nodes to store using
> some strategy other than say a sequence of IDs (el-0, el-1, etc.), or a
> list provided as an array from some other source.
>
> To me it's much easier to wrap the elements in question in a div and
> pass its ID to a function, then use getElementsByTagName or similar to
> find the ndoes I want (maybe further distinguished by CSS class name)
> and store references to them. For some nodes you can use a common name
> attribute and getElementsByName, but that only suits a small sub-set of
> elements.
>
>
> --
> Rob


 
Reply With Quote
 
RobG
Guest
Posts: n/a
 
      09-15-2006
(E-Mail Removed) wrote:
> Actually,


Please reply below trimmed quotes of the bits you are replying to.


> One question that pops to my head now is that if I do end up using an
> array to store id locations, if I make innerHTML replacements or


If you replace a node, then your stored reference is useless,
regardless of how you replaced the node. The best idea is to update
the reference at the same time you replace the node. I think you'll
have exaclty the same issue using IDs - you'll have to ensure either
the new node has the same ID as the one it is replacing, or that you
update your referencing scheme (which might be a list of IDs in an
array).

The use of innerHTML or DOM to create/replace the node just changes the
method used to maintain references. You may lean toward innerHTML
because in IE it is much, much faster than using DOM. But for other
browsers, DOM tends to be just as fast as innerHTML (in some it is
faster).


> additions to other tags either before or after the div, do the
> locations all go bad? In that case, it might be better to just use
> getElementById all the time.


Modifing other parts of the DOM will not affect either method of
referencing an element.

> RobG wrote:
> > (E-Mail Removed) wrote:
> > > Hi Everyone,
> > >
> > > Is it faster to save the precise location of an html dom node into a
> > > variable in js, or to use getElementById everytime you need to access
> > > the node?

> >
> > That depends on how often you intend to access the node. If it is less
> > than a few hundred times in a tight loop, it likely makes no noticeable
> > difference.
> >
> > I'd suggest testing it to find out where the tipping point is, then
> > deciding if you are ever likely to approach it.


For the sake of it, below is a simple test. Using an array of
references is much faster if you leave out building the array. If the
time taken to build the array is included, it is still a bit faster
than using getElementById every time.

So if your elements are reasonably static, then the stored references
is much faster (but only noticeably for more than say 100 elements in a
tight loop). If they aren't, it is still likely marginally faster to
update the array of references and use that. Incidentally, on my
machine, Firefox runs the following test in about 500 ms, IE takes
about 2500ms (that is, 5 times longer).


<script type="text/javascript">

function hideAllByID(){
var s = new Date();
var i = 0;
var x;
while ((x = document.getElementById('d' + i++))){
x.style.display = 'none';
}
var f = new Date();
alert('Using getElementById: ' + (f-s));
}

function hideAllByRef(){
var refArray = [];
var s = new Date();
var i = 0;
while ((x = document.getElementById('d' + i++))){
refArray.push(x);
}
var f = new Date();
var msg = 'Load reference array: ' + (f-s);
i = refArray.length;
s = new Date();
while (i--){
refArray[i].style.display = 'none';
}
f = new Date();
msg += '\nHide elements: ' + (f-s);
alert(msg);
}

for (var i=0; i<1000; i++){
document.write('<div id="d' + i + '">div ' + i + '<\div>');
}

</script>


--
Rob

 
Reply With Quote
 
Laurent Bugnion
Guest
Posts: n/a
 
      09-15-2006
Hi,

(E-Mail Removed) wrote:
> Hi Everyone,
>
> Is it faster to save the precise location of an html dom node into a
> variable in js, or to use getElementById everytime you need to access
> the node?
>
> I want to make my application as fast as possible. I have about 10-20
> id tags that need to be accessed and modified from time to time. Would
> the jvm perform slowly if I stored all of the dom node strings
> "document.node.child...." into a huge js array?
>
> Alternatively, would it also be slow if I had to use getElementById()
> everytime I needed to access the node?
>
> Thanks in advance for the help,
> C


Just wanted to add that for big documents and multiple DOM Level 2
accesses to the document, document.getElementById presents huge
performance problems. We found out that it's much, much faster to get
one node and then to use navigation (through properties like firstChild,
the children collection, nextSibling, etc...) to get to the nodes you
want to modify. I am talking 10 times faster or more.

HTH,
Laurent
--
Laurent Bugnion, GalaSoft
Software engineering: http://www.galasoft-LB.ch
Private/Malaysia: http://mypage.bluewin.ch/lbugnion
Support children in Calcutta: http://www.calcutta-espoir.ch
 
Reply With Quote
 
scriptguru@gmail.com
Guest
Posts: n/a
 
      09-15-2006

(E-Mail Removed) написав:
> Hi Everyone,
>
> Is it faster to save the precise location of an html dom node into a
> variable in js, or to use getElementById everytime you need to access
> the node?
>
> I want to make my application as fast as possible. I have about 10-20
> id tags that need to be accessed and modified from time to time. Would
> the jvm perform slowly if I stored all of the dom node strings
> "document.node.child...." into a huge js array?
>
> Alternatively, would it also be slow if I had to use getElementById()
> everytime I needed to access the node?
>
> Thanks in advance for the help,
> C

Be careful with cashing node references. getElementById can be slightly
slower but also it is always safer.
For example we saved some node reference in variable. Then we modified
document.body.innerHTML. Reference we saved is dead now.

Val Polyakh

 
Reply With Quote
 
Laurent Bugnion
Guest
Posts: n/a
 
      09-15-2006
Hi,

(E-Mail Removed) wrote:
>
> Be careful with cashing node references. getElementById can be slightly
> slower but also it is always safer.
> For example we saved some node reference in variable. Then we modified
> document.body.innerHTML. Reference we saved is dead now.
>
> Val Polyakh


Actually, it's worse than just dead, it's a zombie, a reference to an
object which won't be garbage-collected unless you set it explicitly to
null. That could be the source of many a memory leak.

HTH,
Laurent
--
Laurent Bugnion, GalaSoft
Software engineering: http://www.galasoft-LB.ch
PhotoAlbum: http://www.galasoft-LB.ch/pictures
Support children in Calcutta: http://www.calcutta-espoir.ch
 
Reply With Quote
 
RobG
Guest
Posts: n/a
 
      09-15-2006

Laurent Bugnion wrote:
> Hi,
>
> (E-Mail Removed) wrote:
> >
> > Be careful with cashing node references. getElementById can be slightly
> > slower but also it is always safer.
> > For example we saved some node reference in variable. Then we modified
> > document.body.innerHTML. Reference we saved is dead now.
> >
> > Val Polyakh

>
> Actually, it's worse than just dead, it's a zombie, a reference to an
> object which won't be garbage-collected unless you set it explicitly to
> null. That could be the source of many a memory leak.


That's not a memory leak, it's just poor coding - the memory will be
released when the page is replaced. Obviously if you are going to
store references you need to manage them.


--
Rob

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Cannot append a node from XML into the HTML dom in IE vunet.us@gmail.com Java 1 04-19-2007 08:47 PM
xsl variable $node/text() but $node can non-node-set help! Tjerk Wolterink XML 2 08-24-2006 03:28 AM
How to set the node indent property between the parent node and the leaf node viveknatani@gmail.com ASP .Net 0 02-13-2006 07:11 PM
how to replace IMG node in DOM tree with html code Lukasz Indyk Javascript 4 04-06-2004 01:25 PM
[HELP] Create a DOM using a node from another node yio@free.fr Java 0 07-16-2003 12:30 PM



Advertisments