Telerik blogs

RadTreeView for ASP.NET Ajax - Optimizing Load On Demand performance

by Iana Tsolova
September 24, 2008 Web, ASP.NET AJAX 0 Comments


In a previous blog post I mentioned that you should use WebService load on demand in order to squeeze the most performance from RadTreeView. In this post I will show a few other tricks which can be used to improve the loading time even further. All techniques are optional and can be used independently.

We start with a simple page containing only a single RadTreeView control with one root node. The testing environment is:

  • Visual Studio 2008 SP1
  • Intel Core 2 Duo E6550 @ 2.33GHz.
  • IIS7 web site
  • Internet Explorer 7
  • Latest internal build of Telerik.Web.UI.dll (which will go live with the Q3 2008 release)

Here is the test page:

<telerik:RadScriptManager runat="server" ID="RadScriptManager1" /> 
 
<script type="text/javascript"> 
var start; 
 
function nodePopulating() 
{ 
    start = new Date(); 
} 
 
function nodePopulated() 
{ 
    var end = new Date(); 
    document.title = end - start; 
} 
 
</script> 
<telerik:RadTreeView runat="server" ID="RadTreeView1" 
    OnClientNodePopulating="nodePopulating" 
    OnClientNodePopulated="nodePopulated" 
    Height="300px" 
    Width="300px"> 
    <WebServiceSettings Method="GetNodes" Path="WebService.asmx"  /> 
    <Nodes> 
        <telerik:RadTreeNode Text="Expand" ExpandMode="WebService"> 
        </telerik:RadTreeNode> 
    </Nodes> 
</telerik:RadTreeView>  

The code in nodePopulating and nodePopulated is used to measure the actual time required to load 1000 nodes from web service.

Here is how the web service method looks like:

[WebMethod] 
public IEnumerable<RadTreeNodeData> GetNodes() 
{ 
    for (int i = 0; i < 1000; i++) 
    { 
        RadTreeNodeData data = new RadTreeNodeData(); 
        data.Text = "Node " + i; 
        yield return data; 
    } 
} 

Running this page will show an alert - "Error during serialization or deserialization using the JSON JavaScriptSerializer. The length of the string exceeds the value set on the maxJsonLength property". That's because the JSON output of 1000 RadTreeNodeData objects is too large. As a workaround let's add this in the web.config to increase the maxJsonLength property:

<system.web.extensions> 
  <scripting> 
    <webServices> 
      <jsonSerialization maxJsonLength="500000"> 
      </jsonSerialization> 
    </webServices> 
  </scripting> 
</system.web.extensions> 

Now the page runs fine. Expanding the node takes about 3500ms

image

Let's see if we can do anything to improve that time.

Use a custom class instead of RadTreeNodeData

The first thing to try is use a custom class to serialize less output than RadTreeNodeData. Here is what I mean:

[WebMethod] 
public IEnumerable GetNodes() 
{ 
    for (int i = 0; i < 1000; i++) 
    { 
        NodeData data = new NodeData(); 
        data.Text = "Node " + i; 
        yield return data; 
    } 
} 
 
class NodeData 
{ 
    public string Text { get; set; } 
} 

This dramatically decreases total size of JSON which goes back to the client browser. It also improves the time to load 1000 nodes to about 3000ms:

image

Do not persist nodes loaded on demand

Setting the PersistLoadOnDemandNodes property to false would also improve performance. However the nodes loaded on demand won't be able to fire server-side events (NodeClick, NodeDrop etc). There are workarounds still - using RadAjaxManager to simulate postbacks. Disabling node persistence cuts of the loading time almost in half - to about 1700ms:

image

Make sure ASP.NET Ajax scripts are not in debug mode

Either set <compilation debug="false"> in your web.config our set the ScriptMode property of the ScriptManager to "Release". This is a general performance tip when working with RadControls for ASP.NET Ajax. Always deploy your web sites with <compilation debug="false">. In this case the load time got to about 1400ms:
image

Line images affect performance

By using a skin with no line images (e.g. "Vista") or setting the ShowLineImages property to "False" you can improve the loading time even more - now it takes 756ms to load 1000 nodes!

image

Now let's try in the other browsers.

FireFox 3.0 - 230ms Google Chrome 0.2.149.30 - 229ms Opera 9.5 - 238ms
image image image
ASP.NET, Performance, Telerik UI for ASP.NET AJAX, TreeView, 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.