Performance Improvements in Internet Explorer 8 Beta 2 (Cont.) Great New Features In Internet Explorer 8 Beta 2 Microsoft is introducing several new features that developers can take advantage of to improve their site performance. Several of those features have been discussed in other articles in this issue. | " |
One of the things that Web developers have told us is that they need a way to extend the DOM with cutting-edge new features they can deliver as rapidly as their business demands.
| " |
Sunava Dutta introduced the Microsoft implementation of the HTML5 specification’s DOM Storage, Cross-Document Request (XDR), and Connectivity Events in his article, “Better AJAX Development with Internet Explorer 8 Beta 2”. Web developers can take advantage of these great cross-platform features to speed up their sites. Beyond these three key features, John Hrvatin has introduced the JScript profiler built into the Internet Explorer 8 Beta 2 developer tools. A crucial addition to any Web developer’s toolbox, the profiler gives site authors the tools they need to understand and improve the speed of their sites. In addition to these great enhancements, Internet Explorer 8 Beta 2 includes support for several new standards that developers can exploit to build lighting fast sites. The Internet Explorer 8 Beta 2 implementation of the ECMAScript 3.1 JSON recommendation, support for mutable DOM prototypes, and native support for the Selectors API are all cutting edge features that will form the basis for the next generation of Web sites and frameworks. Native JSON support JavaScript Object Notation (JSON) is a lightweight data-interchange format based on a subset of the object literal notation of the JScript language and is often used to pass data between components of AJAX websites. Unfortunately, many sites don't use JSON securely and rely on the JavaScript eval method to “revive” JSON strings back into JavaScript objects. Security-conscious developers instead use a more secure JSON parser to ensure that the JSON object does not contain executable script, often at the price of a significant performance penalty. The JScript engine that ships with Internet Explorer 8 Beta 2 implements the ECMAScript 3.1 JSON proposal. The JSON.stringify method accepts a script object and returns a JSON string, while the JSON.parse method accepts a string and safely revives it into a JavaScript object. I am excited at this addition, as it is not only secure but is also much faster than equivalent framework implementations. To illustrate, here is an example of serializing and deserializing data using the JSON.stringify and JSON.parse methods: var testObj = new Object();
testObj.numVal = 4;
testObj.strVal = "fool";
testObj.dateVal = new Date(2008, 3, 1);
testObj.arrVal = new Array(1,2,"test");
testObj.boolVal = true;
// Convert the object to a string
var stringifiedValue = JSON.stringify(testObj);
// Create a new object from the string
var parsedValue = JSON.parse(stringifiedValue);
Streamlined DOM Searching Do you find yourself caught in the trap of assigning an ID to every element in your source code in order to use the ubiquitous getElementById API to retrieve what you are looking for? Perhaps you are a veteran user of getElementsByTagName? Whatever element lookup technique you employ, you have probably run into those scenarios where one of these APIs just does not stretch as far as you need it to. Once upon a time I too contributed to those geeky Web pages with animations that followed your cursor around the screen; I would write the layout of the page in CSS, and then use JavaScript to perform the animation by judicious use of setTimeout and [element].style.left/top. No matter the scenario, you may find yourself searching for a better searching API, or you are turning to JavaScript frameworks that include tailored element lookup routines for you (prototype.js and jQuery, for example). Thankfully, with Internet Explorer 8 Beta 2 there is now a better way! You should acquaint yourself with querySelector and querySelectorAll APIs. They will likely become some of the most frequently used APIs in your repertoire. They plug directly into the improved Internet Explorer 8 Beta 2 CSS 2.1 selector support so that you can leverage the selector-matching engine at any time using JavaScript. To experiment with the syntax, try replacing a call to getElementById(‘id’) with querySelector(‘#id’)-the results are the same. The following example uses querySelectorAll to grab all relevant elements by class and turn off their collective display status. Listing 1 illustrates the original unoptimized code demonstrating that the use of the Selectors API results in significantly less-code to download and execute on the client. function useSelectors(clsName)
{
// Hide everything...
var unset =
document.querySelectorAll('h3, p, ul, code');
for (var i = 0; i < unset.length; i++)
unset[i].style.display = 'none';
var set =
document.querySelectorAll("." + clsName);
for (var i = 0; i < set.length; i++)
set[i].style.display = 'block';
}
The Selectors APIs are available at two different scopes: document and element. If you want to find the first result of a particular selector, then use querySelector (which returns the found element directly). Alternatively, if you want to find all matching elements use querySelectorAll. Using element scope can be important when you want to narrow your results to a particular subtree of the DOM instead of collecting results from everywhere. Interestingly enough, the provided selector-string parameter is first checked against the entire document, however the elements returned must be within the proper subtree of the element on which the API was called. The folks over at WebKit have written a test that allows you to compare the Internet Explorer 8 Beta 2 native implementation of the Selectors API to common JavaScript implementations-highlighting the fact that you can harness the native implementation to speed up your code dramatically. Just go to http://webkit.org/perf/slickspeed/ in Internet Explorer 8 Beta 2 to see for yourself! Mutable DOM Prototypes As with the support for the Selectors APIs, the support for mutable DOM prototypes gives developers the building blocks to create efficient and compact abstractions. Like many programming languages, JavaScript objects derive from well-defined and documented types, which are discoverable through reflection. Unlike many programming languages, however, JavaScript makes these types directly available and (strangely enough) mutable through its support for prototype inheritance! To illustrate the feature, consider this example: var arrayInstance = new Array();
// Check to see if there's a "xyz"
// (it should not exist because it is not
// part of the object or its prototype)
alert(arrayInstance.xyz);
// Add xyz to the prototype
Array.prototype.xyz = "xyz string";
// Now xyz is available to the instance
alert(arrayInstance.xyz);
Even with this simplified example, you can see that if xyz is a feature that enhances any and all array accesses, then the inclusion of it on the Array prototype is the right place to get the most impact per line of code. Thanks to our community feedback, Microsoft is pleased to bring the power and flexibility of JavaScript prototypes to the IE DOM as well. You may be thinking that I am getting far too excited by a feature that does not seem particularly remarkable, but bear with me for just a moment longer and I’m certain that you too will be a fan. Compared to frameworks released by Web developers, features provided by a browser release at a slower pace and cater to a more general audience. One of the things that Web developers have told us is that they need a way to extend the DOM with cutting-edge new features-features only they can deliver as rapidly as their business demands. Essentially, developers need to be able to fill functionality gaps long before a native implementation shows up in any browser. DOM prototypes give Web developers the basic building blocks that they can supplement the DOM directly with extra functionality or replace existing implementations with their own. Drawing from the previous example, if I want to add a feature to all image elements in the DOM I could add it to the HTMLImageElement prototype: // Apply the change to the prototype.
HTMLImageElement.prototype.grow = function()
{
this.width *= 1.5;
this.height *= 1.5;
}
// Grow all the images in the document.
for (var i= 0; i < document.images.length; i++)
{
document.images[i].grow();
}
The alternative approach is to add the feature API manually to each individual image element separately-crippling performance. You can see how mutable prototypes provide a much simpler and efficient approach to this common problem. In addition to providing a staging ground, DOM prototypes enable more efficient JavaScript by providing a single, logical place for element-related helper functions. For many scenarios the Element prototype is the most reasonable location for these additions, as it is a parent to all of the elements in the Internet Explorer DOM. As a result, changes to the Element prototype apply to all elements. A good example of how you can use this approach is to add the getElementsByClassName API to all elements; the draft spec of HTML 5 recently defined this API and Internet Explorer 8 Beta 2 does not implement it natively. You can define this method to immediately treat elements as if they supported it natively. Best of all, that method will be faster than more complex alternatives offered as part of generalized frameworks. See Listing 2 for the implementation of _MSHTML5_getElementsByClassName_Elem. <div id="div1" class="xyz">Text
<div id="div2" class="abc xyz">More</div>
</div>
<div id="div3" class="xyz abc box">Other</div>
<script type="text/javascript">
Element.prototype.getElementsByClassName =
_MSHTML5_getElementsByClassName_Elem;
// Invoke getElementsByClassName.
var div1 = document.getElementById('div1');
div1.getElementsByClassName('abc xyz');
</script>
Data URI If you are like me, you have at one point likely built a website that required at least a few small images. In some cases you can use CSS sprites to combine images and avoid network round trips. In some cases, however, I had to resign myself to the inevitable and incur the cost of an extra round trip. No longer! Normally, URLs act as pointers to network locations that contain data. For instance, http://www.example.com/ie.gif instructs the Web browser to download the image file named “ie.gif” from the HTTP server running at www.example.com. Internet Explorer 8 Beta 2 introduces support for Data URIs. Rather than acting as a resource locator, a Data URI contains the resource data directly within the URI string. In order to embed binary data within the string, the data is first encoded using base64 encoding. For instance, here is a Data URI that represents a 10x10 blue dot: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA
oAAAAKAQMAAAC3/F3+AAAACXBIWXMAAA7DAAAOwwHHb6hkAA
AAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQ
AAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPA
AAAANQTFRFALfvPEv6TAAAAAtJREFUCB1jYMAHAAAeAAEBGN
laAAAAAElFTkSuQmCC
Internet Explorer 8 Beta 2 permits Data URIs of up to 32kb in length. Careful use of Data URIs in place of URLs can help you avoid costly network round trips and improve the overall performance of your sites. The Big Picture Now that I have completed my whirlwind tour of some of the great features that Microsoft will deliver in Internet Explorer 8 Beta 2, I think it’s important to take a step back to see the big picture. The focus of the performance improvements in Internet Explorer 8 Beta 2 center on building a platform that allows developers to get more done when they build and browse sites. With that in mind, I hope you are eager to see how Microsoft’s investment to improve scripting speed, download pages faster, and reduce browser overhead enables you to browse faster. The full benefit of Internet Explorer 8 Beta 2 is not limited to these immediate gains. Not only is Internet Explorer 8 Beta 2 speeding up the Web as it exists today, but it is delivering groundbreaking features that will let you build the next generation of lighting fast websites. With Internet Explorer 8 Beta 2, one thing is clear. It’s a great time to be online. Christian Stockwell |