Better Practices on Building High performance Web

This article details out the better practices on how to get the most out of your web pages in terms of delivering, parsing and rendering the content on a web browser.

Your web page consists of a whole bunch of HTML and DHTML tags to represent the content you intend to display statically or dynamically. All you got to worry upon developing the content is how it is going to be rendered on a browser making the user/viewer experience delightful.

Use the DOM to Update Tables

It is more efficient to insert table rows and cells using DOM methods than to use the insertRow and insertCell methods that are part of the DHTML table object model.

Write Once, Use Many Times

Place your common script operations in a DHTML attached or element behavior.  Behaviors provide a great way to reuse script and build components that can be accessed from HTML, enabling you to extend the DHTML object model with your own objects, methods, properties and events.

Element Behavioral issues

Using the textOverflow property to render ellipses is an efficient alternative to building ellipses in DHTML. Use the literalContent attribute to make parsing of Element Behaviors more performant.

Include an ID for the saveFavorite, saveHistory, and userdata Element behaviors to improve their performance.

Don't Be Too Dynamic with Your Properties

Dynamic properties allow you to use an expression as a property value. This expression is evaluated at run time, and the resulting value is applied to the property. It can be used to reduce the amount of script on the page, but it can also have an adverse effect on performance because the expressions must be recalculated regularly and often have dependencies on other property values.

Data Binding is Good for You

Use data binding to provide rich client-side data views. A Web page may present a company data as a line, bar or pie chart with buttons to sort the data by office, product or sales period. All this can be provided with only one visit to the server with Data Binding improving the performance.

Keep Your Expando Properties Off the Document

Expando properties are arbitrary properties that can be added to any object. They are useful for storing information within the current Web page and are another way to extend the DHTML object model. For example, you could assign a clicked property on your HTML elements and use this to indicate to the user which elements have been clicked.

Be sure to set the Expando properties on the window object. If you set them on the document object, it must perform additional recalculations when you access the property.

Avoid switching classes and style rules

Directly modify the style object when changing your content presentation. If your Web site uses style sheets to provide alternative views of your content, consider modifying the style object directly for the elements you wish to change, rather than modifying an element’s className property or the styleSheet object associated with a class.

Switching classes and style rules can be an expensive operation, requiring recalculation and layout of the entire document.

High Performant ActiveX Controls

ActiveX controls that are not apartment-model aware will suffer from degraded performance.  A windowless ActiveX control often performs better than a windowed control.

Collapse a Text Range before Finding the Parent

A TextRange object represents an area of text that has been selected by the user or retrieved from an HTML element such as the body. The parent of the text range can be identified by calling the parentElement method. For complex text ranges, it is more efficient to call the collapse method before calling the parentElement method.