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;

instead,

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.