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

Posted by: the telerik blogs, on 24 Sep 2008 | View original | Bookmarked: 0 time(s)

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

Category: Performance | Other Posts: View all posts by this blogger | Report as irrelevant | View bloggers stats | Views: 4537 | Hits: 9

Similar Posts

  • RadElement Lifecycle – a WinForms TPF Story more
  • Telerik Registers Exponential Growth of Its Portfolio - Q3 Release more
  • Silverlight TreeView Load on Demand more
  • AJAX >> Using AJAX to load a usercontrol that has refers to a custom css file more
  • Comparing times for loading models of different (exaggerated) sizes more
  • Batch JavaScript Libraries for Increased Performance more
  • TreeView and Web Services more
  • RadListBox & RadComboBox for WinForms get a performance boost in Q3 2007 SP1 more
  • Web Service Data Loading with Navigation Controls more
  • Difference between our two AJAX books more

News Categories

.NET | Agile | Ajax | Architecture | ASP.NET | BizTalk | C# | Certification | Data | DataGrid | DataSet | Debugger | DotNetNuke | Events | GridView | IIS | Indigo | JavaScript | Mobile | Mono | Patterns and Practices | Performance | Podcast | Refactor | Regex | Security | Sharepoint | Silverlight | Smart Client Applications | Software | SQL | VB.NET | Visual Studio | W3 | WCF | WinFx | WPF | WSE | XAML | XLinq | XML | XSD