Client Performance Best Practices

From Visual WebGui Wiki

Contents 1 Overview 2 1) Making changes to a large amount of controls in a single container 2.1 Intro 2.2 Background 2.3 Practice 3 References 3.1 Articles 3.2 Forum Threads 3.3 Issues

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 container

Intro

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.

References

Articles

Forum Threads

• Disabling controls is very slow with IE

Issues

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