Home » Articles


Sponsored links

CodeDigest Navigation

Technology News
No News Feeds available at this time.

Community News
No News Feeds available at this time.
Better Practices on Building High performance Web Pages

By Bala Murali Balaji
Posted On Apr 02,2009
Article Rating:
Be first to rate
this article.
No of Comments: 4
Category: ASP.Net
Print this article.

Better Practices on Building High performance Web Pages


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.

Many developers do focus only on performance issues related to ASP.NET and feel that their job is over. It is important to note that your ASP.Net pages are rendered ultimately as HTML and DHTML. A bad and clumsy markup would often costs more and causes the real trouble.


This article narrates a few practices on boosting the performance of the webpages focusing only on the HTML and DHTML markup. These tips would help you to get more out of the Internet Explorer and other commonly used browsers.


For HTML pages, here are the points you need to consider:


Reuse HTML Components and External Scripts


Reuse your script by placing common code in a behavior or a separate file. IE browsers download the .js files when they are first used and for subsequent inclusions, they simply retrieve from the local cache.


Setting the lightweight attribute to true on an HTML Component's Component element improves the performance for an HTML Component that does not contain markup.


DEFER Your Scripts


Never forget to use the “DEFER” attribute of the <Script> tag. This attribute indicates that the code in the script element to get executed at the background and allow the rest of the contents of a page to be rendered seamlessly.


Author Hyperlinks Consistently


The case-sensitivity of the hyperlink texts across the web pages should be consistent,(i.e., home.aspx is not the same as HOME.aspx) Consistent URL references will reduce the time for the client to make requests to the server and for the server to resolve them.


Use Fixed-Size Tables


While using <Table> tags, do not forget to set the “table-layout” attribute to “fixed” Use the Col objects to indicate the number of columns and set the width attribute for each column.


Optimize Your Scripts


Wherever possible optimize your code by not using un-necessary iterations and if conditions. Try to limit the access to the DOM objects.


Scope Your Object References Wisely


Refer the object in use directly and wisely. To access the content of the <DIV> element with id div1, do not script as

var sText = document.all.div1.innerText;


var sText = div1.innerText


Close Your Tags


Though the HTML allows you to use implicitly closed tags, rendering of the page would be much faster when you close the tags explicitly.


Leverage the HTTP Expires Headers


Use the Expires attribute in HTTP headers to specify the future time the page expires. When the page is loaded for the first time, a timestamp is stored in to this header attribute; for subsequent attempts, page gets loaded from the local cache.


Use Cache-Control Extensions


Using cache-control HTTP response headers, pre-check and post-check extensions would drastically reduce the network traffic.


Response.AddHeader("Cache-Control", "post-check=900,pre-check=3600");


In the above example the server is indicating to Internet Explorer that the content will not change for one hour (pre-check=3600) and that it should retrieve the content directly from the local cache. On the off chance that the content is modified, if the user has requested the page after 15 minutes (900 seconds) have elapsed, Internet Explorer should still display the content found in the local cache, but it should also perform a background check and optional fetch of the content if the server indicates that the content has changed.


For Dynamic HTML pages (DHTML), here are the points you need to consider:


Batch Your DHTML Changes


It is important how you apply changes to the HTML content on your page. Make your changes in one place if you have multiple event handlers. Build a string of HTML and make one change to the document, rather than making multiple updates. If HTML content is not required, consider using the innerText property instead of innerHtml property.


Talk to Your innerText


It is faster to update the content of an element directly through the DHTMLinnerText property than to call the DOM createTextNode method


node.innerText = " Apples ";

is faster than

node.appendChild(  document.createTextNode( " Apples " ) );.


Use the DOM to Add Individual Elements


Accessing methods that apply HTML text causes the HTML parser to be invoked thus losing performance. It is faster to add elements using the createElement and insertAdjacentElement methods than to make a single call to the insertAdjacentHTML method.


 node = document.createElement( "SPAN" );

 node.innerText = " Apples ";

 divUpdate.insertAdjacentElement( "beforeEnd", node );


Expand Your Options in a SELECT Element


As an exception, use innerHTML property to add a large number of options to a <SELECT> tag dynamically. It is more efficient to use the innerHTML property than to call the createElement method to access the options collection.


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.




Hope you enjoyed reading these tips.


Courtesy: MSDN

Similar Articles
You can contribute to CodeDiget.Com:
Donate to
Article Feedback
In the cocitpmaled w
In the cocitpmaled world we live in, it's good to find simple solutions. [url=]dpyikqwlkvo[/url] [link=]wjfrvlq[/link]
That's an inventive
That's an inventive answer to an <a href="">inrenestitg</a> question
Full of salient poin
Full of salient points. Don't stop bevinlieg or writing! [url=]zyvevzxlpev[/url] [link=]ocjzvsozp[/link]
I thguoht finding th
I thguoht finding this would be so arduous but it's a breeze!