 | ||
|
| ||
| ||
|
| ||
Michael Wallent
Lead Program Manager, DHTML
Microsoft Corporation
December 1, 1997
The following article was originally published in the Site Builder Magazine (now known as MSDN Online Voices) "DHTML Dude" column.
In previous articles I've shown you how to create exciting, interactive, immersible pages with Dynamic HTML. But how do you make those pages really fast?
As a program manager on the Microsoft Internet Explorer team, one of the ways I spend my days is doing code reviews of DHTML pages created by Microsoft developers. This month, I'll share some of the hard lessons we have learned about speeding the performance of DHTML pages.
To help you do just that, let's look at ways to reduce your download and your working set, and to optimize your script.
The key to reducing download time is obvious: Reduce the number of bits each page needs. Short of just making your pages shorter (and that's no fun), the best way to shrink download size is to reuse components that are common to two or more of your pages. With multiple DHTML pages on your site, you may notice that you use the same script code, time and time again.
Take the common routines that you tend to use on every page and move them into a .js (JScript™) file or a .vb (Visual Basic® Scripting Edition, or VBScript) file, and include the file with the SRC attribute on the script tag, as in the following:
<script src="myfile.js"></script>
Because you have moved the common source into a separate file, the file only has to be downloaded once. After the first download, the file stays in the browser cache, and never has to come over the wire again.
Another relatively obvious way to reduce page size is to take any Cascading Style Sheets (CSS) styles you have defined in <STYLE> elements and move them into a .css file. Your CSS file can be included in your document with a <LINK> tag, or an @import. Remember: The only thing that has to go into the CSS file is the text within the <STYLE></STYLE> tags. Don't include the <STYLE> tags in the CSS file.
<style>
@import url("sheet2.css");
</style>
<link rel=Stylesheet href="sheet1.css">
Remember that both the @import and LINK elements must be defined in the HEAD section of the document.
In a previous column, Getting Your Data into a Bind, I discussed the data-binding features of Internet Explorer. Data binding is a great way to reduce page download size.
Reducing the amount of memory (working set) your pages take up is a very easy way to make your pages faster, and delivers a lot of bang for the buck.
One simple mistake that many DHTML developers make (including me) is to use multiple script languages on the same page. When you use both VBScript and JavaScript on the same page, both script engines are loaded into memory. Simply rewriting your code to use only one language will make your pages faster.
The <IFRAME> tag is a beautiful thing. It allows you to include a second document inline in a regular HTML document without having to resort to a <FRAMESET>. Some developers use an IFRAME as a way to preview other documents. On the left side of the document will be a list of topics. On the right, an IFRAME that contains a document will be "previewed." As the mouse moves over each topic on the left, a new IFRAME reveals a new preview document on the right.
The heavy way to do this is to create one <IFRAME> for each preview document. All but the first document has the "display: none" CSS property set, so it will not appear, and will not take up space in the document. As the user mouses over each topic, a new IFRAME appears, and the previous one will be hidden.
Effective, but heavy. And heavy means slow.
The faster way to do this is to have a single IFRAME. As the user mouses over a new topic, simply change the SRC property on the IFRAME element. In this way, only one preview document is in memory at any time. Also, there is only one IFRAME element.
IFRAME elements are very powerful, but with that power comes a bit of extra heft. By reducing the number of documents in memory, and reducing the number of IFRAME elements, your pages will have a greatly reduced working set.
Now that your pages are smaller, and take up less memory, the last thing to improve is the performance of the code itself.
When using CSS positioning, there are a number of techniques that you can use to make your code faster. When accessing and setting the position of an element, most developers use the element.style.left and element.style.top properties. But there is a little problem. The left property, like all other CSS properties, is returned as a string. If you want to do math on the returned value, it first needs to be converted from a string to an integer. The other problem with the left and top properties is that the units of the property are also stored in the value (such as 10px or 10 percent). Math is then performed, and the value is reset.
dim stringLeft, intLeft stringLeft = element.style.left intLeft = parseInt(stringLeft) intLeft = intLeft + 10 element.style.left = intLeft;
There are actually additional properties: posLeft, posTop, posWidth, and posHeight. These properties are floating-point representations of their corresponding string property. They are in whatever unit the position is currently set with.
So, knowing this, you can condense the code above to:
element.style.posLeft += 10
Much smaller code, and much faster, too. Speed is particularly important when the position is constantly being updated to perform an animation effect.
Speaking of animation, one of the most common techniques for animating elements is to use a timer with window.setTimeout to position an element on the page incrementally. A quick tip: Use as few timers as possible. Timers consume valuable system resources, and the behavior of multiple timers, all working together, will greatly vary on differently powered machines. A way to animate multiple elements, while minimizing timer use, is to employ a single main loop, powered with a single window.setTimeout() call. In that single loop, keep a list of all elements you need to manipulate. Loop through that list with each tick, and perform your required move.
Positioned elements are commonly hidden and shown to create an interesting effect. Another quick tip: Use the visibility CSS property to hide and show absolutely positioned elements. There is no need to use the display CSS property - in the case of an absolutely positioned element, display and visibility have exactly the same effect. Remember that both display and visibility make an element disappear. The difference is that when an element is set to display: none, it no longer takes up space in the document flow. An element set to visibility: hidden is invisible, but still takes up space in the document flow. But an element that is absolutely positioned never takes up document flow space. So there is no difference in using display and visibility. Display is the more expensive of the two CSS properties, so if you are making elements appear and disappear often, visibility will be faster.
By minimizing download, reducing memory, and tuning your code, you will be able to create truly spectacular DHTML pages.
A parting comment: Start small. For your first DHTML page, try not to use every DHTML feature that you have read about. Add a single new feature at a time - carefully watching performance along the way. If performance drops, find out why. It's easier to tune as you go than right before that big deadline.
Michael Wallent, Site Builder Magazine (now known as MSDN Online Voices) monthly columnist on Dynamic HTML, is Microsoft's lead program manager for DHTML. Look for an interview with Michael 
on the Microsoft Developer Network Online site.
Every month, Site Builder Magazine (now known as MSDN Online Voices) columnist Nadja Vol Ochs explores Web design issues and solutions in Site Lights. And look for in-depth technical articles in the Design section of MSDN Online Web Workshop.
Did you find this material useful? Gripes? Compliments? Suggestions for other articles? Write us!
© 1999 Microsoft Corporation. All rights reserved. Terms of use.
Back to top