Telerik blogs

Internet Explorer JavaScript Performance Tip - use the "children" property

by Iana Tsolova
August 14, 2008 Web 0 Comments


Today I was profiling the initialization time of RadTreeView for ASP.NET Ajax and found out that the biggest bottleneck was traversing the DOM tree. The code looks something like this:

//get_childListElement() returns an HTML element 
var childNodes = parent.get_childListElement().childNodes; 
for (var i = 0, length = childNodes.length; i < length; i++) 
{ 
     var childNode = childNodes[i]; 
 
     //Perform additional initialization 
} 

I tested with 10000 elements and in IE7 I got about 25000ms whilst in FireFox the total time was around 33ms (Core 2 Duo @ 2.33GHz). Quite a difference if you ask me.

I thought that there may be some IE specific method/property which could perform better and I dug into MSDN. And a few minutes later I found the children property!!! Apparently the children collection contains only HTML elements (whilst childNodes is full of TextNode elements). I changed the code like this:

//get_childListElement() returns an HTML element 
var childNodes = parent.get_childListElement().children; 
for (var i = 0, length = childNodes.length; i < length; i++) 
{ 
    var childNode = childNodes[i]; 
 
    //Perform additional initialization 
} 

Lo and behold the total traverse time went down to around 30ms in IE7 !!! This is what I call a performance boost :)

To make it cross-browser friendly I ended up with this:

 

var childList = parent.get_childListElement(); 
var childNodes = childList.children || childList.childNodes; 

 

The bottom line is that you can expect some serious performance improvements in treeviews with lots of nodes. For example the initialization time of a fully expanded treeview with 10000 (10x10x10x10) nodes improved by 30% (3152ms vs. 2249ms). However if the total number of nodes per level is greater e.g. 10x1000 the performance boost is even bigger - 5590ms vs. 1851ms which is 66%.

I have attached a sample page with tests using unordered list with 10000 list items.

Source

ASP.NET, JavaScript, Performance, Telerik UI for ASP.NET AJAX, Web Forms
About the Author

Iana Tsolova

is Product Manager at Telerik’s DevTools division. She joined the company back in the beginning of 2008 as a Support Officer and has since occupied various positions at Telerik, including Senior Support Officer, Team Lead at one of the ASP.NET AJAX teams and Technical Support Director. Iana’s main interests are web development, reading articles related to geography, wild nature and latest renewable energy technologies.

Comments

Comments are disabled in preview mode.