Re: Digest Number 999
Gerry Hornik <[email protected]> Fri, 7 Apr 2006 11:20:02 -0400
| Newsgroups | gmane.comp.web.dom.wdf |
|---|---|
| Message-ID | <[email protected]> |
In your firstChild, nextSibling version you left out the code necessary to apply the change only to the "li" elements (you're applying it to every node regardless of type). This would require additional calls to the DOM, which would most certainly add execution time to the solution. I would opt for the getElementsByTagName version. On Apr 7, 2006, at 4:27 AM, [email protected] wrote: There are 5 messages in this issue. Topics in this digest: 1. which is faster target.getElementsByTagName or target.firstChild / nextSibling From: "becs027" <[email protected]> 2. RE: which is faster target.getElementsByTagName or target.firstChild / nextSibling From: "Moran Ben-David" <[email protected]> 3. RE: which is faster target.getElementsByTagName or target.firstChild / nextSibling From: "Ryan Hicks" <[email protected]> 4. Re: which is faster target.getElementsByTagName or target.firstChild / nextSibli From: "becs027" <[email protected]> 5. Re: which is faster target.getElementsByTagName or target.firstChild / nextSibling From: Chris <[email protected]> ________________________________________________________________________ ________________________________________________________________________ Message: 1 Date: Thu, 06 Apr 2006 23:43:43 -0000 From: "becs027" <[email protected]> Subject: which is faster target.getElementsByTagName or target.firstChild / nextSibling Hi all, I'm doing an onload script to add rollover behaviour to list items (dropdown menu style) for IE, and want to check which of two ways is faster. ------------------------------------------------ Option 1 - add the behaviour using target.getElementsByTagName: if (document.getElementById('navigation')) { var target = document.getElementById('navigation'); var targetbuttons = target.getElementsByTagName('li'); for (var i = 0; i < targetbuttons.length; i++) { targetbuttons[i].onmouseover = rollover; targetbuttons[i].onmouseout = rolloff; } } ------------------------------------------------ Option 2 - add the behaviour with a while loop using firstChild, nextSibling: if (document.getElementById('navigation')) { var target = document.getElementById('navigation'); var targetbutton = target.firstChild; while (targetbutton) { targetbutton.onmouseover = rollover; targetbutton.onmouseout = rolloff; targetbutton = targetbutton.nextSibling; } } ------------------------------------------------ Thanks :) Rebecca ________________________________________________________________________ ________________________________________________________________________ Message: 2 Date: Thu, 6 Apr 2006 20:13:48 -0400 From: "Moran Ben-David" <[email protected]> Subject: RE: which is faster target.getElementsByTagName or target.firstChild / nextSibling You could try calling these functions in a loop 1000 times and measuring the time to execute the loop. This way you have a test that can you can run on each browser you intend to support. moran > -----Original Message----- > From: [email protected] [mailto:[email protected]] On > Behalf > Of becs027 > Sent: Thursday, April 06, 2006 7:44 PM > To: [email protected] > Subject: [wdf-dom] which is faster target.getElementsByTagName or > target.firstChild / nextSibling > > Hi all, > > I'm doing an onload script to add rollover behaviour to list items > (dropdown menu style) for IE, and want to check which of two ways is > faster. > > ------------------------------------------------ > > Option 1 - add the behaviour using target.getElementsByTagName: > > if (document.getElementById('navigation')) { > var target = document.getElementById('navigation'); > var targetbuttons = target.getElementsByTagName('li'); > > for (var i = 0; i < targetbuttons.length; i++) { > targetbuttons[i].onmouseover = rollover; > targetbuttons[i].onmouseout = rolloff; > } > } > > ------------------------------------------------ > > Option 2 - add the behaviour with a while loop using firstChild, > nextSibling: > > if (document.getElementById('navigation')) { > var target = document.getElementById('navigation'); > var targetbutton = target.firstChild; > > while (targetbutton) { > targetbutton.onmouseover = rollover; > targetbutton.onmouseout = rolloff; > targetbutton = targetbutton.nextSibling; > } > } > > ------------------------------------------------ > > Thanks :) > Rebecca > > > > > > Unsubscribe > [email protected] > > List info > http://www.quirksmode.org/dom/list.html > Yahoo! Groups Links > > > > > ________________________________________________________________________ ________________________________________________________________________ Message: 3 Date: Thu, 6 Apr 2006 17:15:18 -0700 From: "Ryan Hicks" <[email protected]> Subject: RE: which is faster target.getElementsByTagName or target.firstChild / nextSibling Rebecca, My vote would likely be for the getElementsByTagName, simply because the conditional in the other option would have to reference the DOM an additional time for each iteration. However, votes aside, you can always test the amount of time your code takes to execute by doing something like the following: var dStart = new Date(); ...chunk of code... var dEnd = new Date(); var nTimeDiff = dEnd.getDate() - dStart.getDate(); alert('Execution time: ' + nTimeDiff + 'ms'); Without having your actual DOM, I can't test these two scenarios to verify if my vote is correct. If you find that this technique gets you an answer, I'd love to know which version wins out! -ryan -----Original Message----- From: [email protected] [mailto:[email protected]] On Behalf Of becs027 Sent: Thursday, April 06, 2006 4:44 PM To: [email protected] Subject: [wdf-dom] which is faster target.getElementsByTagName or target.firstChild / nextSibling Hi all, I'm doing an onload script to add rollover behaviour to list items (dropdown menu style) for IE, and want to check which of two ways is faster. ------------------------------------------------ Option 1 - add the behaviour using target.getElementsByTagName: if (document.getElementById('navigation')) { var target = document.getElementById('navigation'); var targetbuttons = target.getElementsByTagName('li'); for (var i = 0; i < targetbuttons.length; i++) { targetbuttons[i].onmouseover = rollover; targetbuttons[i].onmouseout = rolloff; } } ------------------------------------------------ Option 2 - add the behaviour with a while loop using firstChild, nextSibling: if (document.getElementById('navigation')) { var target = document.getElementById('navigation'); var targetbutton = target.firstChild; while (targetbutton) { targetbutton.onmouseover = rollover; targetbutton.onmouseout = rolloff; targetbutton = targetbutton.nextSibling; } } ------------------------------------------------ Thanks :) Rebecca Unsubscribe [email protected] List info http://www.quirksmode.org/dom/list.html Yahoo! Groups Links ________________________________________________________________________ ________________________________________________________________________ Message: 4 Date: Fri, 07 Apr 2006 02:00:55 -0000 From: "becs027" <[email protected]> Subject: Re: which is faster target.getElementsByTagName or target.firstChild / nextSibli Thanks. I get weird results, and had to change the timediff bit a little to get a result, I used: var nTimeDiff = dEnd.getMilliseconds() - dStart.getMilliseconds(); In Firefox 1.5: getElementsByTagName took 313ms firstChild / nextSibling took 516ms In Internet Explorer 6: getElementsByTagName took 265ms firstChild / nextSibling took 156ms So looks like it depends on the browser. My function is only for IE which helps :) Cheers Rebecca --- In [email protected], "Ryan Hicks" <ryan.c.hicks@...> wrote: > > Rebecca, > > My vote would likely be for the getElementsByTagName, simply because the > conditional in the other option would have to reference the DOM an > additional time for each iteration. > > However, votes aside, you can always test the amount of time your > code > takes to execute by doing something like the following: > > var dStart = new Date(); > > ...chunk of code... > > var dEnd = new Date(); > var nTimeDiff = dEnd.getDate() - dStart.getDate(); > alert('Execution time: ' + nTimeDiff + 'ms'); > > Without having your actual DOM, I can't test these two scenarios to verify > if my vote is correct. If you find that this technique gets you an answer, > I'd love to know which version wins out! > > -ryan > > -----Original Message----- > From: [email protected] [mailto:[email protected]] On Behalf Of > becs027 > Sent: Thursday, April 06, 2006 4:44 PM > To: [email protected] > Subject: [wdf-dom] which is faster target.getElementsByTagName or > target.firstChild / nextSibling > > Hi all, > > I'm doing an onload script to add rollover behaviour to list items > (dropdown menu style) for IE, and want to check which of two ways is > faster. > > ------------------------------------------------ > > Option 1 - add the behaviour using target.getElementsByTagName: > > if (document.getElementById('navigation')) { > var target = document.getElementById('navigation'); > var targetbuttons = target.getElementsByTagName('li'); > > for (var i = 0; i < targetbuttons.length; i++) { > targetbuttons[i].onmouseover = rollover; > targetbuttons[i].onmouseout = rolloff; > } > } > > ------------------------------------------------ > > Option 2 - add the behaviour with a while loop using firstChild, > nextSibling: > > if (document.getElementById('navigation')) { > var target = document.getElementById('navigation'); > var targetbutton = target.firstChild; > > while (targetbutton) { > targetbutton.onmouseover = rollover; > targetbutton.onmouseout = rolloff; > targetbutton = targetbutton.nextSibling; > } > } > > ------------------------------------------------ > > Thanks :) > Rebecca > > > > > > Unsubscribe > [email protected] > > List info > http://www.quirksmode.org/dom/list.html > Yahoo! Groups Links > ________________________________________________________________________ ________________________________________________________________________ Message: 5 Date: Fri, 07 Apr 2006 00:14:09 -0400 From: Chris <[email protected]> Subject: Re: which is faster target.getElementsByTagName or target.firstChild / nextSibling I've never run a time test on these 2 approaches, but in my experience writing the CSS selector portion of JsEventDefs, which wins depends on what you're trying to do. .getElementsByTagName works great if you're trying to get a list of tags regardless of parent/child relationship - sort of like a simple selector, 'li' for example. One reason is because you offload looping through the DOM to the browser, but another is because you don't need to filter for TextNodes getting mixed in with your Elements. .firstChild/.nextSibling work better if parent/child is important - 'ul li ul li' for example. The filtering operation you need to run on the results of .getElementsByTagName is more expensive than the time you saved by getting all those tags in one batch. In many cases, much, much more expensive. In the case of JsEventDefs, for the next version I intend to use the Strategy design pattern to use different methods for fetching tags, depending on what the selector looks like. The current version uses the .getElementsByTagName approach alone, and suffers on selectors like 'div.tree li li li'. -Chris Moran Ben-David wrote: > You could try calling these functions in a loop 1000 times and > measuring the > time to execute the loop. This way you have a test that can you > can run on > each browser you intend to support. > >> -----Original Message----- >> From: [email protected] [mailto:[email protected]] On >> Behalf >> Of becs027 >> I'm doing an onload script to add rollover behaviour to list items >> (dropdown menu style) for IE, and want to check which of two ways is >> faster. >> >> ------------------------------------------------ >> >> Option 1 - add the behaviour using target.getElementsByTagName: >> Option 2 - add the behaviour with a while loop using firstChild, >> nextSibling: >> >> Thanks :) >> Rebecca >> ________________________________________________________________________ ________________________________________________________________________ Unsubscribe [email protected] List info http://www.quirksmode.org/dom/list.html ------------------------------------------------------------------------ Yahoo! Groups Links ------------------------------------------------------------------------ Unsubscribe [email protected] List info http://www.quirksmode.org/dom/list.html Yahoo! Groups Links <*> To visit your group on the web, go to: http://groups.yahoo.com/group/wdf-dom/ <*> To unsubscribe from this group, send an email to: [email protected] <*> Your use of Yahoo! Groups is subject to: http://docs.yahoo.com/info/terms/