Login | Register   
RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Speed Up Rendering

You can improve the performance of your Web application by improving the speed at which your browser renders your resultant HTML.




Full Text Search: The Key to Better Natural Language Queries for NoSQL in Node.js

s an ASP programmer, you are no doubt focused on improving the performance of your Web application. You are probably busy improving your database access performance as well as the performance in your COM components, if you are using any. Did you know that you could improve the performance of your Web application by improving the speed at which your browser renders your resultant HTML? To your end user, the Web page loads and renders faster, and wins you the accolades.

This apparent improvement in performance can be achieved by using little-known techniques that can assist a browser as it renders your HTML page on screen. Let's see how.

Nesting Tables?
One common technique to lay out a Web page is to use HTML Tables to enforce a structure on a page. So if you are building a Web site with a top navigation (nav) bar and two columns—a left nav bar and a right content area—you would build it with one large table with two rows and two columns. In the first row, the columns are merged and a smaller top nav table is inserted. In the second row's left column, you would include a second table that displays the navigation buttons. In the bottom right column, you would include the actual content of the page within a second table. This nesting of tables within tables produces great results.

To create a Web page that looks like this, you would use the following code:

<TABLE BORDER="0"> <TR> <TD COLSPAN="2"><!-- content for top nav bar --></TD> </TR> <TR> <TD ALIGN="LEFT" VALIGN="TOP"><!-- content for left nav bar --></TD> <TD ALIGN="LEFT" VALIGN="TOP"><!-- content for body of page --></TD> </TR> </TABLE>

A browser will not start rendering a page on screen when it finds a TABLE tag unless it receives its corresponding ending </TABLE> tag. So if your entire Web page is within a table that, in turn, is within an outer table, the entire page will not be drawn till the final </TABLE> tag of the outer table has been downloaded. This can cause those momentary pauses in rendering that you see when you visit sites that are bringing down a large amount of data (for example, a search result or a product catalog in an e-commerce site). To prevent this, break your page down into smaller TABLE chunks. As each table's HTML code is downloaded, the browser will start to render it on screen. To your visitor, the page will appear on screen in gradually increasing spurts and more importantly, the page will "appear" to begin displaying on screen much faster than having to wait for the entire page's code to be downloaded.

To take the example I outlined above, instead of having a single outer table, break up the page into three separate tables. Use the first table to display the top nav elements, making it sufficiently wide enough to fit your page content and complete the <TABLE></TABLE> code for it. Underneath that, arrange a second table that is ALIGNED left. Use a third table to hold the contents of your page's body. Since each section is a complete TABLE, each section will get rendered as soon as the code for the section is downloaded. So your top nav bar and the left nav bar will be rendered far earlier than the rest of the page. This gives the illusion that the page has started to download and will be on the screen any moment, rather than have the user stare at a blank white screen and get disillusioned.

Use the following code:

<TABLE BORDER="0" WIDTH="100%"> <TR> <TD ALIGN="CENTER" VALIGN="TOP"><!-- content for top nav bar --></TD> </TR> </TABLE> <TABLE BORDER="0" ALIGN="LEFT"> <TR> <TD ALIGN="LEFT" VALIGN="TOP"><!-- content for left nav bar --></TD> </TR> </TABLE> <TABLE BORDER="0"> <TR> <TD ALIGN="LEFT" VALIGN="TOP"><!-- content for page body --></TD> </TR> </TABLE>

Remember to Close Other Tags Too!
Just as closing your TABLE tags early helps your browser to render the table data quickly, there are a couple of other often-used tags that also benefit from this same technique. These are the <OPTION> tags used to generate List Boxes and Combo Boxes and the <LI> tags to generate Bullet list items.

Often, the ASP programmer will access a database and construct the <OPTION> tags for a combo box or a list box based on data from a database. A simple change in code to ensure that you are closing your <OPTION> tags will make your page render faster in your user's browser.

So, instead of using this code:

Do while not objRS.EOF strOptionList = strOptionList & "<OPTION VALUE=""" & objRS("ID") & _ """>" & objRS("ProductName") objRS.MoveNext Loop Response.Write "<SELECT SIZE=""1"">" & strOptionList & "</SELECT>"

Simply change one line of code:

Do while not objRS.EOF strOptionList = strOptionList & "<OPTION VALUE=""" & objRS("ID") & _ """>" & objRS("ProductName") & "</OPTION>" objRS.MoveNext Loop Response.Write "<SELECT SIZE=""1"">" & strOptionList & "</SELECT>"

Instead of using this code:

<UL> <LI>Apples <LI>Oranges <LI>Bananas </UL>

Use this:

<UL> <LI>Apples</LI> <LI>Oranges</LI> <LI>Bananas</LI> </UL>

And viola, your page will appear faster in your user's browser.

I am not belittling the importance of improving your ASP performance; I will be devoting future columns to this concept. However, among the slew of "tips and techniques" that you can find in books and online, one tends to forget that by making these simple changes to your HTML code, you stand to gain a lot in terms of page rendering time and apparent speed of your Web application.

Rama Ramachandran is the Director of Technology with Imperium Solutions and is a Microsoft Certified Solution Developer and Site Builder. He has extensive experience with building database systems and has co-authored several books including Professional Visual InterDev 6 Programming and Professional Data Access (Wrox). Rama also teaches Visual Basic and Web Development at Fairfield University and University of Connecticut.
Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



Thanks for your registration, follow us on our social networks to keep up-to-date