Search KB Filter article types
Client Performance Best Practices
Categories: Data Controls, Layout Controls, Best Practices
Tags: Architects, Developers, C#, VB.NET, 1. Beginner, 2. Intermediate, 3. Advanced, Pre v6.3, v6.3, v6.4 and Later
Revision: 1
Posted: 17/Feb/2010
Updated: 24/May/2010
Status: Publish
Types: Article

Overview

This article deals Visual WebGui best-practices for optimizing client-side performance

1) Making changes to a large amount of controls in a single containerIntro

Performance benefits will become more and more apparent the more controls you update in a single request scope that are contained in a single container.
That being said, it is generally better to use this practice even if you have as little as two or three controls modified, given that the container control is not a very complicated control, containing many other controls that are not changed.

Background
  • The VWG server-side updates the client using updates (as deltas) to an XML contained on the client-side that completely describes the current UI state.
  • Each Control changed in server-side is represented as an XML element in the XML sent to the client.
  • The client runs through this updates XML using JavaScript.
  • When running through this XML the JavaScript reads XML elements one by one.
  • For each Control element, it is searched for in the client DOM and the changes are made to the found DOM element. Once the DOM element is changed, the browser re-renders the changed element on the screen. Once done, the JavaScript moves to the next XML element.

  • The Control.Update() command causes a Control to be completely re-rendered on the client-side.
  • If a Control has child Controls, calling the Update command on the Control, will cause all child Controls to be re-rendered also.
Practice

Based on the previously detailed information, you probably guessed by now, that you should call the Update command on a Control that contains the child Controls that most or all get modified in a single request scope.The reason for this is simple:
Even if you have hundreds of Controls in a single container, and you decide to change most or all of them (for example unchecking hundreds of CheckBoxes, or disabling many TextBoxes), calling the Update command, on a containing Panel for example, would cause the following:
The CheckBoxes/TextBoxes for example would not be processed one by one, by the client JavaScript, but the containing Panel would be processed.
As a result, the only one control is searched for in the client DOM, and gets rewritten entirely - a fast procedure.

ReferencesArticlesForum ThreadsIssues
  • VWG-5814 - This issue contains a sample application.

About the author

Related Articles

Data Controls  
Title Update Author
Handling large amounts of data is always challenging. Even more so when working with AJAX since one has to work on seamlessly updating the local data cache as the user scrolls through the list. Visual WebGui’s list controls do just that. Visual WebGui unleashes the full power of lists and combos ena...
Tags: Architects, Developers, Data Binding, C#, 1. Beginner, 2. Intermediate, 3. Advanced, Data Binding, Pre v6.3, v6.3, v6.4 and Later
02/Jan/2008    2008/01/02
Tags: Architects, Developers, Data Binding, 2. Intermediate, 3. Advanced, Data Binding, Pre v6.3, v6.3, v6.4 and Later
02/Jan/2009    2009/01/02
.NET HTML5 Web, Cloud and Mobile application delivery | Sitemap | Terms of Use | Privacy Statement | Copyright © 2005-2012 Visual WebGui®       Visual WebGui weblog on ASP.NET Gizmox Blog Visual WebGui Group on LinkedIn Visual WebGui updates on Twitter Visual WebGui Page on Facebook Visual WebGui YouTube Channel Visual WebGui Platform News RSS