Javascript getelementsbytagname efficiency

Question

Javascript getelementsbytagname efficiency

This is my HTML code.

<html> <head> <title> Test Page </title> <script type='text/javascript'> function test() { var ta = document.getElementsByTagName('body')[0].getElementsByTagName('li'); } </script> </head> <body onload='test()'> <ul> <li> Test 1 </li> <li> Test 1 </li> <li> Test 1 </li> <li> Test 1 </li> </ul> </body> </html>

Which of the following is better and why?

 document.getElementsByTagName('body')[0].getElementsByTagName('li') document.getElementsByTagName('li')

In addition, I could not find the documentation or the link for implementing getElementsByTagName in browsers [at least an overview of some major browsers], although I found really interesting things about document.getElementById, that it’s a kind of hash search at least in firefox and chrome; I also wish to help in the implementation.

+4

javascript html

Tamil Feb 11 '12 at 16:30

source share

4 answers

First, you should avoid functions inside functions in order to increase performance and, in addition, the DOM more slowly .

You can reorganize your code as follows:

 function getLis(){ return document.getElementsByTagName('li'); } function test() { var ta = getLis(); }

Thus, javascript only stores these two functions in memory once, and you call them as many times as you want.

According to your question, it should be faster later, because it has fewer calls:

 document.getElementsByTagName('li')

Regarding speed, my guess was right, I created a test case in jsperf:

Speed test

Results:

document.getElementsByTagName ('Li')

 2,141,067 ±2.07% fastest

document.getElementsByTagName ('body') [0] .getElementsByTagName ('Li')

 704,856 ±4.40% 67% slower

And Screenshot:

+4

Sarfraz Feb 11 '12 at 16:36

source share

Both lines of code are essentially the same, except for document.getElementsByTagName ('li') will search from the top level of the document, which is, but, as @ jfriend00 pointed out, you should refer to the body tag as a document . body.

Using document.getElementsByTagName with .getElementById will be much more efficient in large DOM structures. For example, if you have the identifier # my-list on ul, you could

 var mylist = document.getElementById('#my-list'); var lis = mylist.getElementsByTagName('lil);

Modern browsers have better DOM search methods like querySelectorAll, check this resource https://developer.mozilla.org/en/DOM/Document.querySelectorAll

0

Troy watt Feb 11 '12 at 16:41

source share

Despite the fact that the last test gave me an error, you can check it here: http://jsperf.com/document-body-id

I did some tests with 200k interactions. The results showed me that document.get ... is as fast as a saved version of the body (31 ms); version of document.body.get ... was the slowest (52 ms). So use the document directly: D

0

Eliseu monar dos santos Feb 11 '12 at 16:42

source share

jfriend00 · Accepted Answer · 2012-02-11T16:35:20+0000

First of all, you should never get a body tag with this:

 document.getElementsByTagName('body')[0]

It is always useful to use the built-in property for the body:

 document.body

Secondly, all performance questions should be answered by testing results with a tool such as jsPerf . In this case, you can create a test that compares between the two if you want, but I think the point is debatable, given the previous simplification:

 document.getElementsByTagName("li")

and

 document.body.getElementsByTagName("li")

In jsPerf, which I built to test this , document.getElementsByTagName('li') is the fastest, followed by document.body.getElementsByTagName('li') and document.getElementsByTagName('body')[0].getElementsByTagName('li') . slow.

Here is a screenshot of the test from several browsers:

Javascript getelementsbytagname efficiency

Speed ​​test

More articles:

Speed test