Performance Guidelines

This section provides best practices and guidelines for developing high performance and rich web applications using WebDesktop.NET components.

Use Theme architecture

Discover the great potential of utilizing Theme architecture in your web application which enabling you to build rich and professional WebForm and yet producing small amount of output size. You can use WebUI StyleManager which comes with WebDesktop.NET to visually manage the theme, edit and preview the style as well as deploy the theme.

By using Theme architecture, you are gaining up to 70% reduced output size.
For instance, having 10 controls inside a WebForm will produce "set of Css Class" per instance. Typically, the "Css Class" definition will increase approximately 70% of page size especially when the control is a complex-styled component. Please see following illustration for in-depth details:

Without using Theme Architecture

The styles of each component's instance will be delivered to page's output. The following is a sample of only one desktop manager instance:

.WebDesktopManager1-FrameStyle{background-color:WhiteSmoke;}
.WebDesktopManager1-WindowSettings-WindowStyle-Normal{background-color:White; font-family:Tahoma; font-size:8pt; font-weight:normal;border:1px Silver solid;}
.WebDesktopManager1-WindowSettings-WindowStyle-Active{background-color:White; font-family:Tahoma; font-size:8pt; font-weight:normal;border:1px Gray solid;basestyle:Normal;}
.WebDesktopManager1-WindowSettings-CaptionStyle-Normal{background-color:Gray; font-family:Tahoma; font-size:10pt; font-weight:bold; color:White;cursor:Default;filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF808080 , endColorstr=#FFDCDCDC, GradientType=1); padding-top:2px; padding-right:2px; padding-left:2px; padding-bottom:2px;overflow:Auto;overflow-x:Auto;overflow-y:Auto;}
.WebDesktopManager1-WindowSettings-CaptionStyle-Active{background-color:Navy; font-family:Tahoma; font-size:10pt; font-weight:bold; color:White;cursor:Default;filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF000080 , endColorstr=#FFFF0000, GradientType=1); padding-top:2px; padding-right:2px; padding-left:2px; padding-bottom:2px;overflow:Auto;overflow-x:Auto;overflow-y:Auto;basestyle:Normal;}
.WebDesktopManager1-WindowSettings-CaptionButtonStyle-Normal{border:1px Black solid;height:17px;overflow:Hidden;overflow-x:Hidden;overflow-y:Hidden;}
.WebDesktopManager1-WindowSettings-CaptionButtonStyle-Over{border:1px Black solid;border-right: 1px Gray solid;border-bottom: 1px Gray solid;height:17px;overflow:Hidden;overflow-x:Hidden;overflow-y:Hidden;basestyle:Normal;}
...
...

Using Theme Architecture

When Theme Architecture is applied appropriately to all Intersoft's components; the styles will not be delivered to the Page's output. Instead, a <link> tag will be inserted to the Page referring to the automatically generated css file produced by the Theme Architecture.

For more information about the concepts and theme's features, see Theme Architecture.
For more information about the relation between WebUI StyleManager and Theme Architecture, see The Orchestration of Theme Architecture, WebStyleManager and Deployment.

Enable CssName Optimization

Css Optimization is a new technology introduced along with the release of WebDesktop.NET. Css Optimization is implemented in Framework level and therefore automatically available to all Intersoft's products such as WebGrid.NET Enterprise, WebCombo.NET etc.

When enabled, Css Optimization can reduce up to 50% of the overall page's output size, especially in the case when most of the controls are inside user control or templates.

For instance, a css style definition typically has the following format when the control is inside template:

<style>
.MasterPage1_Content1_Panel1_WebGrid-LayoutSettings-FrameStyle { color: white; ... }
</style>

After Css Optimization enabled, it will automatically produced shortened style definition regardless of the containment mode.

<style>
.W8625 { color: white; ... }
</style>

To learn how to enable and utilize Css Optimization in your application, see Css Optimizer.

Css Optimization is implemented in WebUI.NET Framework version 3.0. The version 3.0 has been compiled against native .NET 2.0 Framework to take advantage of new security and performance enhancements.

Enable XmlCompression

Intersoft's WebUI.NET Framework extensively utilizes Xml for its backend for client side storage, instead of using traditional "unstructured Array". The new Xml approach introduced many new features and possibilities such as the capability to construct object type and hierarchy in client side which has exactly the same hierarchy as in server side. Although there are countless benefits of using this Xml approach, there is one potential weakness: larger output. The larger output does make sense because the xml format is 'self describing".

The XmlCompressor technology introduced in WebUI.NET Framework 3.0 was developed to solve this weakness and therefore allowing "best of both worlds" benefits while using the Xml approach as clientside's data storage.

When enabled, XmlCompressor is capable to reduce page's output by 40%. Furthermore, when combined in FlyPostback control such as WebCombo.NET or WebGrid.NET Enterprise, it significantly improves response time without sacrificing the powerful functionalities. The improvement was made possible because the FlyPostback sends "compressed xml string" which is 40% smaller.

Disable ViewStateStorage whenever applicable

ViewStateStorage is a feature introduced in WebUI.NET Framework 2.0 allowing the view state of Intersoft's controls to be stored in custom storage without additional codes or efforts.

The view state persistence is useful when used in the conditions where properties such as styles or behaviors are changed dynamically at runtime. The persistence would then be able to track the changes and restore back the modified properties in next postback. With proper understanding of this concept, you may disable the view state persistence in Intersoft's components by setting the ViewStateStorage to None.

When set to None, there are significant performance gain during page load life cycle since that the controls' serialization doesn't need to be performed in many circumstances.

ViewStateStorage does not related to EnableViewState and you should always leave the EnableViewState property to True in order for the default ASP.NET process to manage control's internal states.

Gradient Style Guidelines

Intersoft's components offers rich styles for User Interface appearance. One of the most popular styles is gradient background color. The gradient background color takes advantage of Internet Explorer's special Gradient visual effect and therefore requires designer to properly understand the best applicable elements for using the effect.

Following are some guidelines for using the gradient effect:

- Do not apply gradient in "repetitive elements".
For instance, applying gradient to "row" or "cell" element is not recommended as it would cause significant performance degrade due to more resources consumption.

- Apply gradient in surface which has "layout".
For instance, statusbar element, captionbar, groupbox, frame element etc.

- Limit the number of elements using gradient effect in a page.
Although there are no known limitations to maximum number of elements using gradient effect in one page, it is advised that you apply the gradient effectively for design consistency and art.
Use Overflow=Visible style whenever possible

Most of elements in component's user interface do not need automatic overflow style. You should always check and ensure that the Overflow, OverflowX and OverflowY of every Style to use Visible value.

The default Overflow, OverflowX and OverflowY property in Intersoft's WebStyle is Auto.
Use Animation effectively

In components that support Animation, it's recommended that you perform thorough testing when Animation is enabled. In most cases, Animation can be enabled without slowing down performance. However, too much use of Animation in one page could even cause inconvenience and ineffective user experience.
Determines the best configuration for FlyPostbackSettings

FlyPostbackSettings property is exposed to all Intersoft's controls that implement IFlyPostback to support the capability to refresh certain area of Page without full page postback (also known as callback or AJAX). This setting lets developer to have more granular control over the actions being done when performing FlyPostback.

Following are the list of features which may be turned off to improve the response time of FlyPostback request. These settings can be found in FlyPostbackSettings object in control's instance:
- PostViewState.
  
  The value is True by default. When set to true, FlyPostback will automatically restores the viewstate of all server controls available in the page. So, if you do not access other controls' properties in FlyPostback context, you can safely set this property to False. This will give significant improvement especially when the viewstate of the Page is large.
- PostHiddenFields.
  
  The default value is True. If you do not access hidden fields on page load or in FlyPostback requests, you can safely turn off this feature by setting it to False.
- PostInputControls.
  
  The default value is False. This feature enables you to get the latest value for the html input fields in the FlyPostback context. If you do not need to access other controls' value (such as TextBox's value), then you should have this property's value remain False.
- PostControlState.
  
  This is a new property added in WebUI.NET Framework Build 12. The default value is True. In previous build, you have to turn on PostHiddenFields in order for the FlyPostback's control to maintain its state properly during request. However, since PostHiddenFields also send out other controls' hidden fields, it becomes ineffective and causing slower response time due to larger post data. Now, you can safely turn off PostHiddenFields and leaving this property value to True.
  
  The control state is the most interesting point in the features above since it needs to be configured properly; otherwise client interactions will react improperly. The best value for this configuration is based on the nature of product and which features are enabled. For example, in WebCombo, you may turn off this feature since WebCombo did not have as much client interaction as in WebGrid. As for WebGrid, this feature is recommended to be turned on (by default). There are however, certain scenarios where you can safely turn off this feature in WebGrid. For instance, if your Grid instance does not require clientside user interactions features such as column moving, resizing, sorting, filtering or others, then you can safely turn off this feature. These scenarios are suitable for application which requires only hierarchical load on demand Grid mode or self hierarchical load on demand feature.

For more details on improving FlyPostback performance, see the full article in KB: Improving FlyPostBack performance.