CoDeFocus IE8 Web

Explorer 8 U
Unveiled!
n v e i l e d ! ++++
+ + IInternet
n t e r n e t EExplorer
xplorer 8 U
Unveiled!
n v e i l e d ! ++++
+ + IInternet
n t e r n e t EExplo
xp
IE
Volume 5 / Issue 3
Major Advances
in Internet Explorer 8
Developer
Tools
Great AJAX
Support
Improved
Reliability
and Privacy
TABLE OF CONTENTS
Features
6 Welcome to CoDe Focus for 43 Better AJAX Development with
Internet Explorer 8 Beta 2! Internet Explorer 8 Beta 2
Chris Wilson Sunava and Matt describe AJAX enhancements in Internet
Explorer 8 Beta 2 including DOM Storage objects, connec-
8 What’s New in Internet Explorer 8 Beta 2? tivity enhancements, more connections per server, updates
to the XMLHttpRequest object, the new XDomainRequest
Doug describes the great feast of features and improve- object, and features to enable cross-document messaging.
ments in Internet Explorer 8 Beta 2. Sunava Dutta, Matthew Tevenan
Doug Stamper
53 Measuring AJAX Performance in
14 Making Your Website Compatible Across
Internet Explorer 8 Beta 2
Multiple Versions of Internet Explorer
In this article, Shreesh describes improvements in the AJAX
Scott explains how to write content according to the latest subsystems of Internet Explorer 8 Beta 2 to measure and
Web standards and have it “just work” in many browsers. improve browser performance.
Scott Dickens Shreesh Dubey
18 Introducing Compatibility View 56 Performance Improvements in

Internet Explorer 8 Beta 2 features a new Compatibility Internet Explorer 8 Beta 2
View, which is an end-user site compatibility mitigation
option for gaining access to content built for older Web Internet Explorer 8 Beta 2 offers a better, faster JScript
browsers. engine, improved download speed, faster navigation, native
JSON support, and much more.
Scott Dickens
Christian Stockwell, Travis Leithead, Gaurav Seth
21 Create Your Own Web Slices

62 Reliability and Privacy with
A great new browsing feature in Internet Explorer 8 Beta
2, Web Slices let you subscribe to content directly within a
Web page without requiring a separate feed file. Andy discusses reliability improvements in Internet
Seth McLaughlin Explorer 8 Beta 2 and how they will help protect a user’s
personally identifiable information.
26 Accelerators in Internet Explorer 8 Beta 2 Andy Zeigler
Ritika walks through how to create a codeless accelerator,

which allows users to interact with Web services or applica-
66 Secure Coding with Internet Explorer 8 Beta 2
tions and do more on your site. Eric describes new Internet Explorer security features to
Ritika Virmani help protect Web users and applications.
Eric Lawrence
30 New Search Features in
Sharon describes new features in Internet Explorer 8 Beta
2 that improve the search experience. Departments
Sharon Cohen
7 Code Compilers
36 Developer Tools in
25 Advertiser Index
The Internet Explorer 8 Developer Tools let you edit your
site within the browser and see changes take effect imme-
diately, profile your site to help improve your JavaScript,
enable better debugging, and more.
John Hrvatin, Deepak Jain, Sameer Chabungbam
US subscriptions are US $29.99 for one year. Subscriptions outside the US pay US $44.99. Payments should be made in US dollars drawn on a US
bank. American Express, MasterCard, Visa, and Discover credit cards are accepted. Bill me option is available only for US subscriptions. Back issues
are available. For subscription information, email subscriptions@code-magazine.com or contact customer service at 832-717-4445 ext 10.
Subscribe online at www.code-magazine.com
CoDe Component Developer Magazine (ISSN # 1547-5166) is published bimonthly by EPS Software Corporation, 6605 Cypresswood Drive., Suite
300, Spring, TX 77379. POSTMASTER: Send address changes to CoDe Component Developer Magazine, 6605 Cypresswood Drive., Suite 300,
Spring, TX 77379.
4 Table of Contents www.code-magazine.com

ONLINE QUICK ID 0811012
Welcome to CoDe Focus

for Internet Explorer 8!
In this issue, you’ll find information on all things related to
Internet Explorer 8 Be ta 2.
From Web Slices to Developer Tools, from our improvements in performance
to the great new features for building Web 2.0 applications, there’s
something here for everyone.
ince I joined the Internet Explorer team back We began Internet Explorer 8 by developing a
S in 1995, I’ve helped ship a lot of Internet

Explorer releases, and Internet Explorer 8 is
shaping up to be one of the most exciting, with a
strategy for protecting compatibility with the con-
tent of today, while simultaneously unleashing our
ability to deliver great standards compliance. We
full set of new capabilities and improvements for then set the foundation for delivering standards
users and developers. compliance by building a brand-new layout en-
gine, designed from the ground up for CSS 2.1
compliance. With that foundation in place, we
started addressing other areas: not only have we
improved security throughout, as well as building
new capabilities to help Web developers build se-
cure mashups (with features like cross-document
messaging and cross-domain network requests),
but we’ve also focused on performance throughout
the Internet Explorer stack, particularly for today’s
(as well as tomorrow’s) JavaScript-heavy Web
applications.
Finally, we wanted to make the Web more efficient

and approachable for users, and encourage users
to reach beyond just a single Web page with Accel-
erators, Web Slices and new Search features. Not
only does this let users navigate the resources of
the Web more effectively, but it also provides new
opportunities for Web services to integrate into the
browsing experience, rather than just being a des-
tination.
With this issue of CoDe Focus, several of my col-

leagues have written some great articles on these
areas of Internet Explorer to help you start devel-
oping for Internet Explorer 8. Happy browsing!
-Chris Wilson
Internet Explorer Platform Architect
6 Welcome to CoDe Focus for Internet Explorer 8! www.code-magazine.com

CODE COMPILERS
component developer magazine
Volume 5, Issue 3
Group Publisher
Markus Egger
Associate Publisher
Rick Strahl
Managing Editor
Ellen Whitney
Content Editors
Erik Ruthruff
Writers In This Issue
Sameer Chabungbam Sharon Cohen
Scott Dickens Shreesh Dubey
Shreesh Dubey Sunava Dutta
John Hrvatin Deepak Jain
Eric Lawrence Travis Leithead
Seth McLaughlin Gaurav Seth
Doug Stamper Christian Stockwell
Matthew Tevenan Ritika Virmani
Chris Wilson Andy Zeigler
Technical Reviewers
Markus Egger
Art & Layout
King Laurin GmbH
info@raffeiner.bz.it
Production
Franz Wimmer
King Laurin GmbH
39057 St. Michael/ Eppan, Italy
Printing
Fry Communications, Inc.
800 West Church Rd.
Mechanicsburg, PA 17055
Advertising Sales
Lake Quincy Media LLC
330-677-2440
ssmith@lakequincy.com
msmith@lakequincy.com
Sales Managers
Erna Egger
+43 (664) 151 0861
erna@code-magazine.com
Tammy Ferguson
832-717-4445 ext 26
tammy@code-magazine.com
Circulation & Distribution
General Circulation: EPS Software Corp.
Newsstand: Ingram Periodicals, Inc.
Media Solutions
Worldwide Media
Subscriptions
Circulation Manager
Cleo Gaither
832-717-4445 ext 10
subscriptions@code-magazine.com
US subscriptions are US $29.99 for one year.

Subscriptions outside the US are US $44.99.
Payments should be made in US dollars drawn
on a US bank. American Express, MasterCard,
Visa, and Discover credit cards accepted. Bill
me option is available only for US subscriptions.
Back issues are available. For subscription
information, email subscriptions@code-magazine.com
or contact customer service at 832-717-4445 ext 10.
Subscribe online at
www.code-magazine.com
CoDe Component Developer Magazine

EPS Software Corporation / Publishing Division
6605 Cypresswood Drive, Ste 300,
Spring, Texas 77379
Phone: 832-717-4445
Fax: 832-717-4460
What’s New in
Internet Explorer 8 Beta 2?
For those of you who have been waiting to see what Microsoft
has been cooking up for the standards-based Web, dinner is
served! Released to the Web in August 2008, Internet Explorer 8 Beta 2
delivers much more than just a snack for today’s ravenous tech-savvy users.
Internet Explorer 8 Beta 2 dispenses a four-course meal guaranteed to please
Doug Stamper even the most discriminating of palates.
dstamper@microsoft.com
Doug is the Developer
ll of this talk about food makes me hungry, so when coupled with better script performance, dra-
Experience Lead for Internet
Explorer 8. He joined Microsoft
in 1996, working first on
Windows Update, and then, for
A let’s dig in. Internet Explorer 8 Beta 2 is the
latest installment of Microsoft’s Web browser
and includes new features for end users and devel-
matically improves the JavaScript-heavy Web appli-
cations experience.
opers alike. From in-box Developer Tools, to Web Top this meal off with our integrated Developer
the last four years, on Internet Slices and Accelerators, to improved performance Tools. Debugging and profiling your content or
Explorer. Doug is an alumnus and a platform built for today’s Web 2.0 applica- script has never been so easy.
of the University of Missouri, tions, there is plenty to feast on in Internet Explor-
Kansas City. er 8 Beta 2.
Predictability: Interoperable Version Targeting
Internet Explorer 8 Beta 2 represents the third re-
lease of Internet Explorer that I have personally Improved standards support in Internet Explorer 8
had the privilege to participate in and it outshines Beta 2 makes developing sites that work across dif-
any browser we have shipped to date. ferent browsers simpler and less time consuming.
Internet Explorer 8 Beta 2 in-
The Microsoft Internet Explorer Fast Facts cludes upgrades to the Web
team’s goals for the final Inter- platform, compatibility, and
net Explorer 8 Beta 2 release re- Want a quick sampling functionality designed to keep
main: to fully support CSS 2.1, of the feast that you on point creating high-
to improve script performance, Internet Explorer 8 Beta 2 quality interactive experiences,
to enable new Web scenarios offers developers not debugging browser interop-
by including early HTML 5 and end users? erability issues.
support, to ship built-in devel- Pull up a chair to our table
oper tools, to integrate Web Internet Explorer 8 Beta 2 in-
and dig in!
services into the user’s work- terprets Web content in the
flow through Web Slices and most standards-compliant way
Accelerators, and to strengthen Internet Explorer’s it can. This simple statement turns out to have com-
foundation in the security and privacy realms. plex ramifications. Thankfully, Internet Explorer 8
Beta 2 delivers a model that both protects current
This article briefly introduces the features in- content from client changes and enables adoption
cluded in Internet Explorer 8 Beta 2. For more of new exciting features.
in-depth discussion, see the other articles writ-
ten by the Internet Explorer team in this issue of
CoDe Focus. Compatibility Mode
In addition to the “Standards” and “Quirks”

Heaping Helpings for the Developer modes widely understood from past versions of
Internet Explorer, Internet Explorer 8 Beta 2 ships
We have unleashed the power of the standards- with a third layout mode–Internet Explorer 7
based Web through Cascading Style Sheets (CSS) Standards mode. With this layout mode, Inter-
2.1 compliance, while simultaneously protecting net Explorer 8 Beta 2 renders pages in the same
compatibility with the content of today. Making way that Internet Explorer 7 renders its “Stan-
your website compatible across multiple versions dards mode” pages. It’s also the quickest option
of Internet Explorer has been dramatically simpli- for getting existing content to display correctly in
fied with version targeting. Additionally, we have Internet Explorer 8 Beta 2.
laid a great foundation for the development of se-
cure mashups through cross-document messaging You tell Internet Explorer 8 Beta 2 to display a site
(XDM) and cross-domain requests (XDRs); which, or page in Internet Explorer 7 Standards mode by
8 What’s New in Internet Explorer 8 Beta 2? www.code-magazine.com

simply adding a meta tag. No additional changes DOM Storage offers essential differences from
are required. cookies. For one, it offers significantly more avail-
able disk space than cookies. In Internet Explorer,
<meta http-equiv="X-UA-Compatible" content="IE=7"> cookies can store 4 kilobytes (KB) of data, whereas
DOM Storage provides about 10 megabytes (MB)
Upon page load, Internet Explorer 8 Beta 2 reads the for each storage area. Furthermore, DOM Storage
tag and switches the browser to interpret all content doesn’t transmit values to the server with every re-
on the page as Internet Explorer 7 Standards instead quest as cookies do, and data in a global store never
of Internet Explorer 8 Standards. For more details, expires. Unlike cookies, it’s easy to access individual
see “Making Your Website Compatible Across Mul- pieces of data using an interface that is supported in
tiple Versions of Internet Explorer” in this issue. Internet Explorer 8 Beta 2 and other browsers, and
sites can choose to store data for the life of a tab or
until the site or the user clears the data.
Power/Performance: AJAX Improvements
Internet Explorer 8 Beta 2 provides a program- More AJAX Enhancements

ming model for Asynchronous JavaScript and XML
(AJAX) development that is simpler yet more power- Internet Explorer 8 Beta 2 includes enhancements
ful than ever before, spanning browser, Web page, and to connection events and connection scaling, as
server interaction. You’ll be able to build pages that well as updates to the XMLHttpRequest (XHR)
are faster and more functional, with better end-user object. For more details, see “Better AJAX Develop-
experiences. Plus, the APIs we’ve added to Internet ment with Internet Explorer 8 Beta 2,” in this issue.
Explorer 8 Beta 2 are based on the W3C HTML 5.0
or Web Applications Working Group standards.
Productivity: Integrated Developer Tools
AJAX Navigations Great tools play a critical role in developer produc-

tivity, and while many Web development tools exist,
One of the great benefits of implementing AJAX— they probably don’t meet your needs in all tasks.
and really, one of the main reasons it exists—is the
ability to update page content without navigating to To improve developer productivity in debugging
a new page. With this convenience, though, come JavaScript, CSS, and HTML, Internet Explorer 8
drawbacks that can confuse users. On an AJAX- Beta 2 includes powerful, yet easy-to-use tools that
heavy page, the Address bar is not updated with have a few important characteristics:
each update. Subsequently, the browsing history
isn’t updated either. Integrated and Simple to Use
To enable AJAX navigations, Internet Explorer 8 Every installation of Internet Explorer 8 Beta 2 in-
Beta 2 in Internet Explorer 8 Standards mode treats cludes the Developer Tools. This enables debugging
updates to the window.location.hash property like anywhere you find Internet Explorer 8 Beta 2, wheth-
traditional navigations. When the hash property is er it’s your dev machine, test machine, or a client’s
updated, the previous document URL (which may be machine. In addition, by avoiding the use of an ex-
from the previous hash fragment) is updated in the tension, we have limited the impact of the tools on
Address bar and the travelog. At the same time, a new browser performance to only the times when you open
hashChanged event is raised, and the hash URL frag- the tools. Internet Explorer 8 Beta 2 also includes on-
ment is saved before navigating away from the page. the-fly script debugging, so you can enable debugging
as needed for only the current Internet Explorer 8
On AJAX-enabled pages that take advantage of this Beta 2 process, rather than enabling debugging for all
new functionality, when AJAX content changes, of Internet Explorer 8 Beta 2 and accepting degraded
navigation is as seamless as usual, but the user can performance and regular script error dialog boxes.
back up and go forward as if the AJAX navigation
was a traditional navigation. Provides a Visual Interface to the Platform
Instead of reverse engineering how your site works or

DOM Storage modifying your site to output debug information, the
Developer Tools enable you to look into Internet Ex-
To store data on local machines, websites today of- plorer 8 Beta 2 to view its representation of your site.
ten use the document.cookie property. However, This reduces the time you spend debugging dynamic
cookies are limited in their capabilities; sites can sites where source inspection isn’t useful or investi-
only store fifty key/value pairs per domain, and the gating a behavior specific to Internet Explorer 8 Beta
cookie programming model requires parsing the en- 2 where a generic authoring tool cannot help.
tire cookie string for data. DOM Storage objects—
specified in the W3C’s HTML 5 Working Draft and Enables Fast Experimentation
implemented in Internet Explorer 8 Beta 2—provide
a much simpler and more flexible global and session When prototyping a new design or testing fixes in
storage model for structured data on the client side. previous versions of Internet Explorer, you likely
www.code-magazine.com What’s New in Internet Explorer 8 Beta 2? 9

edit your source, save it, refresh your page in the Beyond a Single Web Page:
browser, and repeat. The Internet Explorer 8 De- Web Slices and Accelerators
veloper Tools streamline this scenario by letting you
edit your site within the browser and see changes
take effect immediately. Probably the most anticipated end-user features of
Internet Explorer 8 Beta 2 are Web Slices and Ac-
Helps Optimize Application Performance celerators. Read on to whet your appetite, and then
head to the main articles, later in this issue!
Identifying and fixing performance issues is usu-
ally an iterative approach done by focusing on one Web Slices
scenario at a time. With the Internet Explorer 8
Developer Tools script profiler, you can collect sta- Web Slices are a new Internet Explorer 8 Beta 2 fea-
tistics like execution time and number of times a ture that allows you to subscribe to parts of a Web
JavaScript function was called as you test your ap- page and view updates directly from the Internet
plication and use the profile report to quickly iden- Explorer Favorites bar. Web Slices let users bring
tify and fix performance bottlenecks. their favorite parts of the Web with them wherever
Got Feedback? they browse.
The Internet Explorer team With these characteristics, the features of the De-
participates regularly in veloper Tools will dramatically improve your pro- Web Slices allow the user to subscribe to a portion of
the Internet Explorer Beta ductivity when developing in Internet Explorer 8 a page and monitor the updates on the Favorites bar
newsgroup, microsoft.public. Beta 2. For more detailed information, see the ar- throughout their browsing experience. Any portion
internetexplorer.beta. Catch us ticle “Developer Tools in Internet Explorer 8 Beta of a page that updates regularly is a reasonable can-
there! 2,” or visit the IE Developer Center on MSDN at didate to become a Web Slice. News, stock quotes,
http://msdn.microsoft.com/ie. sports scores, exchange rates, or even e-mail can be
presented prominently in Internet Explorer as part
Well, we’ve got the developer food groups covered, of the Favorites bar. Updates to Web Slices are indi-
so now let’s move on to a balanced meal for the end cated visually in the item through bolded text.
users, shall we?
There are two ways for users to discover a Web
Slice: in document by hovering over a Web Slice
Perfect Portions for the End User region on a page, and through the feed discovery
button on the command bar.
We cooked up even more goodness for end us-
ers to make the Web more efficient and ap- Once a Web Slice has been subscribed to, it can
proachable. Reach well beyond just a single Web be accessed through the Favorites bar. For exam-
page and expose the dynamic power of Web ser- ple, consider an eBay Web Slice that allows users
vices. Web Slices and Accelerators take advan- to track an auction. Rather than clicking refresh
tage of Web services in a convenient, easy-to-use on an auction page every few minutes, a user can
experience. subscribe to an auction and be visually alerted of
changes to the auction automatically.
Our improved search capabilities enable you to
land that bigger data “fish” by casting a wider net See “Creating Your Own Web Slices” in this CoDe
that examines your Autocomplete (previously typed Focus issue for a developer’s reference to Web Slices.
search terms), Search Suggestions (from your cur-
rently selected search provider), and your History, Accelerators
as well as the Internet.
Accelerators, formerly known as Activities, are a
Safety and reliability are paramount in today’s con- new concept that allows users to interact with a
nected world. Safety and reliability join security in a Web service or application from the browsing ex-
protective journey for the modern browser. Internet perience. Users typically copy and paste text from
Explorer 8 Beta 2 continues to push the innovative one Web page to another for various reasons. Inter-
envelope with features like Loosely-Coupled Inter- net Explorer 8 Beta 2 Accelerators make this much
net Explorer (LCIE), Automatic Tab Recovery and easier to do.
InPrivate™ Browsing.
The browser is becoming more than just a place to
And for dessert, we offer our Compatibility View read content on the Web. Increasingly, users are in-
feature. With millions of pages and sites in our glob- teracting with Web content in several ways. Examples
ally connected world, not all pages will be ready include pasting selected text in a blog post, mapping
simultaneously for strict standards-based content. out an address, or checking the definition of a word.
While Internet Explorer 8 Beta 2 respects the in- With Accelerators, users can reach beyond the page
tent of the Web author when known, Compatibility to various services for these common tasks.
View also allows the user to fall back to previous
rendering behavior should a site appear to be ad- Accelerators are easy for Web developers to create
versely affected. and can be written to plug into existing applica-
tions. They are great ways to attract users to your
Meal complete! Time to examine the recipes. website through a single click!

Accelerators work on selected text, hyperlinks, and tures, and made it deliciously simple to view web-
the current document. The user sees different options sites exactly as they were intended.
in the Accelerators menu depending upon the type of
content. The most common content is selection; when InPrivate Browsing
a user makes a selection the Accelerator button ap-
pears. Clicking the button displays the set of Accelera- If you’re using a shared PC, borrowing a laptop from
tors the user has installed that work for selected text. a friend, or using a public PC, sometimes you don’t
want other people to know where you’ve been on the
Alternatively, users can also bring up the Accelera- Web. Internet Explorer 8 Beta 2 InPrivate Browsing
tors menu through the context menu of the select- lets you browse the Web without storing history,
ed text or hyperlink. They can access the current cookies, temporary Internet files, and other data.
page’s Accelerators from the context menu of the
page or the Page button on the Internet Explorer Using InPrivate Browsing is as easy as launch-
Command bar. ing a new InPrivate Browsing window. InPri-
vate Browsing can be found under Safety in the
For more details, see “Accelerators in Internet Ex- Command Bar, or in the Tools menu. When you are
plorer 8 Beta 2” in this issue. finished browsing, just close the window and Inter-
Problem Pages?
net Explorer 8 Beta 2 will take care of the rest. You can add a “Report a
Webpage Problem” add-on
Find the Data You Need: Improved Search With InPrivate Browsing enabled, you browse just as to your installation of Internet
you normally do, but with the following differences: Explorer 8 Beta 2. Go to
With Internet Explorer 8 Beta 2, we have taken http://download.microsoft.com
some big steps that we hope will change the way • New cookies are not stored and search for “Report a
you search. Our goal is to enable you to search for o All new cookies become "session" cookies Webpage Problem add-on”.
the right term on the right provider and get the right o Existing cookies can still be read Install it, and then, to report
information as quickly as possible. o The new DOM storage feature behaves the a page, click the reporting
same way button on the toolbar, or, on the
Search Suggestions • New history entries will not be recorded Tools menu, choose Report a
• New temporary Internet files will be deleted
Webpage Problem.
Search suggestions appear as you are typing and of- after the InPrivate Browsing window is closed
fer you ideas on things you might be searching for. • Form data is not stored
In addition to highlighting interesting suggestions, • Passwords are not stored
visual suggestions can also be used to provide more • Addresses typed into the Address bar are not
useful information. stored
• Queries entered into the search box are not
There are two additional sections you’ll notice un- stored
der the search box. The first section, directly un- • Visited links are not stored
der the search box, contains your previously typed
search terms. The other section you’ll notice is com- InPrivate Browsing makes shopping for jewelry for
prised of results from your History. This section is your spouse on a shared computer, for instance, as
new to Internet Explorer 8 Beta 2. Using Windows easy as pie! See the IE Team Blog for more details
Search, Internet Explorer 8 Beta 2 will search over on InPrivate Browsing: http://blogs.msdn.com/ie/.
your stored history.
Automatic Tab Recovery
In all three sections under the search box, we have
added hit highlighting so that you can glance through In the event of a crash, Automatic Crash Recovery
the results and know exactly why each one was sug- is designed to get you back to browsing as quickly as
gested to you. The search box dropdown is also con- possible. It uses Internet Explorer 8 Beta 2 tab isola-
sistent in look and feel to the Address bar. In normal tion (Loosely-Coupled Internet Explorer, or LCIE)
use, the Address bar will display results from your to help localize the failure to your tab. Should you
Favorites, History, and feeds; however, you can also encounter a crash, you will see a “balloon” telling
switch the address bar over to search mode by typing you that a tab has been recovered. This is the “tab
“?”, a space, and then your search term. This will al- recovery experience”—the failure has been confined
low you to get search suggestions in the Address bar. to just one tab. Your browser never goes away and
you get back to your site quickly.
For all the details, see “New Search Features in In-
ternet Explorer 8 Beta 2.” Behind the scenes, Internet Explorer Beta 2 keeps
track of information about your tab. The following
data about each tab is stored:
Browse Safely and Reliably:
InPrivate Browsing, Automatic Tab Recovery, • Current URI
and Compatibility View • The travelog (your back/forward history)
• Tab order
• Which tab was active
With Internet Explorer 8 Beta 2, we've beefed up • Session cookies
the browser’s reliability, added tasty privacy fea- • Form data
www.code-magazine.com What’s New in Internet Explorer 8 Beta 2? 11

When you crash, Internet Explorer 8 Beta 2 will or care) or were authored pre-standards (yes, there
tear down the old tab process, create a new tab pro- are pages that old out there). These older, non-stan-
cess, and recover the stored data back into the tab. dards-based pages work just great in Internet Ex-
For many websites this works well; however, there plorer 8 Beta 2, since they depend on behavior that
are other websites, such as sites with Web forms, or has been in Internet Explorer for quite some time
sites that you need to log in to, that cannot be suc- and hasn’t changed.
cessfully recovered.
As you might expect, there are also a large number
Leveraging LCIE allows Automatic Crash Recovery of pages authored according to modern Web stan-
to quickly restore the user to their browsing session dards, and the trend is that standards-based pages
without having to log back in to their sites or re- will soon become the majority. Unfortunately, there
enter data into forms. Combined, LCIE and Auto- are differences between modern browsers and older
matic Crash Recovery provide an innovative and browsers in the level and type of standards support
graceful way to recover from crashes. they provide. New standards have emerged; exist-
ing standards have been clarified; bugs have been
See the IE Team Blog for more details on this fixed.
feature.
Most sites written to modern standards work in In-
Compatibility View ternet Explorer 7 today. Some, but not all, of these
will work in Internet Explorer 8 Beta 2 by default.
A lot of the existing pages on the Web—the majority, But there is a small class that won’t. This is where
actually—were developed with either no concept of the Compatibility View feature comes in. Compat-
modern Web standards (developers just didn’t know ibility View enables content designed for older Web
browsers to still work well in Internet Explorer 8
Beta 2.
The feature is controlled by UI settings and Group

Policy on the client. When enabled, Compatibility
View performs the following changes:
• The Internet Explorer User Agent String de-

notes a version of '7'
• The Internet Explorer Version Vector, which
is used in the evaluation of conditional com-
ments, denotes a version of '7'
• All pages with !DOCTYPE directives that trig-
ger Standards Mode map to Internet Explor-
er 7 Standards Mode
By default, Compatibility View is off for all sites

in the Internet zone. It can be enabled on a per-
domain basis. Also by default, Compatibility View
is enabled for all intranet websites, thus ensur-
ing greater compatibility between Internet Ex-
plorer 8 Beta 2 and existing line-of-business
applications.
Internet Explorer 8: Feed the Need

Now that you have seen a brief overview of what to
expect from Internet Explorer 8 Beta 2, it’s time to
download a copy and get started. Visit http://www.
microsoft.com/ie8 and feed your information hunger.
It has been a pleasure talking about food… er, I

mean, features with you. Try this: close your eyes
and imagine your favorite meal—all of the smells
and the flavors. Now crank open your laptop, fire
up Internet Explorer 8 Beta 2, and search for your
favorite restaurants to get that reservation before
somebody else gets your table!
Doug Stamper

Making Your Website

Compatible Across Multiple
Versions of Internet Explorer
Improved standards support in Internet Explorer 8 Beta 2 makes
developing sites that work across browsers simpler and less time
Scott Dickens consuming. The latest release of the world’s most popular Web browser
sdickens@microsoft.com includes upgrades to the Web platform, compatibility, and functionality
425-705-8865 designed to keep you on-point creating high-quality interactive experiences,
Scott Dickens is a Lead not debugging browser interop issues. Let’s discuss how to best take
Program Manager at Microsoft, advantage of these new features while ensuring your Web pages continue to
based in Redmond, WA.
work correctly in older browsers.
Scott works on several features
of Internet Explorer including
nternet Explorer 8 Beta 2 interprets Web con- box model, a general term describing sizing and
I
layout, versioning and modes,
rendering, graphics and tent in the most standards-compliant way it can. positioning of elements on a page, is quite differ-
images, text, printing, zoom, This simple statement turns out to have complex ent in these older pages than those written accord-
and website compatibility. overtones. With compatibility expectations growing to the latest Web standards. Standards mode
ing, new features need to be balanced against costs denotes compatibility with the latest and greatest
associated with updating legacy content. Thank- Web standards.
fully, Internet Explorer delivers a model that both
protects current content from client changes and Standards mode is, as you might expect, a moving
enables adoption of new exciting features. target as the latest Web standards keep evolving
and changing. For instance,
Have you always wanted to Fast Facts Internet Explorer 8 Beta 2’s
write content according to definition of Standards mode is
the latest Web standards and People spend more time different than Internet Explor-
have it “just work” in multiple surfing the Web than er 7’s definition of Standards
browsers? With the improved any other activity on the PC mode. Firefox 3’s definition
standards support found in In- and Internet Explorer of Standards mode is different
ternet Explorer 8 Beta 2, you than Firefox 2’s definition of
is the most popular gateway
can. The latest release now Standards mode. And, Internet
provides improved support for
to that experience. Explorer 8 Beta 2’s definition
CSS 2.1, HTML 4.01, HTML 5, The latest release of of Standards mode is different
CSS 3, DOM L1 and L2 Core, the browser includes a than Firefox 3’s definition of
and Aria. new Standards mode Standards mode. Differing in-
implementation that serves terpretation of Standards is the
Do you have existing content as a platform for cause of most cross-browser
that “just works” in Internet issues encountered in Web de-
rich new experiences.
Explorer 7 that you want to sign.
continue to display correctly
Included compatibility
in Internet Explorer 8 Beta features allow you So you might ask, why would
2? Don’t worry, that’s covered to take full advantage I ever choose Standards mode
too. of new functionality if there is compatibility risk?
while ensuring that For one, Standards bring new
your existing site works well functionality. Internet Ex-
Choosing the Best in older versions plorer 8 Beta 2 includes full
Layout Mode support for CSS 2.1, which
of the browser. means a whole set of previ-
ously unavailable features are
As a point of background knowledge, modern at your fingertips. Take, for example, the com-
browsers ship with at least two layout modes, mon case of dividing a page up into chapters and
Quirks and Standards (most ship with more, but sections. By using the ‘counter’ property you can
I’ll get into that later). Quirks mode denotes com- save yourself a great deal of effort in automatic
patibility with older Web pages, in particular those numbering situations that require a bit more com-
written before modern standards. For instance, the plexity than the standards ordered list. Listing 1
14 Making Your Web site Compatible Across Multiple Versions of Internet Explorer www.code-magazine.com
has been coded not to W3C Standards explic-
Chapter 1. First Chapter itly but to Internet Explorer 7’s interpretation of
Web standards. To allow such sites to continue
Chapter 2. Second Chapter to work in Internet Explorer 8 Beta 2 you have
two options:
Section 2.0 First Section of Second Chapter
• Update content to support Internet Explor-
Section 2.1 Second Section of Second Chapter er 8 Beta 2’s interpretation of Web standards
and special case older versions of Internet
Chapter 3. Third Chapter Explorer as required (preferred).
• Tell Internet Explorer to interpret Standards
Section 3.0 First Section of Third Chapter mode content as content authored for Inter-
net Explorer 7’s interpretation of Web stan-
Figure 1: Example rendering of counters sample code. dards.
shows an example and Figure 1 shows expected

output. Note that without counters you would Developing Standards Mode Pages
have to number the chapters and sections in this
example manually, and what a pain it would be to So you want to develop Web pages according to
insert a new chapter between the first and second the latest Web standards? Me too! Here’s what you
chapters! need to do:
For another, Standards provide consistency across 1. Author your page according to the latest Web
browsers. Internet Explorer 8 Beta 2 also includes standards as supported by Internet Explorer 8
improved support for items defined in other Web Beta 2.
standards such as HTML 4.01, HTML 5, CSS 3, 2. Include a Standards mode DOCTYPE.
DOM L1 and L2 Core, and ARIA. 3. Use conditional comments to provide fix-ups
for legacy versions of Internet Explorer.
All told, these improvements make up the bulk
of new features found in the Internet Explorer 8 Step #3 is necessary only if your markup takes
Standards mode. advantage of new functionality that didn’t exist in
previous versions of the browser or in instances
where behavior has been corrected or improved in
DOCTYPEs and <META> Tags the latest Internet Explorer version.
Internet Explorer determines layout mode by ex- For those unfamiliar with the power of conditional
amining the DOCTYPE tag declared in a Web comments, basically think of them as “if” state-
page’s HTML. This action occurs during page ments within your HTML. The code contained
load—the Web browser “sniffs” the DOCTYPE and within a conditional comment block is only ex-
then switches into the appropriate layout mode, ercised if the expression evaluates to TRUE. The
Quirks or Standards, in order to display the page expression generally takes the form of a declared
correctly (read: as the author likely intended). Visit Internet Explorer version value and a comparison
MSDN to see a list of DOCTYPEs and what layout is performed against Internet Explorer’s Version
mode they trigger (http://msdn.microsoft.com/en-us/ Vector registry key.
library/ms535242.aspx).
In the following example, note how using con-
Recognize that a ton of existing content (on the ditional comments allows you to direct different
Internet / various intranets / line of business apps style sheets to Internet Explorer 8 Beta 2 and In-
/ etc…) that uses a Standards mode DOCTYPE ternet Explorer 7 respectively:
Listing 1: Using CSS 2.1 counters

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"> <h1>First Chapter</h1>
<html> <h1>Second Chapter</h1>
<head> <h2>First Section of Second Chapter</h2>
<style type="text/css"> <h2>Second Section of Second Chapter</h2>
body {counter-reset: chapter;} <h1>Third Chapter</h1>
h1:before {content: "Chapter " counter(chapter) ". ";} <h2>First Section of Third Chapter</h2>
h1 {counter-reset: section -1; counter-increment: chapter;} </body>
h2:before {content: "Section " counter(chapter) "." </html>
counter(section) " ";}
h2 {counter-increment: section; }
</style>
</head>
<body>
www.code-magazine.com Making Your Web site Compatible Across Multiple Versions of Internet Explorer 15
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 dards mode involves toggling the Version Vector
Strict//EN"> value to reflect the layout mode. Stated another
<head> way, Internet Explorer 8 Beta 2 running in Internet
<title>Test Page</title> Explorer 7 Standards mode evaluates conditional
 With the tag, you have two options for maximum
 header
</style> • On a per-page basis, add a special HTML tag
</head>
Let’s look at some examples.
Or, better yet, take advantage of the complete CSS
Almost Standards 2.1 support in Internet Explorer 8 Beta 2 to feed the Suppose you have an existing Web form that
Most modern browsers same style sheet to all modern browsers and reserve looks great in Internet Explorer 7 but dis-
include a layout mode conditional comments only for down-level browsers. plays incorrectly in Internet Explorer 8 Beta 2.
that can best be described Sure you could debug the page and update the
as “almost standards.” <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 content to ensure compatibility with Internet
In order to support certain Strict//EN"> Explorer 8 Beta 2’s Standards mode implemen-
legacy Web pages, a page’s <head> tation. But suppose you have a looming dead-
content renders as Standards <title>Test Page</title> line and just don’t have the time to fully debug
except for images in table cells, <link rel="stylesheet" type="text/css" and redesign the page right now. It sounds like
which are treated in a manner href="/stylesheets/standards.css" /> you’re in a perfect situation to take advantage of
consistent with Quirks mode.  else):
when they encounter
</style>
particular DOCTYPEs,
</head> <meta http-equiv="X-UA-Compatible" content="IE=7">
most notably a HTML 4.01
Transitional DOCTYPE with a
Some finer points to keep in mind. First, unless On page load, Internet Explorer reads the tag and
system identifier.
you are already an expert on Conditional Com- switches the browser to interpret all content on the
Internet Explorer 8 Beta 2 ments, it pays to review the sample code and page as Internet Explorer 7 Standards instead of
supports this paradigm as well, syntax on MSDN (http://msdn.microsoft.com/en-us/ Internet Explorer 8 Standards. The toolbar of the
though there isn’t an official library/ms537509.aspx). Second, if you want to feed Internet Explorer 8 Developer Tools always tells
layout mode labeled as such Internet Explorer 8 Beta 2 and Internet Explorer you the layout mode of the document, so use it
available in the DOM or in the 7 the same content, use a greater than or equal to to check your results. For more information, see
Developer Toolbar. comparison that targets both versions in a single “Developer Tools in Internet Explorer 8 Beta 2,”
declaration, such as: in this issue.
 <parameter name="h" value="240" />
<homepageUrl>http://maps.live.com</homepageUrl> <parameter name="format" value="full" />
</preview>
 <execute action=" http://maps.live.com/default.aspx">
<display> <parameter name="where1" value="{selection}"
<name>Map with Live Maps</name> type="text" />
<icon>http://www.live.com/favicon.ico</icon> </execute>
</display> </activityAction>
</activity>
 </openServiceDescription>
<activity category="map">
<activityAction context="selection" >
<preview action=" http://maps.live.com/geotager.aspx">
www.code-magazine.com Accelerators in Internet Explorer 8 Beta 2 27

Category Accelerators
Add Del.icio.us, Reddit, Google Reader
Blog Windows Live Spaces, Windows Live Writer, Blogger
Define Encarta, Wikipedia, Dictionary.com
Map Windows Live Map, Google Maps, Yahoo! Maps, Mapquest
Translate Windows Live Translation, Babelfish, Google Translation
Table 1: Some Accelerator categories
Table 1 shows some of the cat- <execute method="get"

egories that Internet Explorer action="http://example.com/done.aspx?url={
Building an Accelerator promotes, along with examples documentUrl}&title={documentTitle?}" />
is as easy as specifying of existing services.
Form-Based Parameters: These specify the inputs
a set of parameters Choose the category that best to a service through name-value pairs, similar to
(XML-based Codeless Accelerators) fits your Accelerator. If your cat- HTTP form submissions. This is useful for making
egory is unique and none of the HTTP POST requests, or if the HTTP GET request
or using a COM object recommended categories align could be longer than the URLcharacter limit.
(Code-based Accelerators). with your Accelerator, you can
define your own. The following <execute method="post"
example defines the category action="http://example.com/done.aspx>
“share”. <parameter name="url" value="{documentUrl}"
/>
<activity category="share"> <parameter name="title"
value="{documentTitle}" />
Your category should meet the following criteria: </execute>
• It should be a verb that users can recognize

• It should be generic enough so that other Ac- Using the Preview Window
celerators can share it
• It should not be tied to a specific brand or Accelerators provide an optional HTML preview
application window that displays when the user hovers over
an Accelerator menu item. The preview window is
a great place for quick actions like viewing an in-
How It All Works place definition, translation or even a map.
Accelerators are displayed in the Accelerators This functionality is optional and should only be
menu based on the content type (the context attri- used for lightweight interaction. The idea is to
bute of the Accelerator). Internet Explorer queries provide users with a quick preview and encour-
the installed Accelerators to get the available Ac- age them to go to your website by clicking on a
celerators that can run on this content type. hyperlink within the preview or by clicking on the
Accelerator menu item.
The content (selected text/hy-
perlink/document) is submitted Preview functionality is described through the Ac-
Accelerators are grouped to the service to handle using celerator XML within the preview element. Dur-
GET/POST submissions speci- ing the hover, Internet Explorer makes an HTTP
by category when fied in the Accelerator. The Ac- GET/POST request and displays the resulting
displayed to the user. celerator expresses the data to HTML within the HTML preview window.
send using form-based or inline
These categories are arranged parameters. The preview window supports JavaScript sand-
in alphabetical order boxed to the domain of the Accelerator. It also sup-
Cookies can be used to store ports ActiveX controls that are already installed
in the menu. state and user credentials as and opted-in by the user for the given domain.
part of the HTTP request.
A variable is enclosed in brackets, as in {documen- Localization for Accelerators

tUrl}. A variable can be specified as optional by
using a “?” after the variable name; for example, Each Accelerator XML file represents a single lo-
{documentUrl?}. cale. If your service works for multiple languages,
you will need multiple XML files. After identifying
Inline Parameters: These specify the inputs to a the user’s preferred language you can provide the
service through the URI template. user the appropriate file to install.
28 Accelerators in Internet Explorer 8 Beta 2 www.code-magazine.com

Following is an example of an Accelerator in Listing 2: Accelerators checklist
Spanish where the display and category have been
localized. 1. Display Name – make it descriptive
The display name should lead with the verb, article, and then the product/service. The verb
should be the category. This should not exceed 50 characters. Here are some examples:
- Map with Live Maps (category ="map")
You can write Accelerators - Blog with Windows Live Spaces (category="blog")
for all the locales 2. Categories – use a recommended category

that your website supports. Categories are a way to group similar Accelerators so that users can quickly find what they
are looking for. IE allows Web developers to define their own category, but suggest using a
recommended category.


Blog A blog service that creates a new blog post based on a link or user-selection
<display>
Bookmark A service adds a link to the user's personal bookmarks on the Web
<name>Mapa con Live Maps</name>
Define A service that provides definitions based on selected text
<icon>http://www.live.com/favicon.ico</icon>
</display> Email A service that can create a new email message
Find news A service that finds related articles within the scope of the site
Find product A service that finds related products within the scope of the site
 Map A service that provides maps for a selected address
<activity category="mapa"> Send A service that converts Web data into application data
... Share A service that shares a link with the site community or network
</activity> Translate A service that translates the current Web page or selection to another language
3. Preview – entice users to your site

Getting the User to Install Your Accelerator The preview is the window that pops up when users are hovering over the Accelerator. Use it as
a visual way to attract users to your site. These should be simple views that load quickly (under
You can promote your Accelerators from your web-
500ms) and do not require any interactivity as this creates an undesirable user model (form
site. Internet Explorer has a browser API that is
fields, tabs to switch to another view, etc.)
accessible by Web pages and supports easy installs
through the click of a button.
4. Content – not just selection
The following example checks if an Accelerator is Accelerators are available on text selection, links, and the current Web page. You can also create
installed: one Accelerator that uses all three contexts.
5. Tests – make sure it works

Test your Accelerator on different types of content so that it works properly.
Internet Explorer has a. Blank content – what happens when blank content is sent to your service?
a browser API that your website b. Multi-line content – does your service handle line-breaks?
c. Script – Some user selection may have JavaScript associated to it. If you specify HTML
can access and provide selection, then your service should be filtering this script on the server.
easy installs of Accelerators
through the click of a button. used to Accelerators, copying text, opening a new Does the
tab, navigating to a website and pasting text seems Name Change to
very old school.
“Accelerators”
window.external.isServiceInstalled For Codeless Accelerators, in essence you need to Affect the XML
("http://maps.live.com/GetMap.xml", specify the display elements, the category, the con- and APIs?
"map");  tent type of the input and the parameters that need No. The OpenService XML
to be sent to your service. You can optionally use format will remain the same
The following example displays a button that in- the preview window to display HTML content re-
as in Beta 1 and the APIs will
stalls an Accelerator: turned from your service or the user can navigate to
continue to use “Activities.”
your website by clicking on the Accelerator menu
This is done to ensure that the
<button onclick="window.external.AddService item.
transition from Beta 1 to Beta 2
('http://maps.live.com/GetMap.xml')">
does not require sites to update
Add map Activity</button> Listing 2 is a simple checklist to make sure that
their content.
your service is consistent with other Accelerators
and takes advantages of the Internet Explorer 8
Putting It All Together Beta 2 functionality.
Through this article, you can see that Accelerators

are a great way to attract users to your website and Ritika Virmani
very easy to write for Web developers. Once you get
www.code-magazine.com Accelerators in Internet Explorer 8 Beta 2 29

New Search Features in

Can you imagine a world without search? I don’t think a single day
goes by when I don’t do a least one Internet search. Internet search has
gotten leaps and bounds better than what it started out as years ago; yet
aside from adding a search box to the browser chrome, browsers, as of yet,
have not significantly changed the way that users search online.
Sharon Cohen
sharco@microsoft.com
ith Internet Explorer in Internet Explorer 8 Beta 2 it
Sharon is a Program Manager
on the Internet Explorer team.
She joined the team three
W 8 Beta 2, Microsoft is
taking some big steps
that we hope will change the
Fast Facts
Almost any website
that has a search box can be
is now very easy to search with
any search provider. You can
easily install multiple providers
years ago just in time to way you search. Our goal is to and switching over to use them
enable you to search for the
used as an Internet Explorer is simple. We know you don’t
help ship ActiveX Opt-In for
right term on the right pro- search provider. just search on Google or Ya-
Internet Explorer 7. For Internet
vider and get the right infor- Creating an OpenSearch hoo or Windows Live; Search-
Explorer 8 she is working on all
the search features and also on mation as quickly as possible. description file for your ing with Wikipedia, eBay, or
some features which are part of With contributions from your website only takes a few your favorite online store is
the setup experience. favorite search providers, we minutes and once your users just as easy.
are now providing suggestions add your website to their
in Internet Explorer 8 Beta 2
search box they can
that can help you formulate
access it at any time.
What Can You Do
great search terms. In addition, with Search in
Internet Explorer 8 Beta 2?
Let’s imagine that you want to use Internet Explorer
8 Beta 2 to conduct some Internet searches to plan
a night out on the town (in this example, Seattle).
You might want to start out by searching for “se-
attle restaurants”, so you start typing in the search
box. As you are typing, one of the first things you’ll
notice is Internet Explorer 8 Beta 2’s new search
suggestions as seen in Figure 1.
Our goal is to
enable you to search
for the right term on the
right provider and
get the right information
as quickly as possible.
Figure 1: Internet Explorer’s new search Search suggestions appear as you are typing and
box dropdown. At the top of the dropdown offer you some ideas on things you might like to
are previously typed search terms. The next search for. In fact, as I type “seattle” I see “seattle
section contains the search suggestions, restaurants” as one of the suggestions. Clicking on
after which are history results, and finally at the suggestion brings me right to the results page.
the bottom is the QuickPick menu. This is great for me as restaurant is one of those
Figure 2: The search box showing some visual words that I chronically misspell. (I’ve used Word’s
suggestions. These visual suggestions highlight spelling correction feature twice already as I’m typ-
particularly valuable suggestions like the Space ing this article so not having to type out the full
Needle, the Mariners and the Seahawks. word in the search box is great for me.)
30 New Search Features in Internet Explorer 8 Beta 2 www.code-magazine.com

Figure 3: An example visual suggestion. Visual suggestions can combine text with images to highlight a particular
suggestion or provide a bit of information.
As you type more, you will notice that some sugges- page. One of the results that came up is Wild Ginger,
tions include small images. These are called visual which sounds like a good choice. However, think-
suggestions. Visual suggestions may cue you in to ing about it more, it would be a really good idea to
particularly important suggestions such as in Figure read what the Seattle Post-Intelligencer newspaper
2 where “seattle space needle,” “seattle mariners” (Seattle P-I) has to say about Wild Ginger since they
and “seattle seahawks” have been highlighted with frequently do restaurant reviews. With the Seattle
visual suggestions. P-I installed as a search provider, you can just select
the name of the restaurant and click on the Accel-
In addition to highlighting interesting suggestions, erators icon. There you will find all your installed
visual suggestions can also be used to provide some search providers and clicking on one you can issue
bit of information such as in Figure 3 where I’ve a search. This is just like how Accelerators work. In
typed “seattle weather”. Figure 4 you can see how your search providers are
available as accelerators.
There are two additional sections you’ll notice un-
der the search box. The first section, directly under Any installed search provider will automatically be-
the search box contains your previously typed search have like an Accelerator. Your default search provider
terms. From observation, we know that people tend will be listed as the default in the Accelerator list and
to search for the same things over and over again. your secondary providers will be listed in the over-
Maybe you read an article last week that you want to
go back to, or maybe like me, there are sites that you
visit infrequently enough that you can’t remember
the URL, you don’t have in your Favorites folder and
you just know how to get to because every time you
search for “seattle metro transit” (for example), the
first result is the King County Metro website.
The other section you’ll notice under the search

box is a section of results from your History. This
section is new to Internet Explorer 8 Beta 2. Using
Windows Search, Internet Explorer 8 Beta 2 will
search over your stored history. The search results
are based on the pages’ title and URL. Perhaps you
didn’t actually do a search for that interesting news
article that you read last week. You might have just
been browsing your favorite news site. With history
results under the search box, you can find the page
you were looking for without ever doing a search.
In all three sections under the search box, we

have added hit highlighting so that you can glance
through the results and know exactly why each one
was suggested to you. The search box dropdown is
also consistent in look and feel to the address bar.
In normal use, the address bar will display results
from your Favorites, History, and Feeds, however,
you can also switch the address bar over to search
mode by typing “?” followed by a space and then
your search term. This will allow you to get search
suggestions in the address bar.
Now that you’ve seen what’s available under the

search box, let’s go back to planning a night out
on the town. Having issued the query for “seattle Figure 4: Installed search providers are automatically converted to Accelerators. You can select text
restaurants” we are now looking at a search results on a Web page and search with any of your search providers.
www.code-magazine.com New Search Features in Internet Explorer 8 Beta 2 31

flow menu. Search providers don’t have to do any ex- that instead of searching for restaurants on one site,
tra work to enable Accelerator support—this is done you would rather search on another. In which case,
automatically whenever you install a search provider. your most recent search term is all ready for you in
Search providers can even support Accelerator pre- the search box. Speaking of which…
views if they want, although this does require some
new work on the part of the search provider. Switching search providers in Internet Explorer 8
Beta 2 is much improved from how it was in Inter-
After issuing your search via the net Explorer 7. Internet Explorer 8 Beta 2 has a nifty
If you have any Accelerator menu, you will now little menu under the search box called the Quick-
be viewing a search results page Pick menu. Here you will see the favicons of all your
search features on your website for Wild Ginger. After reading the installed search providers. Clicking on one of these
that worked with review of Wild Ginger, you de- icons lets you execute a search with that provider.
cide that you aren’t in the mood The QuickPick menu will appear when you first click
Internet Explorer 7, for Asian food tonight and would into the search box and it will remain accessible as
those will continue to work with rather go for Italian. So you search you begin typing. Once you start typing the Quick-
for Italian restaurants on the Se- Pick menu moves to the bottom of the dropdown
Internet Explorer 8 Beta 2. attle P-I site. If you are paying at- below your history results. We really hope that this
tention, you’ll notice that the text will make secondary providers more accessible and
“Italian restaurants” has now been encourage everyone to use the search box for all the
placed in the search box. This is because Internet Ex- sites they use, not just for search sites.
plorer 8 Beta 2 detects searches that you do from with-
in the websites of your installed search providers. Within the QuickPick menu, you also have the op-
tion to access the Internet Explorer Find on Page
One of the biggest advantages of the search box is feature. Find on Page in Internet Explorer 8 Beta
that it allows you to initiate a search from anywhere. 2 is much improved from what was available in
You don’t have to first go to your provider’s homep- Internet Explorer 7. Find on Page is now a single
age. But we know that once users are already at their line bar that drops down from the Internet Explor-
search provider’s website they may change or refine er chrome. It supports highlighting of all the hits
their query on the site. By keeping track of your most within the website and highlights the hits as you are
recent search query string, we have made it very easy typing instead of having to press enter when you
to switch over to a different search provider if you are finished. In addition, Find on Page will display
decide that a different provider is more appropriate to you the number of hits within the page. Figure 5
to handle your query. For example, you could decide shows IE8’s new Find on Page functionality.
Figure 5: Internet Explorer 8 Beta 2’s new Find on Page bar doesn’t block any of the page content.
It will highlight all the matches within the page as you type your query.

How Do You Create Search Features QuickPick menu. If you choose to support search
for Internet Explorer 8 Beta 2? suggestions, you will also include the suggestions
URL in the description file, which I will explain
how to do later.
Having seen all the great search features available
in Internet Explorer 8 Beta 2, the question you may Here is a sample OpenSearch Description file
have as a website owner is how your users can start which contains the search providers name, URL,
using these great features with your site. Well, I have and icon:
some great news to start off with. If you have any
search features on your website which worked with <?xml version="1.0" encoding="UTF-8"?>
Internet Explorer 7, those will continue to work <OpenSearchDescription xmlns="http://a9.com/-
with Internet Explorer 8 Beta 2. /spec/opensearch/1.1/">
<ShortName>My Search Provider</ShortName>
The first step in creating search features for Internet <Url type="text/html" template="http://example.
Explorer 8 Beta 2 is to enable users to install your web- com/?q={searchTerms}&source=IE"/>
site as a search provider in the search box. To do this, <Image height="16" width="16" type="image/icon"
there are two steps you will take. The first step is to >http://example.com/websearch.ico</Image>
Why Create an
create an OpenSearch description file of your search </OpenSearchDescription> OpenSearch
provider and the second step is to expose the descrip- Description File for
tion file on your website so that users can install it. The ShortName element contains the search pro- Your Website?
vider name that is displayed in the Internet Explorer
search box. The Url element contains the URL where OpenSearch description
Creating OpenSearch Description Files searches will be sent for this search provider. One files are small XML files that
thing that people sometimes forget to do is to escape describe exactly how to execute
OpenSearch is a collaborative community started the ampersands within their URLs; otherwise your a search on your website. Once
originally by Amazon and A9 that has created a description file breaks. In the example above there is you create this file, your users
specification for how to describe search provid- an escaped ampersand. The Image element contains can install your website as one
ers and search results. The great thing about using the favicon file for this search provider. of their Internet Explorer search
OpenSearch is that it is used by Internet Explorer 7, providers. However, in addition,
Internet Explorer 8 Beta 2, Firefox 2, and Firefox 3. Within the search URL provided for this search pro- since OpenSearch is accepted
You can find more details about the organization and vider, you can see the parameter “q={searchTerms}”. as a standard, Firefox users
the full specification at http://www.opensearch.org. When Internet Explorer navigates to this provider to will also be able to install your
get search results, {searchTerms} will be replaced by search provider with the same
OpenSearch description files are small XML files the query string that the user typed into the search file. Not all your users will
that describe your search provider to a client, in this box. You should make sure that this text is found make heavy use of the search
case to Internet Explorer. Within an OpenSearch de- somewhere within your search URL, otherwise you box but for those that do, why
scription several bits of information can be found: will not know what your user was looking for. not make it easy to include
your website as one of their
• Search Provider Name: The name that will be You can find further details on OpenSearch descrip- providers?
displayed in the search box when your pro- tion files at http://www.opensearch.org.
vider is selected.
• Search URL: This is the URL where searches
for your search provider are sent to. Installing Your Search Provider
• Icon: A favicon file for your search provider.
This icon is displayed next to your provider Once you have created your OpenSearch descrip-
name in the search box. tion file, there are two ways that users can install
it. Users can install via an embedded link on your
All OpenSearch description files must include the website, or with a link or button that you create and
search-provider name and search URL. Without promote on your website.
these elements, Internet Explorer cannot install
your search provider. We also highly recommend If your page contains an embedded link, when In-
that you include an icon within the OpenSearch ternet Explorer displays your page, the search box
description file, since if Internet Explorer can’t find dropdown arrow will light up orange as seen in Fig-
an icon for your provider either in your description ure 6. Users can then install your provider via the
file or at the root of your website, it will use a ge- Internet Explorer search box drop-down menu. The
neric icon to represent your search provider in the advantage of using this install method is that you
don’t have to change the layout of your page at all
to support this. The disadvantage, however, is that
not all users will discover that you have a search
provider available as not everyone will notice the
change in color in the search box or know to click
on it.
Figure 6: The search box is lit up orange when an To add an embedded provider to your website, you
embedded search provider is detected within the must include a special link element within the head
current Web page. of your Web page.

<link title="My Provider" rel="search" current query string and you can supply suggestions
type="application/opensearchdescription+xml" which might enable the user to create a better search
href="http://www.example.com/provider.xml"> term. Internet Explorer 8 Beta 2 supports two for-
mats of search suggestions—a JSON format and an
The rel attribute of the link must have the value XML format. The JSON search-suggestion format
“search” and the type attribute must have the val- lets you send text-based search suggestions, which
ue “application/opensearchdescription+xml”. The can be augmented with descriptions and URLs. The
value of the href attribute is an absolute or relative XML search-suggestion format lets you send all the
URL that specifies the location of the OpenSearch content available with JSON suggestions, as well as
description file. The title attribute is displayed in visual suggestions and section titles.
the search box dropdown menu to let people know
what search provider they are installing. The title JSON search suggestions are returned as a JavaScript
should match the title of your search provider in array of arrays. The array contains four values:
the OpenSearch description file otherwise the
search box will always light up orange when your • Query String (required). The search term that
customers visit your website, regardless of whether was requested. If the browser requested sug-
they have your search provider installed or not. gestions for “seattle” then the query string is
“seattle”. Returning the query string allows the
Alternatively, instead of relying on a hidden link for client that requested the suggestion to check
the user to install your search provider, you could that the results retuned are for the correct
also create a link or button from which users can query.
install your search provider. The Windows Search • Completions (required). These are the sugges-
Guide (http://www.microsoft.com/windows/ie/search- tions for the given query string.
guide/en-en/default.mspx) is an example of a page • Descriptions (optional). Alternate strings that
that uses links to allow the user to install search provide additional information or context
providers. about a given completion.
• Query URLs (optional). A list of URLs that
You can use the JavaScript method AddSearchPro- should be used if the user selects a given sug-
vider to create a button or link from which your gestion.
search provider can be installed. For example, here
is a button which adds a search provider: The following is an example JSON response.
<INPUT TYPE="button" VALUE="Add Search Provider" ["seattle",

onClick='window.external.AddSearchProvider( ["seattle weather", "seattle seahawks",
"http://www.example.com/Provider.xml");'> "seattle mariners"],
["rainy all the time", "football team",
When users click on your link or button, they will "baseball team"],
see a dialog that will let them install the search pro- ["http://www.weather.com/seattle","http://www.nfl.
vider. If the user chooses to, they can make your com/seahawks", "http://www.mlb.com/mariners"]]
search provider the default provider by selecting a
check box on the install dialog. This JSON response will produce the search box
dropdown seen in Figure 7. In the JSON response,
the first element in the first array, plus the first ele-
Creating Search Suggestions ment in the second array, plus the first element in
the third array, create a single search suggestion.
I told you previously that Internet Explorer 8 Beta 2
now supports search suggestions in the search box. Descriptions and query URLs are optional elements
As a user types in the search box, Internet Explorer in the JSON response. If you do not wish to include
can send a request to your search provider with the these, you can simply leave out the arrays entirely as
seen in the example below.
["seattle",
["seattle weather", "seattle seahawks",
"seattle mariners"]]
The JSON suggestion format does not let you spec-

ify the title that you want your suggestions section
to have; if you are using JSON suggestions, Internet
Explorer will title the section with the name of your
search provider plus the word “Suggestions.” If your
search provider was titled “Joe’s Search” then your
suggestions would be titled “Joe’s Search Sugges-
tions”.
Figure 7: Here is an example of how the search box will
look when Internet Explorer receives the JSON response XML search suggestions support all of the same fea-
example or the XML response example. tures as JSON search suggestions, along with a few

additional features that are not available in JSON. If you wish to add images to your suggestions, you
These additional features include the ability to: just need to include an <image> tag within an item,
as shown in the following item.
• Name the title of the suggestions section.
• Split suggestions across multiple sections. <Item>
• Include visual suggestions. <Text>seattle mariners</Text>
<Image
The Basic XML suggestion looks like the follow- source="http://www.search.com/mariners.jpg"
ing: alt="Seattle Mariners" width="69"
height="70" />
<?xml version="1.0"?> </Item>
<SearchSuggestion >
<Query>seattle</Query> By default, if you include text with an image, the
<Section> text will be vertically centered next to the image.
<Item> However, you can change the text alignment by an
<Text>seattle weather</Text> align attribute on the image element. By setting the
<Description>rainy all the align attribute value to “top”, “middle”, or “bottom”,
time</Description> you can specify the text alignment.
<Url>http://www.weather.com/seattle</Url>
</Item> You can create items with text and an image, or you
<Item> can create items which only display an image. If you
<Text>seattle seahawks</Text> do not include text you must include a URL so that
<Description>football Internet Explorer knows where to navigate a user to
team</Description>
when they click on that suggestion.
<Url>http://www.nfl.com/seahawks</Url>
It is highly recommended that you include the
</Item>
height and width attributes of your image when
<Item>
sending a visual suggestion. However, if you do
<Text>seattle mariners</Text>
not include these values, Internet Explorer will al-
<Description>baseball
locate a default amount of space to the image and
team</Description>
scale the image to fit within that space. The default
<Url>http://www.mlb.com/mariners</Url>
amount of space is the vertical equivalent of one
</Item> line of text.
</Section>
</SearchSuggestion> As I alluded to previously, if you support search
suggestions in either JSON or XML format, you
This XML response is equivalent to the previ- need to specify your suggestions URL in your
ous JSON response and will produce exactly the OpenSearch description file. You can do this by
same output including the same section name, as adding additional URL elements to the file. If you
shown in Figure 7. If you do not wish to include are supporting JSON suggestions then add a URL
the descriptions or query URLs with your sugges- of type “application/x-suggestions+json”. If you
tions, you simply remove those elements from the are supporting xml suggestions then add a URL
items. of type “application/x-suggestions+xml”. These
URLs should be added after your main search
If you do not specify a title for your suggestions sec- URL to maintain compatibility with Internet Ex-
tion, Internet Explorer will title your suggestions plorer 7. Use the same {searchTerms} parameter
with the name of your search provider followed by to indicate where in the URL to include the query
“Suggestions”; this is the same as how JSON sug- string.
gestions are titled. If you wish to specify the title of
your suggestions, you can add a title attribute to the
<section> tag, as in the following example. Call to Action
<?xml version="1.0"?> I hope you’ve been intrigued by what you’ve read

<SearchSuggestion > here today. If you have not yet done so, install In-
<Query>seattle</Query> ternet Explorer 8 Beta 2 and check out some of the
<Section title="My Custom Suggestions"> search features that you’ve read about here. I hope
... that they will make a difference in the way that you
</Section> search and enable you to search more efficiently. If
</SearchSuggestion> you own a website and don’t already advertise an
OpenSearch description of your site, add one and
To create multiple sections, you can insert a <sepa- then consider if search suggestions would be appro-
rator> tag into your XML. You must include at least priate for your site as well. Happy searching!
one item before and after your separator. If you in-
clude a title attribute in the tag, then the separator
will be titled; if none is included, the separator will Sharon Cohen
just be a line drawn across the dropdown.

Developer Tools in
Great tools play a critical role in developer productivity, and
while many web development tools exist, they likely don’t meet
your needs in all tasks. For example, you may want to quickly debug
JavaScript, investigate a behavior specific to Internet Explorer, or iterate
rapidly to prototype a new design or try solutions to a problem.
John Hrvatin
John.hrvatin@microsoft.com
n order to improve developer productivity in Optimize Application Performance
John has been a Program
Manager on the Internet
Explorer team in Redmond,
Washington, since 2004. He
I these and similar scenarios, Internet Explorer 8
Beta 2 includes powerful, yet easy-to-use tools
that have a few important characteristics.
Identifying and fixing performance issues is usually an
iterative approach done by focusing on one scenario
at a time. With the Internet Ex-
works on Internet Explorer plorer 8 Developer Tools script
8’s Web developer tools and Fast Facts
Integrated and Simple to Use profiler, you can collect statistics
platform performance. Internet Explorer 8 Developer like execution time and number
Every installation of Internet Tools provides easy to use of times a JavaScript function
Explorer 8 Beta 2 includes the web development tools was called as you test your ap-
Developer Tools. This enables integrated in your favorite plication and use the profile re-
debugging anywhere you find In- browser. With these tools port to quickly identify and fix
ternet Explorer 8 Beta 2, wheth- performance bottlenecks.
you can not only inspect
er it’s your dev machine, test ma-
HTML and CSS, but you
Every chine, or a client’s machine. In
can also edit them. And
With these characteristics, the
addition, by avoiding the use of features of the Developer Tools
installation of an extension we limit the impact the built-in JavaScript will dramatically improve your
Internet Explorer 8 of the tools on browser perfor- debugger makes it easy productivity when developing in
mance to only the times when for you to fix script errors, Internet Explorer. The rest of this
Beta 2 you open the tools. Internet Ex- while the JavaScript profiler article explains many of these fea-
includes the plorer 8 Beta 2 also includes on- helps identify and fix script tures in more detail. For complete
the-fly script debugging so you documentation of all features, in-
Developer Tools. performance bottlenecks.
can enable debugging as needed cluding keyboard shortcuts, visit
for only the current Internet Ex- the Internet Explorer Developer
plorer process rather than enabling debugging for all Center on MSDN at http://msdn.microsoft.com/ie.
of Internet Explorer and accepting degraded perfor-
mance and regular script error dialog boxes.
Getting Started
Attention Provide a Visual Interface to the Platform Getting started with the tools is simple: press F12 or
Keyboard Users! click Developer Tools on the Tools menu of either
Instead of reverse engineering how your site works the menu bar or the command bar. You can also
The Internet Explorer 8 or modifying your site to output debug information, add the Developer Tools icon to the command bar
Developer Tools have extensive the Developer Tools let you look into Internet Ex- for quick access by right-clicking on the command
keyboard support to make plorer to view its representation of your site. This bar, selecting Customize, and then Add or Remove
it even easier to accomplish reduces the time you spend debugging dynamic sites Commands... Find the Developer Tools icon in the
tasks. Use standard Windows where source inspection isn’t useful or investigating list on the left and click Add. Click Close and the
conventions like F2 to edit a behavior specific to Internet Explorer where a ge- new button will appear in the command bar.
and F6 to navigate tab neric authoring tool cannot help.
groups, and check out the Once open, the tools exist in their own window,
Internet Explorer 8 Developer each one connected to a single tab in Internet Ex-
Tools Quick Reference at Enable Fast Experimentation plorer. If you prefer to decrease the number of open
http://go.microsoft.com/ windows, pin the tools within a tab by clicking the
fwlink/?LinkID=123648 for a When prototyping a new design or testing fixes in pre- “Pin” button or pressing CTRL+P.
full list of keyboard shortcuts. vious versions of Internet Explorer, you likely edit your
source, save it, refresh your page in the browser, and re- Some features of the tools don’t need the complete
peat. The Internet Explorer 8 Developer Tools stream- tools interface. In that case, click the Minimize but-
line this scenario by letting you edit your site within the ton or press CTRL+M when the tools are pinned.
browser and see changes take effect immediately. The tools become a row at the bottom of the win-
36 Developer Tools in Internet Explorer 8 Beta 2 www.code-magazine.com

dow, providing access to all menu items and the Inspect Style and Other Information
document and browser modes without filling all the for an Element
screen space used by the full user interface.
Once you’ve selected an element in the DOM tree,

Inspect and Edit HTML and CSS the right-hand pane exposes more information
about the element.
The tools give you visibility into the browser so you
can inspect your site’s HTML and CSS as it exists in- When debugging the positioning of an element, use
side Internet Explorer instead of just the source. This the Layout pane to find box model information such
is particularly helpful on dynamic sites, complex sites, as the element’s offset, height, and padding.
and sites that use frameworks like ASP or PHP.
The Style pane improves CSS debugging by provid-
The primary view in the tools displays the site’s Doc- ing a list of all rules that apply to the selected ele-
ument Object Model (DOM) tree, which reflects the ment. The rules display in precedence order so those
one maintained by Internet Explorer to represent the that apply last appear at the bottom and any property Deepak Jain
site in memory. You can navigate the tree with the overridden by another is struck through, allowing Deepak.jain@microsoft.com
mouse or the keyboard, but a quick way to find the you to quickly understand how CSS affects the cur-
Deepak is a Sr. Program
node for a specific element on the page is turning on rent element without manually matching selectors.
Manager in the JScript team
“Select Element by Click” and clicking the desired
element on the page. The tools will automatically se- If you’re looking for information about a specific
located in Hyderabad, India.
lect the corresponding tree node. property, switch to Trace Styles. This pane contains Deepak is focused on building
the same information as Styles except it groups it by tools that make JavaScript
If a site uses script to modify the tree, as many do, property, as shown in Figure 1. Simply find the prop- programmers more productive.
you’ll want to view the latest tree so click the Refresh erty that interests you, click the plus, and view a list
button in the tools to acquire the latest tree from In- of all rules that set that property, again in precedence
ternet Explorer. order.
Figure 1: Trace Styles helps you find a specific style property.
www.code-magazine.com Developer Tools in Internet Explorer 8 Beta 2 37

To further inspect CSS, switch to the CSS tab for a tabs, click the Save button to save the current HTML
list of all CSS files for the current site, as shown in or CSS, respectively, to a file. Remember that not
Figure 2. only will the areas of your site that you modified dif-
fer from your source, but other parts may also differ
since the tools display your site as it exists in Internet
Live Editing Explorer rather than in your source. To prevent acci-
dentally overwriting source, the tools save the output
After using the tools to gather important information as text and add a leading comment to the file.
about your site, you need to be able to take action
quickly. Instead of editing your source, saving, and
refreshing, edit within the tools by clicking on HTML Debug JavaScript
attributes and values and CSS rules and properties to
make them editable. Just click, type the new value, While CSS makes it easier to build dynamic sites
and press ENTER. The change takes effect imme- without JavaScript, most complex sites still need at
diately so you can quickly test changes. In HTML, least some script. And as with any programming lan-
Sameer Chabungbam you can also press the Edit button to make the entire guage, a good debugger is critical to being productive
sameerch@microsoft.com tree editable and then add, remove, or edit complete and the Developer Tools (Figure 3) provide just that.
elements. In either case, the Developer Tools enable
Sameer Chabungbam is a
quick editing without modifying your source.
Program Manager in the
Simple to Begin Debugging
JScript team at Microsoft,
where he is focused on Save Changes Debugging JavaScript in Internet Explorer 8 Beta 2 is
building tools for JavaScript simple. On any site you want to debug, open the Script
programmers. Sameer All changes made in the tools only exist in Internet tab and click Start Debugging. That’s all there is to it;
has recently worked on Explorer's internal representation of the site. There- there is no need to launch a separate application or at-
JavaScript editing features fore, refreshing the page or navigating away brings tach to a process. In previous versions of Internet Ex-
in Visual Studio 2008. back the original site. However, in some cases you plorer, you had to enable script debugging for all of In-
may want to save the changes. In the HTML and CSS ternet Explorer by changing a setting in the Internet Op-
tions Control Panel. However, enabling script debugging
reduces browser performance and generates debugging
dialogs on any site with a script error, which is frustrat-
ing when not debugging. In Internet Explorer 8 Beta 2,
Developer Tools includes on-the-fly script debugging, so
you can avoid these problems by leaving script debug-
ging disabled and letting the Developer Tools enable de-
bugging for only the current Internet Explorer process.
Any new Internet Explorer window will not have debug-
ging enabled until you start debugging in it.
Once started, you have all the functionality you ex-

pect from a debugger.
Execution Control
You can pause execution at a specified place by

Figure 2: The CSS tab lists all CSS files for the current site. setting a breakpoint. Click a line number or right-
Figure 3: The Internet Explorer Developer Tools enable you to debug your JavaScript on the fly.

click the source and choose Insert Breakpoint. You are not debugging. To make it easy for you to fix errors
can set breakpoints within inline functions or event on your page, Console also logs all the script errors.
handlers and use conditional breakpoints.
Of reverse
If you’re not sure where to set a breakpoint, click Eliminate “Alert Debugging” with Console engineering how
Break All to pause execution before the next
JavaScript statement runs or Break On Error to The Developer Tools offer a powerful feature to help you your site works
pause execution when Internet Explorer encounters debug: console.log. Instead of using window.alert and or modifying your
a script error. After pausing execution, step through generating countless dialogs, call console.log to output
script, including anonymous functions, with Step strings to the Console pane. Add variables to the output site to output
Into, Step Over, and Step Out. and use console.info, console.warn, and console.error debug information,
to vary the formatting of entries in the Console window.
Since the Developer Tools Console functionality is simi- the Developer Tools
Variable Inspection lar to that available in Firebug, a Web developer tool let you look into
for Firefox, debugging notifications will work across
As you step through code, it’s helpful to inspect browsers without any changes to your script. Internet Explorer
the current state of variables. Within the Script tab, to view its
use the Locals pane to view local variables and the
Watches pane to monitor a custom list of variables. Profile JavaScript representation of
You can add variables to this list by right-clicking it your site.
in the source and clicking Add Watch or typing the Debugging JavaScript helps perfect the behavior of
variable name in the Watches pane. your site, but the JavaScript profiler can help take your
site to the next level by improving its performance. The
profiler gives you data on the amount of time spent
Navigating Call Stack in each of your site’s JavaScript methods and even
built-in JavaScript functions like string concatenation.
As you debug your application by stepping through Since you can start and stop the JavaScript profiler at
the JavaScript code, you can view the functions in any time during application execution, you can collect In the HTML
the current call stack. Clicking on a function in the profile data for the specific scenario that interests you.
call stack window displays the source code in the Figure 4 shows a screenshot of the profiler. and CSS tabs,
source view window. click the Save
Starting a Profiling Session button to
JavaScript Console save the current
As with the debugger, getting started is simple: open
As with HTML and CSS, the Developer Tools not only the Profiler tab and click Start Profiling to begin a HTML or CSS,
give you the information needed to debug your site, but session. Perform the scenario you want to profile and respectively,
they also make it easy to use that data. Instead of edit- then click Stop Profiling to view the data.
ing your source to test a statement, type the JavaScript to a file.
in the Console pane to execute it. Click Multi Line
Mode to enter large amounts of script. Internet Explor- Viewing Data
er executes the code immediately so you can test the
outcome of adding that code at the same location as By default, the data appears in a function view which
the current break. You can use Console even when you lists all the functions used. Click the Current View
Instead of using
window.alert
and generating
countless dialogs,
call console.log
to output
strings to the
Console pane.
Figure 4: Using the Profiler tab in Internet Explorer Developer Tools you can collect information about your JavaScript
methods and functions, giving you information you need to improve performance of your JavaScript.
www.code-magazine.com Developer Tools in Internet Explorer 8 Beta 2 41

dropdown menu and select Call Tree to view a tree • Internet Explorer 8: In this mode, Internet Explor-
representing the order of calls made so you can walk er reports a user agent, version vector, and docu-
through the code path and find hot spots. ment mode to match default Internet Explorer
Internet Explorer 8 Beta 2 behavior which is the most standards-
In both views, you can add, remove, arrange, and sort compliant available in Internet Explorer 8 Beta
8 Beta 2 has the the columns to find the information you’re looking for: 2. Use this mode if you want to test how Internet
ability to render Explorer 8 Beta 2 users experience your site.
• Right-click a column header and select Add / • IE8 Compatibility View: In this mode, Internet
pages and Remove Columns to customize the view to in- Explorer reports a user agent string indicating
report version clude exactly the data you’re interested in. Internet Explorer 7, but an additional token ap-
• Right-click and select Sort By or simply click a pended to the string serves as an indication to
information as column header to sort the data by that field. web servers that the browser is Internet Explorer
Internet Explorer 7. • Drag and drop columns to rearrange them. 8 Beta 2-capable. The version vector and docu-
ment mode handling are identical to those used by
The profile report gives you information on the URL Internet Explorer 7. Use this mode to test how In-
and line number of the function to help you locate ternet Explorer 8 Beta 2 users experience your site
the code in your application. Click on the function if they’ve chosen the Compatibility View option.
name to bring up the source code for the function in
the source view window of the Script tab.
Document Mode
Find the Performance
Hot Spots Running Multiple Sessions and Exporting Data The Document Mode defines how Internet Explorer
renders your page but has no effect on the version
Use the Call Tree view in the Click Start Profiling again to begin a new profiling vector or user agent string. By using this option in
Internet Explorer 8 Developer session. When you click Stop Profiling, the new data conjunction with the browser mode, you can quickly
Tools Profiler to quickly find displays. To view the data from previous profiled ses- test which document mode you should use for your
the performance hot spot in sions, click the file dropdown and choose another site. Three options exist:
your application. Open your report. The profile report persists for the current In-
profile report in the Call Tree ternet Explorer process, but you can save the profile • Quirks: This behavior matches that of Internet
view and sort on the Inclusive data in CSV format by clicking Export and use any Explorer when rendering a document with no
Time column. Continue other application for later investigation. doctype or a quirks doctype. It’s similar to the
expanding the node which behavior of Internet Explorer 5 and the quirks
takes the highest inclusive time mode behavior of Internet Explorer 6, and the
until you find your performance Test in Different Browser Modes same as the quirks mode of Internet Explorer 7.
hot spot. • Internet Explorer 7 Standards Mode: This be-
Internet Explorer 8 Beta 2 has the ability to render pag- havior matches that of Internet Explorer 7 ren-
es and report version information as Internet Explorer dering a document with a strict or unknown
7. Web developers and end users can use this ability to doctype.
ensure sites continue to work even if not built for In- • Internet Explorer 8 Standards Mode: This be-
ternet Explorer 8 Beta 2, but you can also use it to test havior is the latest standards-compliant avail-
how your site will look to Internet Explorer 7 users. able in Internet Explorer 8 Beta 2 and is the
More Information mode used by default in Internet Explorer 8
Beta 2 when rendering a document with a strict
For more information about
Browser Mode or unknown doctype.
the Internet Explorer Developer
Tools, check out these The Browser Mode menu lets you choose how Internet
resources: Explorer should report three important properties: There’s More!
• Internet Explorer Developer
Center: • User agent string: The value Internet Explorer The Internet Explorer 8 Developer Tools include many
http://msdn.microsoft.com/ie sends to Web servers to identify itself. other features to help you develop sites in Internet Ex-
• Version vector: The value used when evaluating plorer. Some let you view important information like
• Internet Explorer Team Blog: conditional comments. element class name or image size on the page, while
http://blogs.msdn.com/ie/ • Document mode: The value used to determine others help with common tasks like matching a color
whether Internet Explorer uses the most recent on the screen or measuring a distance. Experiment
• JScript Team Blog:
behavior for CSS, DOM, and JavaScript opera- with the tools yourself to learn more about these and
http://blogs.msdn.com/jscript/ tions or emulates a previous version of Internet others. Visit the Internet Explorer Developer Center
Explorer for compatibility. at http://msdn.microsoft.com/ie for complete documen-
tation. And don’t forget to follow the Internet Explor-
Three Browser Mode options exist, each modifying er Blog at http://blogs.msdn.com/ie to keep up to date
these values in different ways: on the latest news from the Internet Explorer team!
• Internet Explorer 7: In this mode, Internet Ex- John Hrvatin

plorer reports a user agent, version vector, and Deepak Jain
document mode identical to those used by In-
ternet Explorer 7. Use this mode to test how In- Sameer Chabungbam
ternet Explorer 7 users experience your site.

Better AJAX Development with

Internet Explorer 8 Beta 2 provides a programming model for
AJAX (Asynchronous JavaScript and XML) development that is
simpler yet more powerful than ever before, spanning browser,
Web page, and server interaction. You’ll be able to build pages that are
faster and more functional, with better end-user experiences. Plus, the APIs
Microsoft has added to Internet Explorer 8 Beta 2 are based on the World Sunava Dutta
Wide Web Consortium (W3C) HTML 5.0 or Web Applications Working sunavad@microsoft.com
Group standards. Sunava Dutta is the AJAX
Program Manager (PM) on
the Internet Explorer team. He
nside this article, you’ll find information on all navigate back and forth a page at a time may find this started in 2005 as the PM for
I of the AJAX enhancements available in Internet

Explorer 8 Beta 2.
jarring. While some Web sites work around this limita-
tion by navigating a hidden IFrame when updating con-
tent through AJAX, this technique
XMLHttpRequest, and more
recently has been the driving
force behind the AJAX story for
developers with features that
These include tools to improve Fast Facts can decrease performance.
performance and client-side enable cross-domain scenarios,
state management: local stor- Since its humble beginnings, To enable AJAX navigations, In- local storage, and script-based
age APIs, AJAX navigations, AJAX has taken off ternet Explorer 8 Beta 2 in IE8 state management. A bit of a
increased connections per host as the way to create mode (the default compatibility rebel, Sunava likes to defy old-
(plus a way to detect the number rich Internet applications mode) treats updates to the win- school thinking and specifically
of connections on a host), and a for the modern Web. dow.location.hash property like was instrumental in raising
scriptable connectivity event. Internet Explorer 8 Beta 2 individual, “traditional” naviga- the number of concurrent
takes AJAX to the next level, tions. When the hash property connections per host in
We’ve also worked on enhanc- and this article is updated, the previous docu- Internet Explorer from 2 to 6.
ing our communication objects ment URL (which may be from
will tell you how to take Sunava is also the Microsoft
and protocols. For example, the previous hash fragment) is
full advantage of it! liaison and an active participant
safer and easier cross-domain updated in the Address bar and
communication is now possible the travelog (and therefore the in the W3C’s Web Applications
through the XDomainRequest object and the W3C’s Back button). At the same time, a new hashChanged Working Group, having
Access Control draft, as well as HTML 5.0’s cross- event is raised and the hash URL fragment is saved contributed to XMLHttpRequest
document messaging. before navigating away from the page. and Access Control. His other
standards participation has
For up-to-the minute information on AJAX and other On AJAX-enabled pages that take advantage of this included HTML 5.0.
technologies in Internet Explorer, visit the Internet Ex- new functionality, when AJAX content changes, navi- Before joining Microsoft,
plorer Developer Center at http://www.msdn.com/ie. gation is as seamless as usual, but the user can back Sunava studied at the
up and go forward as if the AJAX navigation was a University of Pennsylvania and
traditional navigation. The markup sample in Listing
received a degree in Computers
AJAX Navigations 1 demonstrates a use for this new functionality. In this
and Telecommunications
case, the hash property is set when the onendzoom
Engineering with a minor in
One of the great benefits of implementing AJAX— event of the Microsoft® Virtual Earth™ map control
mathematics and economics.
indeed, one of the main reasons for its existence—is occurs. In other words, every time the user zooms in
the ability to update page content without navigat- or out, the Address bar and travelog are both updated,
ing to a new page. With this convenience, though, enabling the user to navigate back and forth between
come drawbacks that can confuse users. On an zoom levels by using the Back and Forward buttons.
AJAX-heavy page, the Address bar is not updated
with each update. Subsequently, the “travelog,” or Every time the user zooms in or out, the fragment
browsing history, isn’t updated either. identifier in the Address bar is updated, as shown in
Figure 1. On this page, that simply means the inte-
As an example, consider a mapping Web site such as ger after the number sign (#) is incremented.
Windows Live™ Search Maps or Google Maps. When
using the AJAX-enabled features of those applications—
such as pan and zoom—neither the Address bar nor the
travelog is updated. Users who are used to the Address
bar changing with each new page they navigate to or Figure 1: With each AJAX navigation, the fragment
who rely on the browser’s Back and Forward buttons to identifier (the integer at the end) is incremented.
www.code-magazine.com Better AJAX Development with Internet Explorer 8 Beta 2 43

Matthew Tevenan
mtevenan@microsoft.com
Matthew Tevenan is a technical Figure 2: Type something in the text box, click the “Send to Store” button, and then close the window. Navigate back to the
writer with the Internet page, and what you typed will still be there. That’s the DOM store in action.
Explorer Developer Content
team, and has been with DOM Storage The following JavaScript snippet introduces the
Microsoft for over five years DOM Storage property localStorage by using it to
now. He previously worked in To store data on local machines, Web sites today create a store and then setting (setItem method), get-
the Windows Client SDK and often use the document.cookie property. However, ting (getItem method), and removing an entry (re-
Windows Digital Media Division cookies are limited in their capabilities; sites can moveItem method), plus clearing the store entirely
as a technical editor. Matthew only store fifty key/value pairs per domain, and the (clear method).
has a Master’s degree in cookie programming model requires parsing the en-
Technical Communication from tire cookie string for data. DOM Storage objects— // Store a key-value pair.
the University of Washington, specified in the W3C’s HTML 5 Working Draft and localStorage.setItem("Sean","Purcell");
and a Bachelor’s degree in implemented in Internet Explorer 8 Beta 2—provide
French from the University of a much simpler and more flexible global and session // Retrieve value string for a given key.
San Francisco. His previous storage model for structured data on the client side. var storeditem = localStorage.getItem("Sean");
work experience as a technical
communicator includes Consider this scenario: A user is trying to find the best // Remove item from store.
stints at Dantz Development
pair of tickets for a popular concert on an online ticket- localStorage.removeItem("Sean");
Corporation (now EMC) anding site. For that purpose, the user opens several win-
dows to make multiple requests, just to see the best seats
Apple Inc. He spends his free // Clear the store.
she can get. If the site’s application is using cookies to
time studying graphic design, localStorage.clear();
store its session state, information could “leak” from
playing the cello, and being
one transaction into the other, potentially causing the
perturbed by his two bad cats. Now let’s see DOM Storage in action. Listing 2
user to purchase seats that she didn’t want without no- is a code sample that will present you with a page
ticing. The potential for this sort of information “leak” (shown in Figure 2) with a text box and two buttons.
becomes even more widespread as Type something in the text box and then click Send
applications become more capable to Store. This serializes the string to the DOM store.
of offline behaviors, such as storing Now, close the browser tab or window, open a new
On AJAX-enabled pages values locally for later return to the one, and navigate to the same page again. In Internet
that take advantage of new server, and as people start using Explorer 8 Beta 2, what you typed into the text box
more tabs to connect to the same and committed to the store will still be there.
AJAX navigations functionality, Web site in parallel.
when AJAX content changes, To see what happens without the DOM store, remove
DOM Storage offers essential dif- the body onload event to observe the past behavior.
the user can back up and go ferences from cookies. For one, it
forward as if the AJAX navigation offers significantly more available It’s important to note that DOM Storage is just a
disk space than cookies. In Inter- mechanism for Web applications to simply store data,
was a traditional navigation. net Explorer, cookies can store 4 and that there is no database behind it. For example,
kilobytes (KB) of data, whereas you can’t perform complex queries like search by
DOM Storage provides about 10 value on the DOM store.
megabytes (MB) for each storage area. Furthermore,
DOM Storage doesn’t transmit values to the server
with every request as cookies do, and data in a global Connectivity Enhancements
store never expires. Unlike cookies, it’s easy to access
individual pieces of data using an interface that is sup- Internet Explorer 8 Beta 2 introduces several connec-
ported in Internet Explorer 8 Beta 2 and other brows- tivity enhancements, including more accurate connec-
ers, and sites can choose to store data for the life of a tivity status information and an increase in the default
tab or until the site or the user clears the data. number of concurrent connections to a single server.
44 Better AJAX Development with Internet Explorer 8 Beta 2 www.code-magazine.com

Listing 1: AJAX Navigations sample markup
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" // The following declaration sets the hash property to a
"http://www.w3.org/TR/REC-html40/strict.dtd"> // variable containing the URL fragment to be saved.
<html> window.location.hash = iZoomLevel;
}
<head>
<meta content="IE=8" http-equiv="X-UA-Compatible"> function HashChangeHandler()
 {
<title>AJAX Map</title> var hash = window.location.hash;
</head> var iNewZoomLevel = hash.substr(1);
 if (iNewZoomLevel != iZoomLevel)
<script src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx {
?v=6" type="text/javascript"></script> iZoomLevel = iNewZoomLevel;
<script type="text/javascript"> oMap.SetZoomLevel(iNewZoomLevel);
var oMap = null; }
var iZoomLevel = 0; }
</script>
function GetMap() 
oMap.LoadMap(); <body onhashchange="HashChangeHandler();" onload="GetMap();"
style="overflow: scroll; height: 100%">
oMap.AttachEvent("onendzoom", ZoomHandler);
iZoomLevel = oMap.GetZoomLevel(); <div id="myMap" style="position: relative; width: 500px;
window.location.hash = iZoomLevel; height: 500px; vertical-align: middle">
} </div>
function ZoomHandler(e) </body>

{
iZoomLevel = oMap.GetZoomLevel(); </html>
Listing 2: DOM Storage sample markup

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" {
"http://www.w3.org/TR/html4/loose.dtd"> localStorage.clear();
<html> }
<head> function clear_text()

<meta content="IE=8" http-equiv="X-UA-Compatible"> {
<title>HTML 5.0 DOM Store</title> document.getElementById('textinput').value = '';
<script type="text/javascript"> }
var key1 = 'defaultkey'; </script>

</head>
function getValue()
{ <body onload="getValue();">
var storeditem = localStorage.getItem(key1);
if(storeditem != null) <h1>Type into the text area and retrieve your text from the local
{ store in Internet Explorer 8.</h1>
document.getElementById("textinput").value = storeditem; <div>
} Enter Text:
} <input id="textinput" onclick="clear_text();" size="60"
type="text" value="Your message here">
function setValue() <input onclick="setValue();" type="submit" value="Send to
{ Store"> </div>
var itemindex = document.getElementById('textinput').value; <button onclick="clearItems();">Clear Stored selection</button>
alert(itemindex);
localStorage.setItem(key1,itemindex); </body>
} </html>
function clearItems()

ers initiated by choosing Work Offline from the File
menu. This was not useful in determining whether
the user truly had an active connection. In Internet
Explorer 8 Beta 2, however, the onLine property in-
dicates whether the system is actually connected to
the network.
Internet Explorer 8 Beta 2 also introduces new simple

events. When the window.navigator.onLine prop-
erty changes after a page is loaded, a simple event is
raised on the page’s body element as follows.
• If onLine changes from true to false, the offline

simple event is raised on the body element.
• If onLine changes from false to true, the online
simple event is raised on the body element.
Finally, Internet Explorer 8 Beta 2 introduces new

callback handlers to indicate a change in the sta-
tus of a connection. The onoffline handler is raised
when the user’s computer loses its network con-
nection—for example, when the network cable is
unplugged or the network adapter is disabled. The
ononline handler is raised when the computer’s
network connection is restored. Of course, these
handlers are also raised when the user toggles the
Work Offline setting on or off.
Figure 3: Internet Explorer 8 Beta 2 knows when you’re online or offline, and can act accordingly. Let’s see these new connectivity status enhance-
ments at work. Listing 3 is a sample that creates a
page (shown in Figure 4) displaying the current con-
nectivity status. It will automatically update as your
network connection is enabled and disabled.
More Connections per Server
If you’re an Internet Explorer and AJAX expert, you

may already know that with versions of Internet Ex-
plorer prior to Internet Explorer 8, you were limited
to two concurrent connections to a single HTTP 1.1
Figure 4: In Internet Explorer 7 and earlier, Web pages need to make a request to the mashup server. Things were a bit better with HTTP 1.0 serv-
server, which then needs to be proxied to the Web server. ers, as the limit was 4, but HTTP 1.1 connections are
far more common today.
Connectivity Status Indication This two-connection limit was due to a mandate in

the Internet Engineering Task Force’s RFC 2616.
With Internet Explorer 8 Beta 2, your AJAX ap- In 1999, when the spec was drafted, this limit was
plication can now fine-tune the user experience in appropriate, considering the dominance of dial-up
the event the user’s connection Internet connections, the uncommonness of script-
is lost. Where before, there was heavy Web applications, and the relative scarcity
no way for script running in In- of broadband connections. Today, however, broad-
In Internet Explorer 8 Beta 2, ternet Explorer to determine the band is much more commonplace. The need for
the maximum number host’s connectivity status, Inter- more per-host connections is especially strong con-
net Explorer 8 Beta 2 can deter- sidering the increase in popularity of AJAX applica-
of concurrent connections mine when the user has lost the tions and pages, many of which send large amounts
from a single host process connection, enabling your AJAX of data asynchronously. That and other improve-
connecting via broadband application to act accordingly. ments to general Web infrastructure have led to an
increase in the maximum number of concurrent
to a single server has been The onLine property of the win- connections in Internet Explorer 8.
increased from 2 to 6. dow.navigator and window.cli-
entInformation objects has been In Internet Explorer 8 Beta 2, the maximum number
available since Internet Explorer of concurrent connections from a single host process
4. However, through Internet Ex- connecting via broadband to a single server has been
plorer 7, the onLine property only indicated whether increased to 6. It’s important to note, however, that
the system was in “global offline mode” which us- the maximum number of concurrent connections

Server Type Scriptable Property Return Value
HTTP 1.1 window.maxConnectionsPerServer MaxConnectionsPerServer
HTTP 1.0 window.maxConnectionsPer1_0Server MaxConnectionsPer1_0Server
Table 1: New scriptable properties for determining the number of connections on the client computer.
over dial-up (with a modem over a telephone line) ed via broadband to the Internet, it will display “6”
to a single server remains the same as for Internet for each value. If you are connected via dial-up, the
Explorer 7 and earlier. values will be “2” for HTTP 1.1 servers and “4” for
HTTP 1.0 servers.
If you’ve implemented workarounds to circumvent
the previous connection limitations, you may have
compatibility concerns with this new behavior. In XMLHttpRequest Enhancements
that case, and to avoid overwhelming your Web
server, you may want to tailor content delivery The XMLHttpRequest object
based on the number of connections each client was invented nearly a decade
computer is capable of having open concurrently. ago, primarily to enable Microsoft XMLHttpRequest
For that reason, Internet Explorer 8 Beta 2 includes Outlook® Web Access to display
two new read-only properties of the window object e-mails without requiring a page timeout support enables you
that enable your server to determine the number of refresh. Since its creation, how- to preset a period of time
available connections on the client computer. Table ever, its adoption has scaled up
1 lists the new properties and their return values. beyond the scope of its original after which the request will abort
design, while its functional design and make a new connection
Depending on the value the property returns, you has not changed. Your advanced
can choose to parallelize downloads or to change the AJAX application may need finer available.
priority of content delivery. control over AJAX requests than
has typically been available.
The sample in Listing 3 shows you these new prop-
erties in action. In Internet Explorer 8 Beta 2, this XMLHttpRequest has been updated to add timeouts.
page will display the number of maximum connec- This means that if your page periodically uses XM-
tions available to your computer. If you are connect- LHttpRequest to poll a server for response text and
Listing 3: Connectivity Status enhancements sample markup

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" }
"http://www.w3.org/TR/html4/loose.dtd">
<html> </script>
</head>
<head>
<title>Connection Events Manual Test Page</title> 
<script type="text/javascript"> <body onload="Start();" onoffline="onof();" ononline="onli();">
function onli() <h3>Connection Events Manual Test Page</h3>

{ <p>This page has event handlers for the <strong>ononline</strong>
connectivity.innerText = "Online"; and <strong>onoffline</strong> events. </p>
connectivity.style.color = "red"; <ol>
} <li>Click <strong>File</strong> -> <strong>Work
Offline</strong> and verify that the span now says
function onof() "Offline".</li>
{ <li>Uncheck <strong>File</strong> -> <strong>Work
connectivity.innerText = "Offline"; Offline</strong> and verify that the span now says
connectivity.style.color = "blue"; "Online".</li>
} <li>Unplug the network cable from the computer and verify
that the span now says "Offline".</li>
function Start() <li>Plug the network cable back in and verify that the span
{ now says "Online".</li>
// Check whether currently connected to a network. </ol>
if (window.navigator.onLine) <br><br><br>
{ <span id="connectivity" style="border: double 5px black; width:
onli(); 30%; margin: 4px 4px 4px 4px; font-size: 80pt; color: red;">
} Online</span><br>
else
{ </body>
onof();
} </html>

there is a delay, you can specify the length of time Since the timeout is set to 0.02 seconds, you will
in milliseconds for the host to wait for a response quickly see a “timed out” alert. If you want to cycle
before timing out the connection. Consider the po- through more alerts, increase the timeout value.
tential reduction in user frustration for lack of feed-
back; where before, your page might have appeared
“hung” indefinitely, it can now gracefully time out Cross-domain Request (“XDR”)
and inform the user of the timeout.
Web browsers have a security policy called the same
In addition, as you just read in the previous section, site origin policy, which blocks Web pages from ac-
even though Internet Explorer 8 raises the maxi- cessing data from another domain. Web sites often
mum number of per-host connections to a server work around this policy by having their server request
in broadband scenarios from two to six, dial-up sce- content from another site’s server in the backend, thus
narios are still limited to two. This means that, with- circumventing the check within the browser. Figure 4
out a timeout set, Internet Explorer cannot open any illustrates this process for a typical mashup site.
new connections beyond the two-connection limit
in dial-up scenarios. Timeout support enables you In Internet Explorer 8 Beta 2, Web pages can simply
For More Information to preset a period of time after which the request make a cross-domain data request within the browser
Get the latest information will abort and make a new connection available. using the new XDomainRequest object, and without
on AJAX and other Internet server-to-server requests. Figure 5 illustrates a cross-
Explorer technologies in the The following JavaScript snippet introduces the tim- domain request (XDR). XDRs require mutual con-
Internet Explorer Developer eout property and the ontimeout event handler: sent between the Web page and the server. You can
Center, at http://www.msdn. initiate a cross-domain request in your Web page by
com/ie. // Create a new XMLHttpRequest object. creating an xdomainrequest object off the window
xhr = new XMLHttpRequest(); object and opening a connection to a particular do-
main. The browser will request data from the domain’s
// Set the XMLHttpRequest timeout value to 5 server by sending an Origin header with the value
// seconds. of the origin. It will only complete the connection if
xhr.timeout = 5000; the server responds with an Access-Control-Allow-
Origin: * header. This behavior is part of the W3C’s
// Event handler for XMLHttpRequest timeout. Web Application Working Group’s draft framework
xhr.ontimeout=timeoutFired; on client-side cross-domain communication that the
XDomainRequest object integrates with.
Now check out the new XMLHttpRequest capabili-
ties for yourself. The code sample in Listing 5 cycles It’s important to note that to protect user data, cross-
through the values of the XMLHttpRequest readyS- domain requests are anonymous, which means that
tate property (the property that represents the state servers cannot easily find out who is requesting
of the request) to demonstrate a timeout. data. As a result, you only want to request and re-
spond with cross-domain data that is not sensitive
Open the page in Internet Explorer 8 Beta 2 and or personally identifiable.
click through the dialog boxes. These are alerts that
cycle through the readystate property values: The following JavaScript snippet introduces the
XDomainRequest object and its events:
• 1: LOADING. The object has been created, but
the send method has not been called. // Creates a new XDR object.
• 2: LOADED. The send method has been called. xdr = new XDomainRequest();
Headers are available.
• 3: INTERACTIVE. Some data has been re- // Indicates there is an error and the request
ceived. // cannot be completed.
• 4: COMPLETED. All the data has been re- xdr.onerror = alert_error;
ceived.
// The request has reached its timeout.
xdr.ontimeout = alert_timeout;
// The object has started returning data.

xdr.onprogress = alert_progress;
// The object is complete.

xdr.onload = alert_loaded;
This snippet introduces the XDomainRequest

properties and methods.
// Sets the timeout interval.

xdr.timeout = timeout;
Figure 5: In Internet Explorer 8, Web pages make a cross-domain data request without server-to-
server requests. // Gets the content-type header in the request.

var content_type = xdr.contentType; As mentioned previously, XDR has two compo-
nents: a client side that makes a request for data
// Gets the body of the response. to a URL across domains, and a server side that
var response = xdr.responseText; responds with the Access-Control-Allow-Origin: *
header and the data, which Internet Explorer then
// Creates a connection with a domain's server. makes available to the requesting domain after per-
xdr.open("get", url); forming security checks.
// Transmits a data string to the server. The code sample in Listing 6 demonstrates the
xdr.send(); client-side component of XDR. The sample refers
to a fictional server, so you should feel free to use
// Terminates a pending send. your local machine or a sandbox server to try this
xdr.abort(); out.
Listing 4: Number of maximum connections status sample markup

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" }
"http://www.w3.org/TR/html4/loose.dtd">
<html> </script>
</head>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"> <body onload="Start();">
<title>More Connections Per Host</title>
<script type="text/javascript"> <h3>Taking Advantage of Six Connections Per Host on Broadband</h3>
<div style="border: double 5px black; margin: 4px 4px 4px 4px;
function Start() font-size: 40pt;">
{ <span>This is for HTTP 1.1 servers: </span>
// Get the value of the maximum number of connections per <span id="http_1_1" style="color: red;"></span><br>
// HTTP 1.1 server. <span>This is for HTTP 1.0 servers: </span>
http_1_1.innerText = window.maxConnectionsPerServer; <span id="http_1_0" style="color: blue;"></span><br></div>
// Get the value of the maximum number of connections per HTTP </body>
// 1.0 server.
http_1_0.innerText = </html>
window.maxConnectionsPer1_0Server;
Listing 5: New XMLHttpRequest timeout sample markup

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" function run_test()
"http://www.w3.org/TR/html4/strict.dtd"> {
<html> // Create a new XMLHttpRequest object.
xhr = new XMLHttpRequest();
<head> xhr.onreadystatechange = alert_readystate;
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"> xhr.ontimeout = alert_timeout;
<title>XMLHTTPRequest Enhancements</title>
</head> // The URL is preset in the text area.
// This is passed in the open call with a GET
 // request.
<body onload="run_test()"> xhr.open("GET",
"http://www.fourthcoffee.com/index.php", true);
<h1>Test starts onload</h1>
<script type="text/javascript"> // The timeout is set to .02 seconds.
var xhr; // You must set the timeout after open.
xhr.timeout = 20;
function alert_readystate()
{ // The request is sent to the server.
alert(xhr.readyState); xhr.send(null);
} }
function alert_timeout() </script>

{
// When the timeout is reached an alert is presented. </body>
alert("timed out");
} </html>

Listing 6: Cross-domain request sample markup
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" {
"http://www.w3.org/TR/html4/loose.dtd"> xdr = new XDomainRequest(); // Create a new XDR object.
<html> if (xdr)
{
<head> // There is an error and the request cannot be
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"> // completed.
<title>Internet Explorer 8 - XDomainRequest</title> // For example, the network is not available.
<script type="text/javascript"> xdr.onerror = alert_error;
var xdr;
// This event is raised when the request reaches
function read_data() // its timeout.
{ xdr.ontimeout = alert_timeout;
var output = document.getElementById('text_response');
if(output) // When the object starts returning data, the
{ // onprogress event is raised and the data can be
// To view the responseText on the page, click the Read // retrieved by using responseText.
// button. xdr.onprogress = alert_progress;
output.innerText = xdr.responseText;
} // When the object is complete, the onload event
// is fired and the responseText ensures the
// The Read button also displays the content type and // data is available.
// length of response in alerts. xdr.onload = alert_loaded;
alert("Content-type: " + xdr.contentType);
alert("Length: " + xdr.responseText.length); xdr.timeout = timeout;
}
// The URL is preset in the text area. This is
function alert_error() // passed in the open call with a get request.
{ xdr.open("get", url);
alert("XDR onerror");
} // The request is then sent to the server.
xdr.send();
function alert_timeout() }
{ else
alert("XDR ontimeout"); {
} alert('Failed to create new XDR object.');
}
function alert_loaded() }
{ else
alert("XDR onload"); {
alert("Got: " + xdr.responseText); alert('XDR does not exist.');
} }
}
function alert_progress()
{ </script>
alert("XDR onprogress"); </head>
alert("Got: " + xdr.responseText);
} <body>
function req_abort() <h1>XDomainRequest</h1>

{ <form action="">
if(xhr) 
xdr.abort(); // Abort XDR if the Stop button <input id="input_url" type="text"
// is pressed. value="http://www.fourthcoffee.com/thedata.txt">
} <br><input id="input_timeout" type="text" value="10000"> <br>
} <input onclick="req_init()" type="button" value="Get">
<input onclick="req_abort()" type="button" value="Abort">
function req_init() <input onclick="read_data()" type="button" value="Read">
{ </form>
var url = <div id="text_response">
document.getElementById('input_url').value; </div>
var timeout =
document.getElementById('input_timeout').value; </body>
if (window.XDomainRequest) // Check whether the browser
// supports XDR. </html>

Listing 7: Cross-document messaging sample origin page markup
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" {
"http://www.w3.org/TR/html4/loose.dtd"> document.getElementById('finput').value = '';
<html> }
</script>
<head> <style type="text/css">
<title>Internet Explorer 8 - Cross Document Messaging</title> #remote_iframe {
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"> width: 800px;
<script type="text/javascript"> height: 300px;
}
// This function runs when you click "Send to Frame" and </style>
// posts content to the IFrame using Cross-document Messaging. </head>
function post_to_frame()
{ <body>
var text_sent = document.getElementById('finput').value;
if (text_sent != '' && text_sent != <h1>Post a Message to an IFrame using HTML 5.0 Cross-document
'Type text you want to send here') Messaging</h1>
{ <div>
var target_iframe = Enter Content:
document.getElementById('remote_iframe'); <input id="finput" onclick="clear_text();" size="32"
type="text" value="Type text you want to send here">
// Post message to secure receiver document. The <input onclick="post_to_frame();" type="submit" value="Send To
// message will only be sent if the target IFrame has Frame">
// the same protocol and host as the specified target </div>
// URI (in this case, http://www.fourthcoffee.com). <iframe id="remote_iframe" src="Test_IFrame.htm"></iframe>
target_iframe.contentWindow.postMessage(text_sent,
"http://www.fourthcoffee.com"); </body>
}
} </html>
function clear_text()
Listing 8: Cross-document messaging sample receiving page markup.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" // Assign values to spans for display within the frame.
"http://www.w3.org/TR/html4/loose.dtd"> document.getElementById('fdomain').innerHTML =
<html> e.origin;
document.getElementById('fdata').innerHTML = e.data;
<head> document.getElementById('fcurrentpage').innerHTML =
<title>XDM Receiver Frame</title> window.location.href;
<meta content="no-cache" http-equiv="pragma"> }
<script type="text/javascript"> }
// Runs the receiver function when the onmessage event is </script>
// raised (a message is received). </head>
if (window.attachEvent)
{ <body>
window.attachEvent("onmessage", receiver); // IE
} <div>
else <b>Remote Message Receiver</b><br>
{ IFrame HREF: <span id="fcurrentpage"></span><br>
window.addEventListener("message", receiver, false); </div>
// Other browsers <br>
} <div>Incoming Message</div>
<br>
// The input to the receiver function is the message. <span>Recieved From: </span><span id="fdomain"></span><br>
function receiver(e) <span>Recieved Data: </span><span id="fdata"></span><br>
{
// Check to make sure message is not blank </body>
// and origin is expected (http://www.contoso.com).
if (e.data != '' && e.origin == 'http://www.contoso.com') </html>
{

Compared
C ompared ttoo ccookies,
ookies, H HTML
TML 5 D DOM
OM
Storagee oobjects
Storage bjects pprovide
rovide a m uch
much
siimppler andd more flexible
simpler exiible global
globball
and
and session
session sstorage
torage m model
odel ffor
or
structured
structured ddataata oon
n tthe
he cclient
lient side.
Figure 6: Our cross-document messaging (XDM) sample at work locally.
On the server side, the browser will request data // Posts the message data (text_sent) to the
from it by sending an Access-Control-Allow-Ori- // target URI ("http://www.fourthcoffee.com").
gin: * header. It will only complete the connection target iframe.contentWindow.postMessage(text_sent,
if the server responds with an Access-Control-Al- "http://www.fourthcoffee.com");
low-Origin with a value of *.
// Runs myFunction once a message is received.
window.attachEvent("onmessage", myFunction);
Cross-document Messaging (“XDM”)
Take a look at XDM in action to better understand
As you discovered in the section of this article on how it works. Listing 7 is a page that sends a mes-
XDR, the browser’s same site origin policy blocks sage to an IFrame (Listing 8) within the page. In
Web pages from getting data from other domains. our example, the page in Listing 7 resides on the
This means that a richer experience is prevented domain contoso.com and the IFrame in Listing 8
since different domains on a single Web page can’t resides on the domain fourthcoffee.com.
communicate with each other. Web sites work
around this policy by creating nested IFrames and You can try this out on your own locally. Just replace
retrieving data transmitted through URLs. Another both http://www.fourthcoffee.com and http://www.
way Web sites work around this policy is by directly contoso.com with http://localhost (of course, you’ll
hosting script and other resource files from other need to enable IIS (Internet Information Services)
domains. This second workaround only allows one- first) and place both files in the inetpub folder on your
way communication. It is also a security risk be- hard drive. What you’ll see looks a lot like Figure 6.
cause embedded script and resources run with the
same privileges as the host Web site and have access
to the user’s data like that stored in cookies. Conclusion
Cross-document messaging (“XDM”) provides a We hope you’ve enjoyed learning about the ways you
postMessage() method off of the document object. can develop AJAX applications in a way that’s better
The postMessage method, along with the onmes- and smarter than ever before. If you haven’t down-
sage event, allows different domains to communi- loaded Internet Explorer 8 Beta 2 yet, now’s a great
cate with each other, given mutual consent. XDM time to do so, and try out the new functionality!
provides a much simpler, more efficient mechanism
for two-way cross-domain communication than the
workarounds mentioned previously. The following Sunava Dutta
JavaScript snippet introduces both the postMessage
method (used in the sender) and the onmessage Matthew Tevenan
event (used in the receiver):

Measuring AJAX Performance

Growing popularity of AJAX has led to increased use of
JavaScript in creating dynamic and rich browser experiences.
JavaScript has become the lingua franca of the Web and its performance has
become an emerging differentiator in how the industry compares browsers.
These attempts have so far been centered on the use of JavaScript micro-
benchmarks. While this is a good first step, it is not sufficient in measuring Shreesh Dubey
end-user perceivable performance of AJAX applications. We used a more shreeshd@microsoft.com
holistic methodology for measuring AJAX performance in Internet Explorer 8 Shreesh manages the
Beta 2. JScript Product Unit located
in Hyderabad, India and is
responsible for the overall
The AJAX Subsystems work is also responsible for asynchronous Microsoft AJAX/JavaScript
data exchange between the Web client and strategy. Shreesh has over 20
In AJAX applications, data is retrieved asynchro- the server. years of experience in the IT
nously using the XMLHttpRequest object. An • Parsers: When data is received from the serv- industry and prior to joining
AJAX scenario can be visualized as an activity er, it reads, analyzes, and converts the data Microsoft; he spent 18 years
passing through a pipeline of logical subsystems (HTML, CSS, XML, etc.) into their native ob- at Intel US, where he held
within the browser stack. In order to understand ject model formats. several positions in Software
the performance characteristics • Layout: Internet Explorer’s Development, Marketing, and
of AJAX applications, we need layout subsystem takes input Business Development. He
Fast Facts holds an MSEE from UT Austin.
to understand what each of from the parsers and com-
these subsystems do and how Do you believe a putes the layout of the vari-
they interact with each other. faster JavaScript engine ous components, which form
Figure 1 shows the AJAX sub- implies faster end-user the Web page.
systems for Internet Explorer 8 visible AJAX performance? • Rendering: Internet Explor-
Beta 2: Do you believe er’s rendering engine does
JavaScript micro-benchmarks the final painting of the page
• Network: Whenever a user accurately represent AJAX (and any subsequent updates
types in a URL to load that are required).
performance?
a webpage, the browser • Native OM (or DOM): The
If you answered yes
communicates with the DOM is the object represen-
server over the network,
to either question, tation of the website’s HTML
and waits for a response you need to read this article! and CSS content. The DOM
from the server. The net- also acts as a layer for com-
munication between differ-
ent browser components.
• JScript Engine: The JScript engine repre-
sents Microsoft’s implementation of the EC-
MAScript language based on ECMA-262 3rd
Edition standard. It contains the basic primi-
tives (functions, objects, types, etc.) for per-
forming various language operations.
Interpreting Micro-benchmarks
There are several micro-benchmarks (for instance,
SunSpider, Celtic Kane, RockStarApps, ZIMBRA)
cited to compare browser performance on AJAX
applications today. These micro-benchmarks typi-
cally measure two things:
1. Pure JavaScript language performance

2. DOM/IE performance (speed of performing
Figure 1: The AJAX subsystems in Internet Explorer. typical DOM operations from JavaScript)
www.code-magazine.com AJAX Performance Measurement Methodology for Internet Explorer 8 Beta 2 53

1. They consist of simple operations that run sev-
“Some of the tests eral thousand iterations, which is generally not
representative of real world applications.
we have done show pure 2. They can be written to exaggerate a particular
JScript performance behavior in a browser and browsers can be tuned
to run certain micro-benchmarks very well.
improvements up to 2.5 times. 3. Micro-benchmarks insert timers in the
Key gains are in strings. JavaScript code to report the elapsed time. Us-
We also measured the ing timers in user level JavaScript code is not
the most accurate way to measure CPU time.
performance gains on
common Gmail operations, Microsoft’s goal in Internet Explorer 8 Beta 2 was
to improve end-user perceivable performance so we
like loading the inbox (24%), were careful not to use micro-benchmarks as a sin-
More Information opening a conversation (35%) gular metric to focus our engineering effort. Instead,
we took a more balanced approach and used real
For more information, check
and opening a thread (25%) world code in addition to micro-benchmarks to drive
out these resources: compared to IE7" – end-user visible AJAX performance improvement.
• Internet Explorer Developer Greg Badros, Senior Director

Center – http://msdn. of Engineering, Google Measurement Methodology
microsoft.com/ie
• Internet Explorer Team Blog We use three different measurements to represent a
– http://blogs.msdn.com/ie/ more holistic view of AJAX performance:
Micro-benchmarks are simple to create, easy to
• JScript Team Blog – http:// run and provide a quick way for developers to run 1. AJAX subsystem measurements
blogs.msdn.com/JScript/ regressions before making check-ins. But, the use 2. Real World Code (RWC) measurements
of micro-benchmarks has limitations: 3. Micro-benchmark measurements
Figure 2: CPU times per site/per AJAX subsystem (June 10 2008 Internet Explorer 8 build).
54 AJAX Performance Measurement Methodology for Internet Explorer 8 Beta 2 www.code-magazine.com

Measuring real-world code is challenging in many
ways. The scenarios are hard to automate and rep-
Microsoft’s goal in Internet licate results consistently. Isolating a scenario is dif-
Explorer 8 Beta 2 was to improve ficult and it is very easy to get “noise” in the mea-
surements that can lead to misleading performance
end-user perceivable performance data. Investment needs to be made to add the right
so we were careful not to use level of instrumentation to get consistent and ac-
curate measurements. Working closely with large
micro-benchmarks as a AJAX customers has been our way to solve some
singular metric to focus our of these challenges and we continue to develop and
hone this process.
engineering effort.
Micro-benchmarks
AJAX Subsystem Measurements
Several micro-benchmarks have emerged (ZIM-
We measured AJAX subsystems time profile using BRA, SunSpider, Celtic Kane and RockStarApps)
Micro-benchmarks
the ETW (Event Tracing for Windows) infrastruc- and SunSpider seems to have become the de facto Links
ture in Internet Explorer 8 Beta 2. Using ETW JavaScript micro-benchmark. In our tests, SunSpi- The micro-benchmarks
events that mark off AJAX subsystems, we can der benchmark shows pure JScript performance referenced in this article are
accurately measure time spent within each AJAX improvement of over 400% compared to Internet listed below:
subsystem, including CPU and elapsed time. This Explorer 7.
data can be collected while running any scenario. • ZIMBRA: http://www.
A select set of thirty popular websites were run to zimbra.com/
collect this data. The process in each case is to clear
This analysis clearly shows • SunSpider: http://webkit.
the cache, launch Internet Explorer 8 Beta 2 with a
org/perf/sunspider-0.9/
blank page, navigate to the site, wait for 45 seconds why the current set of
(to let any animation/layout settle down) and exit.
sunspider.html
Each test is run three times and the subsystem pro- micro-benchmarks, which • Celtic Kane: http://
files are averaged and the run that shows the time concentrate on measuring how celtickane.com/webdesign/
closest to the average is used for the analysis. Figure jsspeed2007.php
2 shows the subsystem times for each of these 30 fast JavaScript executes,
• RockStarApps: http://www.
sites. is not a good measure of end-user rockstarapps.com/samples/
This data shows that the majority of the time spent perceived performance for today’s performance/
in the scenarios we measure today is dominated class of AJAX applications.
by the layout and rendering subsystems in Inter-
net Explorer 8 Beta 2. This analysis clearly shows
why the current set of micro-benchmarks, which
concentrate on measuring how fast JavaScript ex- Conclusion
ecutes, is not a good measure of end-user-perceived
performance for today’s class of AJAX applications. AJAX performance measurement is a complex
Note that browser architectures are different, so problem and we adopted a structured approach
AJAX subsystems in Internet Explorer 8 Beta 2 (and in Internet Explorer 8 Beta 2 to drive targeted
hence the time profiles) would not be comparable performance improvements. Be sure to read the
across browsers. follow-up article in this issue, “Performance Im-
provements in Internet Explorer 8” that describes
the actual changes.
Real-World-Code Measurements
As part of the early access program to get cus- Shreesh Dubey

tomer feedback, we have been working with a few
customers that develop AJAX applications. Part
of this engagement includes getting comparative
data on performance scenarios on their applica-
tions. We worked closely with the Google Gmail
product team and focused on making engineering
fixes that directly resulted in improved end-user
performance. As a result of these efforts, we were
able to directly impact commonly used Gmail op-
erations between 15% - 25% compared to Internet
Explorer 7. We believe Gmail is quite representa-
tive of the current generation of AJAX applications
in how they exercise the AJAX subsystems, so we
think other AJAX applications will see similar im-
provements.
www.code-magazine.com AJAX Performance Measurement Methodology for Internet Explorer 8 Beta 2 55

Performance Improvements
Great performance is one of many things being delivered in
Internet Explorer 8 Beta 2, the latest version of the popular
browser. Beyond a much faster JScript engine, Internet Explorer 8 Beta 2
includes profound performance improvements and exciting new developer
features that make it one of the most exciting browser releases in years.
Christian Stockwell
cstock@microsoft.com
nternet Explorer 8 Beta 2 Here are four simplified ex-
As a Program Manager at
Microsoft, Christian focuses
exclusively on Internet Explorer
performance.
I streamlines the browsing
experience and ensures that
users and developers can be
Fast Facts
The improvements to the
amples of patterns that would
leak memory in previous ver-
sions of Internet Explorer:
more productive than in any scripting engine combine
Prior to his engagement at other browser. Find out why to improve pure JScript
Microsoft he worked at several the community is buzzing as I performance by 400% on the Direct Circular References
Canadian engineering firms highlight some of the most sig- SunSpider benchmarking
and is a proud graduate of nificant performance improve- suite and speed up Gmail by The DOM object refers to itself
the University of Waterloo in ments and great new features over 30% compared to and an object not in the tree:
Ontario, Canada. being released as part of Inter- Internet Explorer 7.
net Explorer 8 Beta 2. function leaktest1()
{
var elem1 = document.createElement("DIV");
Faster JScript elem1.thing = elem1;
}
As Shreesh Dubey discusses in the article “AJAX
Performance Measurement Methodology”, the Circular references between DOM objects not in
JScript engine is an important component af- tree:
fecting the speed of the AJAX pipeline used in
many websites today. Internet Explorer 8 Beta 2 function leaktest2()
includes several enhancements that significantly {
improve those sites. We have worked hard in sev- var elem1 = document.createElement("DIV");
eral broad areas to make sites faster and to reduce var elem2 = document.createElement("DIV");
the amount of memory Internet Explorer 8 Beta elem1.thing = elem2;
2 needs on your favorite sites. I describe a few of elem2.item = elem1;
them below. }
Circular Memory Leak Mitigation Circular References Created by Closures
A key factor influencing the performance of Web Closures with element created dynamically:
browsers today is their ability to minimize the
amount of memory they require. We have made function leak3()
significant improvements to how the JScript en- {
gine manages memory in Internet Explorer 8 var elem = document.createElement("DIV");
Beta 2. elem.onload = function ()
{
The JScript garbage collector in previous versions var y = elem;
of Internet Explorer manages the lifetime of JScript }
objects but not of DOM objects. As a result, the }
JScript garbage collector cannot break circular ref-
erences between DOM objects and JScript objects, Leaks caused by function pointers:
and memory leaks can result. In Internet Explorer
6, these circular references are broken when the function leak4()
Internet Explorer process terminates. In Internet {
Explorer 7, these circular references are broken var elem = document.createElement("DIV");
when users navigate away from page that contains elem.thing = elem.setAttribute;
the leaks. }
56 Performance Improvements in Internet Explorer 8 Beta 2 www.code-magazine.com

In Internet Explorer 8 Beta 2, the JScript garbage What this means for users is that they will have a
collector treats DOM objects referenced by JScript faster and more reliable browsing experience on
objects as any other JScript object. Rather than their favorite sites. Developers, in turn, can once
wait until page navigation as in Internet Explor- again create great new content without having to
er 7 or process termination as in Internet Explor- expend effort managing object lifetime.
er 6, the garbage collector manages the lifetime
of these DOM objects, and breaks circular refer-
ences whenever possible throughout the lifetime Unblocked Downloads
of the site.
Beyond improvements to the Internet Explorer 8
Beta 2 scripting engine, another important aspect of
JScript Runtime Improvements site performance is the ability to quickly download
page elements. When navigating to a Web page,
In addition to eliminating many sources of circular Internet Explorer typically attempts to parallelize
reference memory leaks, the Internet Explorer 8 the download of page elements. In the case where
Beta 2 JScript engine bakes in impressive optimi- Internet Explorer encounters an external script Travis Leithead
zations to directly improve scripting speed. to download, however, previous browser versions travil@microsoft.com
would block parallel downloads until the script
A long-time hobbyist Web
download was complete.
developer, Travis is a member
Optimized String Operations
This approach was sensible when bandwidth was con-
of the W3C Web Applications
One of the most common JScript operations in strained, processing power was expensive, and sites Working Group, a Program
use today is the concatenation of strings. Perfor- were simple. Since the scripts being downloaded could Manager for the Object Model
mance of string concatenation has significantly alter the makeup of the page (and thus determine what and DOM development teams
improved over previous versions of Internet Ex- should be downloaded) this approach could save valu- at Microsoft, and happy father
plorer. In some cases these changes have im- able processing power that would otherwise be wast- of two beautiful girls who
proved the speed of the + and += operators (as ed. With CPU cycles relatively cheap and broadband blissfully know nothing about
well as the built-in String.concat method) by sev- widely available, with Internet Explorer 8 Beta 2 Mi- Web development.
eral orders of magnitude. Coupled with further crosoft recognized an opportunity to speed up brows-
improvements to other string methods, these en- ing by taking advantage of these resources.
hancements should significantly improve meth-
ods that use string concatenation, and obviate the As a result, Internet Explorer 8 Beta 2 no longer
need for developers to devise complex alternative blocks parallel downloads in the presence of ex-
solutions. ternal scripts. What this means is that Internet Ex-
plorer 8 Beta 2 can more efficiently use available
bandwidth to make sites faster for users like you and
Optimized Array Operations me. This is especially true as sites become increas-
ingly complex. Even better, developers do not need
In addition to the great work to improve string to change their sites whatsoever to take advantage
operations, array storage and access within the of this improvement.
JScript engine has resulted in order-of-magni-
tude performance gains for many built-in array
methods. JScript authors implementing their Internet Explorer 8 Beta 2
own array methods (such as Array.push and Ar-
ray.pop) as a faster replacement for the built-in streamlines the browsing
array methods should consider using the built-in experience and ensures that
methods to improve code performance.
users and developers
can be more productive
Optimized Execution Engine
than in any other browser.
Apart from optimizations to strings and ar-
ray operations, the JScript execution engine
shipped within Internet Explorer 8 Beta 2 also Faster Startup and Navigation
optimizes and improves the performance of func-
tion calls, object creation, accessing object pro- In addition to the vast improvements to the JScript
totype properties and specific lookup patterns engine and the improved parallel download behav-
for JScript variables scoped to the window or ior, Internet Explorer 8 Beta 2 features numerous
this objects. enhancements to reduce the amount of time it takes
to start the browser and to navigate to your favorite
The improvements to the Internet Explorer 8 sites.
Beta 2 scripting engine combine to improve
pure JScript performance by 400% on the Sun- That work has involved streamlining the Safety
Spider benchmarking suite and speed up Google Filter, which now keeps users safe at minimal cost.
Gmail between 15% - 25% compared to Internet Microsoft has also worked hard to reduce memory
Explorer 7. fragmentation throughout the browser, significant-
www.code-magazine.com Performance Improvements in Internet Explorer 8 Beta 2 57

ly reduced registry accesses by up to 25% when The JScript engine that ships with Internet Explor-
navigating to some sites, and streamlined aspects er 8 Beta 2 implements the ECMAScript 3.1 JSON
of the Internet Explorer user interface. These proposal. The JSON.stringify method accepts a
changes and others have contributed to a much script object and returns a JSON string, while the
faster Internet Explorer. JSON.parse method accepts a string and safely re-
vives it into a JavaScript object. I am excited at this
addition, as it is not only secure but is also much
Great New Features faster than equivalent framework implementations.
In Internet Explorer 8 Beta 2 Microsoft is introduc- To illustrate, here is an example of serializing and
ing several new features that developers can take deserializing data using the JSON.stringify and
advantage of to improve their site performance. JSON.parse methods:
Several of those features have been discussed in
other articles in this issue. var testObj = new Object();
testObj.numVal = 4;
Gaurav Seth Sunava Dutta introduced the Microsoft implemen- testObj.strVal = "fool";
seth.gaurav@microsoft.com tation of the HTML5 specification’s DOM Storage, testObj.dateVal = new Date(2008, 3, 1);
Cross-Document Request (XDR), and Connectivi- testObj.arrVal = new Array(1,2,"test");
Gaurav is currently working
ty Events in his article, “Better AJAX Development testObj.boolVal = true;
as a Program Manager with
with Internet Explorer 8 Beta 2”. Web developers
the JScript Product Unit at can take advantage of these great cross-platform // Convert the object to a string
Microsoft’s India Development features to speed up their sites. var stringifiedValue = JSON.stringify(testObj);
Center. He has over five years
experience in different language Beyond these three key features, John Hrvatin has // Create a new object from the string
runtimes and tools at Microsoft introduced the JScript profiler built into the Inter- var parsedValue = JSON.parse(stringifiedValue);
and has contributed to various net Explorer 8 Beta 2 developer tools. A crucial
product releases. Prior to that, addition to any Web developer’s toolbox, the pro-
he worked as a developer with filer gives site authors the tools they need to under- Streamlined DOM Searching
Lucent Technologies-Bell Lab’s stand and improve the speed of their sites.
Development Center in India for Do you find yourself caught in the trap of assigning
three years. In addition to these great enhancements, Inter- an ID to every element in your source code in order
net Explorer 8 Beta 2 includes support for several to use the ubiquitous getElementById API to retrieve
new standards that developers can exploit to build what you are looking for? Perhaps you are a veteran
lighting fast sites. The Internet Explorer 8 Beta 2 user of getElementsByTagName? Whatever element
implementation of the ECMAScript 3.1 JSON rec- lookup technique you employ, you have probably
ommendation, support for mutable DOM proto- run into those scenarios where one of these APIs
types, and native support for the Selectors API are just does not stretch as far as you need it to.
all cutting edge features that will form the basis for
the next generation of Web sites and frameworks. Once upon a time I too contributed to those geeky
Web pages with animations that followed your cur-
sor around the screen; I would write the layout of
One of the things that the page in CSS, and then use JavaScript to per-
form the animation by judicious use of setTimeout
Web developers have told us and [element].style.left/top.
is that they need a way to extend
No matter the scenario, you may find yourself search-
the DOM with cutting-edge new ing for a better searching API, or you are turning to
features they can deliver as rapidly JavaScript frameworks that include tailored element
lookup routines for you (prototype.js and jQuery, for
as their business demands. example). Thankfully, with Internet Explorer 8 Beta 2
there is now a better way! You should acquaint your-
self with querySelector and querySelectorAll APIs.
Native JSON support They will likely become some of the most frequently
used APIs in your repertoire. They plug directly into
JavaScript Object Notation (JSON) is a lightweight the improved Internet Explorer 8 Beta 2 CSS 2.1 se-
data-interchange format based on a subset of the ob- lector support so that you can leverage the selector-
ject literal notation of the JScript language and is of- matching engine at any time using JavaScript.
ten used to pass data between components of AJAX
websites. Unfortunately, many sites don't use JSON To experiment with the syntax, try replacing a call
securely and rely on the JavaScript eval method to to getElementById(‘id’) with querySelector(‘#id’)—
“revive” JSON strings back into JavaScript objects. the results are the same. The following example uses
querySelectorAll to grab all relevant elements by class
Security-conscious developers instead use a more and turn off their collective display status. Listing 1 il-
secure JSON parser to ensure that the JSON ob- lustrates the original unoptimized code demonstrating
ject does not contain executable script, often at the that the use of the Selectors API results in significantly
price of a significant performance penalty. less-code to download and execute on the client.

Listing 1: Original [unoptimized] code to hide articles except those matching a certain class. Without the Selectors API, this code is almost 500% larger.
function showHideContentAreaContent(clsName)
{ // Hide any UL elements that may be part of an article...
// *********************************************** var ulCollection = document.getElementsByTagName('ul');
// Begin: Hiding elements that should not be shown for (var k = 0; k < ulCollection.length; k++)
{
// Hide all the H3's (topic headers for sub-articles)... // ...unless this element has a class that matches.
var h3Collection = document.getElementsByTagName('h3'); if (ulCollection[k].className.indexOf(clsName) != -1)
for (var i = 0; i < h3Collection.length; i++) ulCollection[k].style.display = 'block';
{ else
// ...unless this element has a class that matches. ulCollection[k].style.display = 'none';
if (h3Collection[i].className.indexOf(clsName) != -1) }
h3Collection[i].style.display = 'block';
else // Finally, hide the CODE element on one article unless
h3Collection[i].style.display = 'none'; // it needs to be shown.
} var codeColl = document.getElementsByTagName('code');
for (var m = 0; m < codeColl.length; m++)
// Hide the P tags that have a className assigned... {
var pCollection = document.getElementsByTagName('p'); if (codeColl[m].className.indexOf(clsName) != -1)
for (var j = 0; j < pCollection.length; j++) codeColl[m].style.display = 'block';
{ else
// ...unless this element has a class that matches. codeColl[m].style.display = 'none';
if (pCollection[j].className.indexOf(clsName) != -1) }
pCollection[j].style.display = 'block'; // END: Hiding elements
else // ************************************************
pCollection[j].style.display = 'none'; }
}
}
function useSelectors(clsName) the fact that you can harness the native implemen-
{ tation to speed up your code dramatically. Just go
// Hide everything... to http://webkit.org/perf/slickspeed/ in Internet Ex-
var unset = plorer 8 Beta 2 to see for yourself!
document.querySelectorAll('h3, p, ul, code');
for (var i = 0; i < unset.length; i++) Mutable DOM Prototypes

unset[i].style.display = 'none';
As with the support for the Selectors APIs, the
var set = support for mutable DOM prototypes gives devel-
document.querySelectorAll("." + clsName); opers the building blocks to create efficient and
compact abstractions.
for (var i = 0; i < set.length; i++)
set[i].style.display = 'block'; Like many programming languages, JavaScript
} objects derive from well-defined and documented
types, which are discoverable through reflection.
The Selectors APIs are available at two differ- Unlike many programming languages, however,
ent scopes: document and element. If you want to JavaScript makes these types directly available and
find the first result of a particular selector, then use (strangely enough) mutable through its support
querySelector (which returns the found element di- for prototype inheritance! To illustrate the feature,
rectly). Alternatively, if you want to find all matching consider this example:
elements use querySelectorAll. Using element scope
can be important when you want to narrow your var arrayInstance = new Array();
results to a particular subtree of the DOM instead
of collecting results from everywhere. Interestingly // Check to see if there's a "xyz"
enough, the provided selector-string parameter is // (it should not exist because it is not
first checked against the entire document, however // part of the object or its prototype)
the elements returned must be within the proper sub- alert(arrayInstance.xyz);
tree of the element on which the API was called.
// Add xyz to the prototype
The folks over at WebKit have written a test that Array.prototype.xyz = "xyz string";
allows you to compare the Internet Explorer 8 Beta
2 native implementation of the Selectors API to // Now xyz is available to the instance
common JavaScript implementations—highlighting alert(arrayInstance.xyz);

Even with this simplified example, you can see that this.width *= 1.5;
if xyz is a feature that enhances any and all ar- this.height *= 1.5;
ray 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 feed- // Grow all the images in the document.
back, Microsoft is pleased to bring the power and for (var i= 0; i < document.images.length; i++)
flexibility of JavaScript prototypes to the IE DOM {
as well. You may be thinking that I am getting far document.images[i].grow();
How to Use Data URIs too excited by a feature that does not seem par- }
ticularly remarkable, but bear with me for just a
In some circumstances you moment longer and I’m certain that you too will The alternative approach is to add the feature
can exploit Data URIs to avoid be a fan. API manually to each individual image element
expensive round trips to separately—crippling performance. You can see
download content. Compared to frameworks released by Web de- how mutable prototypes provide a much sim-
velopers, features provided by a browser release pler and efficient approach to this common
at a slower pace and cater to a more general au- problem.
Keep in mind, however, that dience. One of the things that Web developers
the base64 encoding incurs have told us is that they need a way to extend the In addition to providing a staging ground, DOM
additional processing overhead DOM with cutting-edge new features—features prototypes enable more efficient JavaScript by
and that Data URIs cannot be only they can deliver as rapidly as their busi- providing a single, logical place for element-
cached independently of their ness demands. Essentially, developers need to related helper functions. For many scenarios the
containing document, script, or be able to fill functionality gaps long before a Element prototype is the most reasonable loca-
style sheet. native implementation shows up in any brows- tion for these additions, as it is a parent to all of
er. DOM prototypes give Web developers the the elements in the Internet Explorer DOM. As
basic building blocks that they can supple- a result, changes to the Element prototype apply
To get started with Data URIs ment the DOM directly with extra functional- to all elements. A good example of how you can
follow these best practices: ity or replace existing implementations with use this approach is to add the getElementsBy-
their own. ClassName API to all elements; the draft spec of
• Include Data URIs in a HTML 5 recently defined this API and Inter-
cacheable script or style Drawing from the previous example, if I want to net Explorer 8 Beta 2 does not implement it
sheet add a feature to all image elements in the DOM natively. You can define this method to imme-
• Use Data URIs only for I could add it to the HTMLImageElement proto- diately treat elements as if they supported it na-
small images type: tively. Best of all, that method will be faster
than more complex alternatives offered as part
• Don’t embed Data URIs // Apply the change to the prototype. of generalized frameworks. See Listing 2 for
directly in HTML or other HTMLImageElement.prototype.grow = function() the implementation of _MSHTML5_getElements-
non-shared resources { ByClassName_Elem.
Listing 2: Implementation of the getElementsByClassName JavaScript function.

function _MSHTML5_getElementsByClassName_Elem(classList) var found = false;
{ for (var tempIter = 0; tempIter < tempList.length;
var tokens = classList.split(" "); tempIter++)
if (tokens.length == 0) {
{ if (staticNodeList[finalIter] ==
return null; tempList[tempIter])
// Per HTML5: "If there are no tokens specified in the {
// argument, then the method must return an empty found = true;
// NodeList." break; // Terminate early if found.
} }
// Pre-fill the list with the results of the first token }
// searched. if (found)
var staticNodeList = this.querySelectorAll("." + tokens[0]); {
// Start the iterator at 1 because the first match is already // This element was in both lists; it should
// collected. // continue into the next round of token
for (var i = 1; i < tokens.length; i++) // checking...
{ resultList.push(staticNodeList[finalIter]);
// Search for each token independently. }
var tempList = this.querySelectorAll("." + tokens[i]); }
// Collects the "keepers" between loop iterations. // Copy the AND results for the next token.
var resultList = new Array(); staticNodeList = resultList;
for (var finalIter = 0; finalIter < staticNodeList.length; }
finalIter++) return staticNodeList;
{ }

<div id="div1" class="xyz">Text With that in mind, I hope you are eager to see how
<div id="div2" class="abc xyz">More</div> Microsoft’s investment to improve scripting speed,
</div> download pages faster, and reduce browser over-
<div id="div3" class="xyz abc box">Other</div> head enables you to browse faster.
<script type="text/javascript"> The full benefit of Internet Explorer 8 Beta 2 is

Element.prototype.getElementsByClassName = not limited to these immediate gains. Not only
_MSHTML5_getElementsByClassName_Elem; is Internet Explorer 8 Beta 2 speeding up the
Web as it exists today, but it is delivering ground-
// Invoke getElementsByClassName. breaking features that will let you build the next
var div1 = document.getElementById('div1'); generation of lighting fast websites.
div1.getElementsByClassName('abc xyz');
</script> With Internet Explorer 8 Beta 2, one thing is clear.
It’s a great time to be online.
Data URI Christian Stockwell

Travis Leithead
If you are like me, you have at one point likely
built a website that required at least a few small Gaurav Seth
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 loca-

tions 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 loca-
tor, 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 us-
ing 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 im-
provements in Internet Explorer 8 Beta 2 center
on building a platform that allows developers
to get more done when they build and browse
sites.

Reliability and Privacy with

Reliability and privacy are two must-have features for every Web
user. To that end, Internet Explorer 8 Beta 2 introduces powerful and easy-
to-use features that improve the dependability of your browsing experience
and the security of your personally identifiable information. Read on for all
the details.
Andy Zeigler
andyzei@microsoft.com
Andy Zeigler is a Program
Reliability reliability, we have done a great deal of work in In-
ternet Explorer 8 Beta 2 to make the browser more
Manager (PM) who joined
For Internet Explorer, reliability means that the brows- robust in all of these areas: performance, recovery and
the IE team in 2007 to help er should always start quickly, perform well, connect display. In particular, this article will discuss:
make IE8 the most trustworthy to the Internet, and show web-
web browser. He works on sites without crashing or hanging. • Loosely-coupled Internet
privacy and reliability features, Most users want their browser to
Fast Facts Explorer: An architectural
including Loosely-Coupled IE, work, recover smoothly after a Internet Explorer 8 Beta 2 feature that helps isolate dif-
Automatic Crash Recovery, and crash, and display the Web cor- introduces great new features ferent parts of the browser
InPrivate™ Browsing. Prior to rectly. Users are not as concerned that significantly improve from each other for smoother
the IE team, he was the PM for with what causes the problem, the security of your browsing performance.
the Windows Preinstallation whether that be a poorly function- personally identifiable • Automatic Crash Recovery: A
Environment (WinPE). ing add-on or poorly performing information and reliability feature that is designed to get us-
website. As part of Microsoft’s of your browsing experience. ers back to browsing as quickly
Andy graduated from Purdue
ongoing commitment to improve as possible after a crash.
University in 2005 with a
degree in Computer Science. In
his free time, he plays drums in
a Seattle band.
Figure 1: A tab in Internet Explorer 8 Beta 2 with the separate processes dimmed for illustration.
62 Reliability and Privacy with Internet Explorer 8 Beta 2 www.code-magazine.com

Loosely-Coupled Internet Explorer Virtual Tabs
One of the Internet Explorer team’s most significant We have also added the internal capability to “hot
investments is in a feature called Loosely-Coupled swap” the process from underneath a tab. Previously,
Internet Explorer (“LCIE”), which is an architectur- Protected Mode worked on a per-process basis. For
al attribute that helps isolate different parts of the example, say you add a website to your trusted sites
browser from each other, most notably, the frames in Internet Explorer 7. If that site links to another site
from the tabs. LCIE is the foundation on which we that is not in your trusted sites, it will cause you to
have built several of our features, including Auto- switch browser windows when you click the link.
matic Crash Recovery.
We improved this in Internet Explorer 8 Beta 1 with
In Internet Explorer 8 Beta 1, we isolated the LCIE when we split the frame from the tabs. With
frame window, which roughly corresponds to the the split, Internet Explorer can create a new tab in
“chrome,” from the tabs by putting them in their the same window and switch you to that tab as op-
own separate processes so that a tab can now crash posed to being “punted” to a new window.
without bringing down the rest of your browser.
Visually, this separation would look like Figure 1, Virtual tabs lets you navigate across Protected Mode
with the frame area highlighted and the tab area in the same tab since Internet Explorer just switch-
dimmed. es the process under the tab to the correct integrity
level. This is really just “UI-sugar”—virtual tabs do
Building on Internet Explorer 8 Beta 1, we have con- not impact security or protected mode in any way,
tinued to develop LCIE in Internet Explorer 8 Beta other than to make it more con-
2 to further improve reliability and performance. venient to transition between
For Beta 2, we added the following changes: Protected Mode on and off.
Combined, Loosely-Couple
Frame Process Merging LCIE’s ability to isolate differ-
ent parts of the browser, cou-
Internet Explorer (LCIE)
To help improve startup performance, we have re- pled with more tab processes and Automatic Crash Recovery
duced the number of processes that Internet Explor- and virtual tabs, helps improve
er starts. Instead of firing up two processes every Internet Explorer’s performance
provide an innovative and graceful
time you launch the browser (one for the frame and and overall reliability. way to recovery from crashes.
one for your tabs), we now only fire up one frame
process the first time you launch Internet Explorer. Automatic Crash Recovery
Subsequent launches will only start a new tab pro-
cess or make a new tab in an existing tab process. In the event of a crash, Automatic Crash Recovery
is designed to get you back to browsing as quickly as
For users that are accustomed to browsing websites possible. It uses LCIE’s tab isolation to help localize
in multiple “sessions”—for example if you want to the failure to your tab. If you experienced a crash in
log in to multiple e-mail sites simultaneously—you Internet Explorer 8 Beta 1, you may have noticed
can specify the “-nomerge” command line option to the bubble shown in Figure 2.
disable this feature.
This is the “tab recovery experience.” The failure
More Tab Processes has been confined to your tab. Your browser never
goes away and Internet Explorer gets you back to
It turns out that the vast majority of all Internet the site quickly.
Explorer sessions contain three or fewer tabs. Ac-
cordingly, in Internet Explorer 8 Beta 2 we try to What’s happening behind the scenes is that Internet
give users three efficient tab processes. This is con- Explorer is keeping track of an array of information
tingent on the user’s computer capabilities, but the about your tab. In Internet Explorer 8 Beta 1, the
more capable a computer is, the more processes following data about each tab was stored:
Internet Explorer will use, up to a point. Adding
more processes gives users much better isolation • Current URI
in the event of a failure. If each tab is in its own • The travel log (your back/forward history)
process, websites are completely isolated from • Tab order
each other. • Which tab was active
Figure 2: The “tab recovery experience” in Internet Explorer 8 Beta 2.
www.code-magazine.com Reliability and Privacy with Internet Explorer 8 Beta 2 63

When you crash, Internet Explorer tears down the lost; however, we do expect that the overwhelming
old tab process, creates a new tab process, and re- majority of crashes will be isolated to the tabs as
covers the stored data back into the tab. For many most crashes are caused by malfunctioning add-ons,
websites this works well; however, there are other which are now isolated to a tab process.
websites, such as sites with Web forms, or sites that
you need to log in to, that Internet Explorer 8 Beta In addition to keeping you logged in with session
1 didn’t recover successfully. cookies, Internet Explorer can now recover your
form data. If you typed information, such as an e-
In Internet Explorer 8 Beta 2, we mail, blog post, comments, into an HTML form,
improved this further by adding Internet Explorer can now recover that informa-
In Internet Explorer 8 Beta 2, session cookie and form data re- tion.
covery.
we improved crash recovery Leveraging LCIE’s tab isolation allows Automatic
further by adding session cookie Session cookies are often used Crash Recovery to quickly restore the user to their
for authenticating the user to a browsing session without having to log back in to
and form data recovery. website. Session cookies are tem- their sites or re-enter new data into forms. Com-
porary cookies that only persist bined, LCIE and Automatic Crash Recovery pro-
for the lifetime of your browsing vide an innovative and graceful way to recovery
session. When you log in to a website, they usually from crashes.
give you a session cookie that contains a unique to-
ken that identifies you while you are logged in. As
you navigate around the website, Internet Explorer Privacy
sends your session cookie to the site, and the site
can examine this token and determine that you are Have you ever wanted to take your Web browsing
authenticated. Unlike persistent cookies, they are “off the record”? Perhaps you’re using someone
not written and retained on your hard disk. else’s computer and you don’t want them to know
which sites you visited. Maybe you need to buy a
In Internet Explorer 8 Beta 2, we recover your ses- gift for a loved one without ruining the surprise. Ei-
sion cookies too, and still do not write them to disk! ther way, your browsing history is your data, and
Internet Explorer stores copies of your session cook- you should be able to easily control it.
ies in the frame process. When your tab crashes, In-
ternet Explorer just copies them back from the frame
into the tab, and the user is au- Delete Browsing History
tomatically logged back into the
site they were using (Web-based In Internet Explorer 7, we added a feature called
Have you ever wanted e-mail, blog sites, social network- Delete Browsing History, which lets you delete all
ing sites, etc.). of the information that Internet Explorer saves in
to take your Web browsing one click. This is a useful tool that has become a
“off the record”? Note that session cookie re- standard feature across all browsers. If there are
covery only takes place for tab things in your Web browsing past that you want to
crashes. If the whole browser erase, you can do that easily.
crashes, the session cookies are
The problem is that usually you don’t want to
delete everything! Cookies, in particular, are re-
ally useful for storing preferences on websites that
you use frequently. Many sites have a “remem-
ber me” option. Other sites, particularly financial
websites, will store a cookie on each computer
that you use to eliminate extra challenge ques-
tions (for instance, “What was your high school
mascot?”).
Internet Explorer 8 Beta 2 solves this problem by

adding an option that lets you keep cookies and
temporary Internet files from websites in your Fa-
vorites list, as shown in Figure 3.
To avoid having your favorite sites “forget you,” sim-

ply add them to your Favorites, and make sure the
“Preserve Favorites website data” checkbox is se-
lected. Internet Explorer will preserve any cookies
or cache files that were created by websites in your
favorites.
Figure 3: Internet Explorer 8 Beta 2 enables you to Oh, by the way, we heard your feedback about
preserve data from your favorite websites. checkboxes! Now Delete Browsing History will re-
member your preferences. We also added a “Delete
64 Reliability and Privacy with Internet Explorer 8 Beta 2 www.code-magazine.com

Figure 4: InPrivate Browsing in Internet Explorer 8 Beta 2.
Browsing History on Exit” feature if you really want o Existing cookies can still be read
to keep your history squeaky-clean! o The new DOM storage feature behaves the
same way
• New history entries will not be recorded
InPrivate™ Browsing • New temporary Internet files will be deleted
after the InPrivate Browsing window is closed
If you use a shared PC, or you’re borrowing a laptop • Form data is not stored
from a friend, or using a public PC, sometimes you • Passwords are not stored
don’t want other people to know where you’ve been • Addresses typed into the address bar are not
on the Web. Internet Explorer 8’s InPrivate Brows- stored
ing lets you browse the Web without storing history, • Queries entered into the search box are not
cookies, temporary Internet files, and other data. stored
• Visited links are not stored
Using InPrivate Browsing is as easy as launching
a new InPrivate Browsing window (see Figure 4). Whether you know ahead of time that you don’t
When you’re done, just close the window and Inter- want your history recorded, or you just want to
net Explorer will take care of the rest. clean up your history without wiping out your
preferences, Internet Explorer 8 Beta 2 puts you in
While you’re using InPrivate Browsing, the follow- control.
ing takes place:
• New cookies are not stored Andy Zeigler

o All new cookies become “session” cookies
www.code-magazine.com Reliability and Privacy with Internet Explorer 8 Beta 2 65

Secure Coding with

The Internet Explorer team has made significant investments to
ensure that Internet Explorer 8 Beta 2 is the most secure version
to date. Many of these improvements (like the SmartScreen anti-phishing/
anti-malware filter) operate automatically and require no changes to Web
Eric Lawrence pages or add-ons. However, other security improvements will impact Web
ericlaw@microsoft.com applications and browser add-ons. This article describes how to take
425-706-0371 advantage of these new Internet Explorer security features to help protect
Eric Lawrence is the Security Web users and applications.
Program Manager for the
Internet Explorer team. Prior s we designed Internet Explorer 8 Beta 2, Mi- The XSS Filter
to his current role, Eric worked
on the Internet Explorer 7
networking team and the
Microsoft Office Online Web
A crosoft security teams researched the common
attacks in the wild and the trends that suggest
where attackers will be focusing their attention next.
Internet Explorer 8 Beta 2 helps to mitigate the
threat of XSS attacks by blocking the most com-
For each class of attack, we devel- mon form of XSS attack (called
site. Outside of Microsoft, Eric oped a set of layered mitigations a reflection attack). In a reflec-
is best known as the developer
Fast Facts
to provide defense-in-depth pro- tion attack, data from a HTTP
of the Fiddler Web debugging tection against exploits. Broadly Internet Explorer 8 Beta 2 request (e.g. a query string pa-
platform, used by security and speaking, there are two classes includes new security rameter or POST body) is “re-
Web professionals worldwide. of threat that developers need to features that Web flected” back in the HTTP re-
You can learn more about be concerned about: threats to application and browser sponse without proper output-
Fiddler at www.fiddler2.com Web applications, and threats to add-on developers can take encoding. That reflected script
users’ computers. advantage of to help runs in the context of the re-
protect users in the evolving turned page, leading to a script
threat environment. injection exploit.
Web Application Threats
The new XSS Filter operates
As more and more applications and user data mi- as an Internet Explorer 8 Beta 2 component with
grate to the Web, attackers are ever more inter- visibility into all requests and responses flowing
ested in attacking Web applications. While attacks through the browser. When the filter’s heuristics
against server-side code (for instance, buffer over- discover script being sent in a cross-site request, it
flows, SQL injection, etc) remain popular, cross-site identifies and neuters the script if it is subsequently
scripting (XSS) attacks have become the most com- replayed in the server’s HTML response.
mon class of software vulnerability. XSS attacks
exploit vulnerabilities in Web applications in order Figure 1 shows a case where the XSS Filter has
to steal cookies or other data, deface pages, steal identified a cross-site scripting attack in the URL. It
credentials, or launch more exotic attacks. has neutered this attack as the identified script was
Figure 1: An Information Bar alerts users when the XSS Filter modifies a page.
66 Secure Coding with Internet Explorer 8 Beta 2 www.code-magazine.com

replayed back into the response page. In this way,
the filter effectively blocks the attack without modi- // PostMessage will only deliver the 'Hello'
fying the initial request to the server or completely // message to frame 'o' if it is currently
blocking the entire response. // at recipient.example.com
o.contentWindow.postMessage('Hello',
In the unlikely event that you wish to disable the fil-
'http://recipient.example.com');
ter for your pages, you can do so by setting a HTTP
response header:
Internet Explorer 8 Beta 2 also introduces the
X-XSS-Protection: 0 XDomainRequest object to permit secure cross-
domain retrieval of “public” data using HTTP.
The XSS Filter helps block the most common For more information, see “Better AJAX Devel-
XSS attacks, but it cannot possibly mitigate all opment with Internet Explorer 8 Beta 2,” in this
XSS vulnerabilities. It’s important that Web de- issue.
velopers provide additional defense-in-depth and
work to eliminate XSS vulnerabilities in their sites. While HTML 5 Cross-Doc-
Preventing XSS on the server-side is much easier ument Messaging and XDo- XSS attacks
that catching it at the browser; simply never trust mainRequest both help to have become the most
user input! Most Web platform technologies offer build secure mashups, a criti-
one or more sanitization technologies—developers cal threat remains. When us- common class of
using ASP.NET should consider using the Micro- ing either technique, the string software vulnerability.
soft Anti-Cross Site Scripting Library. To further data retrieved from the third-
mitigate the threat of XSS cookie theft, sensi- party frame or server could
tive cookies (especially those used for authenti- contain malicious script. If
cation) should be protected with the HttpOnly the calling page blindly injects the string into its
attribute. own DOM, a script injection attack will occur.
To help eliminate this threat, two new technolo-
gies can be used in concert with these cross-do-
Safer Mashups main communication mechanisms to mitigate
script-injection attacks.
While the XSS Filter helps mitigate reflected script-
ing attacks when navigating between two servers,
in the Web 2.0 world, Web applications are increas- Safer Mashups: HTML Sanitization
ingly built using client-side mashup techniques.
Internet Explorer 8 Beta 2 exposes a new method
Unfortunately, many mashups are built unsafely, on the window object named toStaticHTML. When
relying SCRIPT SRC techniques that simply merge a string of HTML is passed to this function, any po-
scripting from a third-party directly into the mash- tentially executable script constructs are removed
up page, providing the third-party full access to the before the string is returned. Internally, this func-
DOM and non-HttpOnly cookies. tion is based on the same technologies as the serv-
er-side Microsoft Anti-Cross Site Scripting Library
<html> mentioned previously. So, for example, you can use
<head><title>MyMashup</title> toStaticHTML to help ensure that HTML received
<script language="javascript" from an HTML 5 postMessage call cannot execute
src="http://untrusted.example.com"></script> script, but can take advantage of basic formatting:
</head>
<body>This page includes a script file from document.attachEvent('onmessage',function(e) {
another domain. That script obtains full if (e.domain == 'weather.example.com') {
access to this document and its cookies. spnWeather.innerHTML =
</body> window.toStaticHTML(e.data);
</html> }
});
To help developers build more secure mashups, In-
ternet Explorer 8 Beta 2 includes support for the Calling:
HTML 5 cross-document messaging feature. The
new postMessage call enables IFRAMEs to com- window.toStaticHTML("This is some <b>HTML</b>
municate more securely while maintaining DOM with embedded script following...
isolation. The frames communicating via postMes- <script>alert('bang!');</script>!");
sage do not get direct DOM access, but can only
send string messages to each other. Each message will return:
clearly identifies its origin, and the varTargetUri
parameter helps ensure that messages are not mis- This is some <b>HTML</b> with embedded script
directed. following... !
var o = The sanitized string can be safely injected into the

document.getElementsByTagName('iframe')[0]; DOM without the possibility of script execution.
www.code-magazine.com Secure Coding with Internet Explorer 8 Beta 2 67

Safer Mashups: JSON Sanitization instance, image, text, application, etc).
JavaScript Object Notation (JSON) is a lightweight For legacy compatibility reasons, Internet Ex-
string-serialization of a JavaScript object that is of- plorer has a MIME-sniffing feature that will at-
ten used to pass data between components of a tempt to determine the content-type for each
mashup. Unfortunately, many mashups use JSON downloaded resource. In some cases, Internet
insecurely, relying on the JavaScript eval method Explorer reports a MIME type different than the
to “revive” JSON strings back into JavaScript ob- type specified by the Web server. For instance,
jects, potentially executing script functions in the if Internet Explorer finds HTML content in a
process. Security-conscious developers instead file delivered with the HTTP response header
use a JSON-parser to ensure that the JSON object Content-Type: text/plain, Internet Explorer de-
does not contain executable script, but there’s a termines that the content should be rendered as
performance penalty for this. Internet Explorer 8 HTML. Due to the prevalence of legacy servers on
Beta 2 implements the ECMAScript 3.1 proposal the Web (for instance, those that serve all files as
for native JSON-handling functions (which uses text/plain) MIME-sniffing remains an important
Douglas Crockford’s json2.js API). compatibility feature.
The JSON.stringify method accepts a script object Unfortunately, MIME-sniffing also can lead to se-
and returns a JSON string, while the JSON.parse curity problems for servers hosting untrusted con-
method accepts a string and safely revives it into tent. Consider, for instance, the case of a picture-
a JavaScript object. The new native JSON meth- sharing Web service which hosts pictures uploaded
ods are based on the same code used by the script by anonymous users. An attacker could upload a
engine itself, and thus have significantly improved specially crafted JPEG file that contained script
performance over non-native implementations. content, and then send a link to the file to unsus-
pecting victims. When the victims visited the serv-
If the resulting object contains strings bound for er to view the “picture”, the malicious file would
injection into the DOM, the previously described be downloaded, the script would be detected, and
toStaticHTML function can be used to prevent it would run in the context of the picture-sharing
script injection. site. This script could then steal the victim’s cook-
ies, generate a phony page, etc.
Listing 1 uses both JSON and HTML sanitization
to prevent script injection, even if the weather ser- To combat this threat, we’ve made a number of
vice returns a malicious response containing script: changes to the Internet Explorer 8 Beta 2 MIME-
type determination code.
HTTP/1.1 200 OK
Content-Type: application/json
Access-Control-Allow-Origin: allow * MIME-Handling: Restricting Images
{"Weather":{"City":"Seattle","Zip":98052, First, Internet Explorer 8 Beta 2 prevents “up-

"Forecast":{"Today":"Sunny","Tonight": sniff” of files served with image/* content types
"<script defer>alert('bang!')</script>Dark" into HTML+script. Even if a file contains script,
,"Tomorrow":"Sunny"}}} if the server declares that it is an image, IE will
not run the embedded script. This change miti-
gates the picture-sharing attack vector—with no
MIME-Handling Changes code changes on the part of the server. We were
able to make this change by default with minimal
Each type of file delivered from a Web server has compatibility impact only because servers rarely
an associated MIME type (also called a “content- knowingly send HTML or script with an image/*
type”) that describes the nature of the content (for content type.
Listing 1: Use JSON and HTML Sanitization to prevent script-injection

<html> );
<head> };
<title>XDR+JSON Test Page</title>
<script> xdr.open("POST", "http://evil.example.com/getweather.aspx");
if (window.XDomainRequest){ xdr.send("98052");
var xdr = new XDomainRequest(); }
</script>
xdr.onload = function(){ </head>
var objWeather = JSON.parse(xdr.responseText); <body>
var oSpan = window.document.getElementById("spnWeather"); <span id="spnWeather"></span>
oSpan.innerHTML = window.toStaticHTML( </body>
"Tonight it will be <b>" + objWeather.Weather.Forecast.Tonight + </html>
"</b> in <u>" + objWeather.Weather.City + "</u>."

Figure 2: MIME-sniffing results in this page being rendered as HTML.
MIME-Handling: Sniffing Opt-Out HTTP/1.1 200 OK

X-Download-Options: noopen
Next, we’ve provided Web applications with the Content-Disposition: attachment;
ability to opt-out of MIME-sniffing. Sending the filename=untrustedfile.html
new X-Content-Type-Options response header Content-Length: 238
with a value of nosniff prevents Internet Explorer Content-Type: text/html
from MIME-sniffing a response away from the de-
clared content-type. For example, consider the fol- <html>...
lowing HTTP-response:
Taken together, the new cross-domain communica-
HTTP/1.1 200 OK tion APIs, content-sanitization APIs, and MIME-
Content-Length:108 sniffing improvements enable the construction of
Content-Type:text/plain significantly more secure Web applications.
X-Content-Type-Options: nosniff
<html><body bgcolor="#AA0000"> This page renders Threats to Users’ Computers

as HTML source code (text) in Internet
Explorer 8 Beta 2. </body></html> While Web application attacks are becoming more
common, attackers are always interested in com-
promising ordinary users’ local computers. In or-
In Internet Explorer 7, the text is interpreted as der to allow the browser to effectively enforce se-
HTML, as shown in Figure 2. In Internet Explor- curity policy to protect Web applications, personal
er 8 Beta 2, thanks to the nosniff option, the page information, and local resources, attacks against
is rendered as plaintext, as shown in Figure 3. the browser must be prevented.
The nosniff option puts servers in control of Internet Explorer 7 made major investments in this
MIME-sniffing, enabling servers that host untrust- space, including Protected Mode, ActiveX Opt-in,
ed content to reliably control IE’s interpretation and Zone Lockdowns. In response to the harden-
of that content, helping to prevent script-injection
attacks.
MIME-Handling: Force Save
Lastly, for Web applications that need to serve un-

trusted HTML files, we have introduced a mecha-
nism to help prevent the untrusted content from
compromising your site’s security. When the new
X-Download-Options header is present with the
value noopen, Internet Explorer prevents the user
from opening a file download directly; instead, they
must first save the file locally. When the locally
saved file is later opened, it no longer executes in
the security context of your site, helping to prevent
script injection. Figure 3: When the server opts-out of MIME-sniffing, the page is rendered as plain text.

ing of the browser itself, attackers are increasingly and would crash when Internet Explorer loaded
focusing on compromising vulnerable browser them with DEP/NX enabled. The most com-
add-ons. For Internet Explorer 8 Beta 2, we’ve mon problem was that these add-ons were built
made a number of investments to improve add-on using an older version of the ATL library. Before
security, reduce attack surface, and improve devel- version 7.1 SP1, ATL relied upon dynamically
oper and user experience. generated code in a way not compatible with
DEP/NX.
While developers of many popular add-ons have

DEP/NX helps since released updated extensions compatible with
to foil attacks by DEP/NX, some add-ons may not be updated be-
fore Internet Explorer 8 Beta 2 becomes available.
preventing code Fortunately, new DEP/NX APIs have been added
from running in memory to Windows Server 2008 and recent Windows Ser-
vice Packs to enable use of DEP/NX while retain-
that is marked ing compatibility with older ATL versions. These
non-executable. new APIs allow Internet Explorer to opt-in to
DEP/NX without causing add-ons built with older
versions of ATL to crash.
Data Execution Prevention (DEP/NX) Local Administrators can control DEP/NX by

running Internet Explorer as an Administrator
Internet Explorer 7 on Windows Vista introduced and unchecking the Tools > Internet Options >
an off-by-default Internet Control Panel option to Advanced > “Enable memory protection to help
“Enable memory protection to help mitigate online mitigate online attacks” option.
attacks.” This option is also referred to as Data Ex-
ecution Prevention (DEP) or No-Execute (NX). You can see which processes are protected by
DEP/NX on Windows Vista Task Manager’s Pro-
We have enabled this option by default for Internet cess tab; on earlier versions of Windows, you can
Explorer 8 Beta 2 on Windows Server 2008, Win- use Process Explorer. In either case, ensure that
dows Vista SP1, and Windows XP SP3. the “Data Execution Prevention box” is checked in
the View > Select Columns menu.
DEP/NX helps to foil attacks by preventing code
from running in memory that is marked non-exe- If you build Internet Explorer add-ons, you can
cutable. DEP/NX, combined with other technolo- help ensure users enjoy a smooth upgrade to In-
gies like Address Space Layout Randomization ternet Explorer 8 Beta 2 by taking the following
(ASLR), make it harder for attackers to exploit steps:
certain types of memory-related vulnerabilities
like buffer overruns. Best of all, the protection ap- 1. If your code depends on older versions of
plies to both Internet Explorer and the add-ons it ATL, please rebuild it with ATL v7.1 SP1 or
loads. No additional user interaction is required to later (Visual Studio 2005 includes ATL 8.0).
provide this protection, and no new prompts are 2. Set the /NXCompat linker option to indicate
introduced. that your extension is compatible with DEP/
NX.
For Internet Explorer 7, DEP/NX was disabled by 3. Test your code with DEP/NX enabled using
default for compatibility reasons. Several popu- Internet Explorer 8 Beta 2 on Windows Vista
lar add-ons were not compatible with DEP/NX SP1 or Windows XP SP3.
Figure 4: The Per-Site ActiveX information bar allows users to choose where an add-on may run.

Have You Xiine It?
All You Can Read.

Digitally.
Experience the next generation
in digital reading FREE.
Go to www.xiine.com to read
CoDe Magazine and other
great publications.
4. Opt your code into other available defenses like Application Protocol Prompting
stack defense (/GS), safe exception handling
(/SafeSEH), and ASLR (/DynamicBase). While ActiveX controls are a prime target for at-
tackers, some enterprising attackers have started
to look for exploitable attack surfaces in pro-
cesses that can be automatically launched by the
Per-Site ActiveX browser.
is a defense mechanism Application Protocol handlers enable third-par-

to help prevent malicious ty applications (such as streaming media play-
ers and Internet telephony applications) to di-
repurposing of controls rectly launch from within the browser or other
programs in Windows. Unfortunately, while
this functionality is quite powerful, it presents
a significant amount of attack surface, because
Per-Site ActiveX some applications registered as protocol han-
dlers may contain vulnerabilities that could
A key attack surface reduction we made for In- be triggered from untrusted content from the
ternet Explorer 8 Beta 2 is “Per-Site ActiveX,” a Internet.
defense mechanism to help prevent malicious re-
purposing of controls. Applications handling URL protocols must be
robust in the face of malicious data. Because
When a user navigates to a Web site containing an handler applications receive data from untrusted
ActiveX control, Internet Explorer 8 Beta 2 per- sources, the URL and other parameter values
forms a number of checks, including a determina- passed to the application may contain malicious
tion of where a control is permitted to run. data attempting to exploit the handling applica-
tion. For this reason, handling applications that
If a control is installed, but is not permitted to could initiate unwanted actions based on exter-
run on a specific website, an Information Bar ap- nal data must first confirm those actions with
pears (Figure 4) asking the user whether or not the the user.
control should be permitted to run on the current
website. To help ensure that the user remains in control
of their browsing experience, Internet Explorer 8
Beta 2 will now prompt before launching applica-
tion protocols, as shown in Figure 5.
will now prompt To provide defense-in-depth, Application Proto-
col developers should ensure that they follow the
before launching Best Practices described on MSDN to ensure that
application protocols. handling applications are robust even when pre-
sented with malicious URLs.
End-users may adjust their per-site ActiveX settings Protected Mode Overview
using the Manage Add-ons dialog box. IT Profes-
sionals administering a system of computers running Introduced in Internet Explorer 7 on Windows
Internet Explorer 8 Beta 2 may choose to preset al- Vista, Protected Mode helps reduce the severity
lowed controls and their associated domains. Such of threats to both Internet Explorer and exten-
settings can be configured using Group Policy. sions running in Internet Explorer by helping to
If your ActiveX control is designed for use only on

your website and you do not wish to allow user-
override, you should use the Microsoft SiteLock
ATL Template to prevent your control from being
used on other websites. Using the SiteLock tem-
plate helps ensure that your control cannot be ma-
liciously repurposed by other websites.
If an ActiveX control meets the requirements to

place itself on the PreApproved list and has done
so by listing the CLSID of the control within the
following registry key, then the Per-Site ActiveX
restriction is not applied to that control.
HKLM\SOFTWARE\Microsoft\Windows\CurrentVersion\ Figure 5: Internet Explorer now prompts before launching

Ext\PreApproved application protocol handlers.

Figure 6: Internet Explorer 7 introduced the Protected Mode architecture to help prevent silent installation of malicious code.
prevent silent installation of malicious code even Protected Mode Improvements:

in the face of software vulnerabilities (Figure 6). Cookie-Sharing
For Internet Explorer 8 Beta 2, we’ve made a
number of API improvements to Protected Mode
to make it easier for add-on developers to con- Protected Mode restricts file writes (including
trol and interact with Protected Mode browser cookies) to low integrity locations—this means
instances. that attempts to use the InternetGetCookie or
InternetSetCookie APIs from a medium integri-
ty application will fail to get or set cookies from
Protected Mode Improvements: Protected Mode Internet Explorer. In Inter-
NewProcess Event net Explorer 8 Beta 2, medium integrity appli-
cations can easily access low integrity cookies
by using the new IEGetProtectedModeCookie
Unfortunately, when an application needs to and IESetProtectedModeCookie APIs. As al-
programmatically start, interact with, and main-
tain a Protected-Mode Internet Explorer 7
process, it is unable to easily do so. When a pro-
gram induces a CoCreateInstance of Internet Ex-
plorer, the Internet Explorer COM server is started
with the program’s integrity level. If the client ap-
plication provides a URL to navigate, the Internet
Explorer server will redirect the navigation into a
Protected-Mode Internet Explorer process, and
subsequently no information will be fed back to the
controlling client application. The client’s interface
pointer becomes defunct and the client is no longer
able to communicate to the actual Internet Explorer
process performing the navigation (Figure 7).
The Internet Explorer 8 Beta 2 architecture solves

this problem with the newly added NewProcess
event on the DWebBrowserEvents2 interface.
void NewProcess(long lCauseFlag, IDispatch *pWB2,

VARIANT_BOOL *Cancel );
This event is fired before a redirection into a

Protected Mode instance occurs. This permits
the client application to track the new instance
using the pWB2 pointer, or can cancel the
navigation by setting the Cancel parameter to Figure 7: Redirection of navigations into Protected Mode make it difficult to monitor Internet
VARIANT_TRUE. Explorer instances.

File Upload Control
Historically, the HTML File Upload Control (<in-

put type=file>) has been the source of a number of
information disclosure vulnerabilities. To resolve
these issues, two changes were made to the behav-
ior of the control.
To block attacks that rely on “stealing” keystrokes

to surreptitiously trick the user into typing a lo-
cal file path into the control (which is later sur-
reptitiously submitted), the File Path edit box
is now read-only (Figure 9). The user must ex-
plicitly select a file for upload using the File
Browse dialog.
Additionally, the “Include local directory path

when uploading files” URLAction has been set
to “Disable” for the Internet Zone. This change
prevents leakage of potentially sensitive local file-
system information to the Internet. For instance,
rather than submitting the full path:
C:\users\ericlaw\documents\secret\image.png
Figure 8: Internet Explorer 8 Beta 2’s new Process model. Internet Explorer 8 Beta 2 will now submit only
the filename
image.png
Figure 9: The File Upload Control edit box is now read-only.
Conclusion
ways, applications that use interact with un-
trusted Internet data should be coded to assume Security is a core characteristic of trustworthy
that such data could be malicious. Before call- browsing, and Internet Explorer 8 Beta 2 includes
ing these APIs, be sure to check IEIsProtected- major improvements to address the evolving Web
ModeURL; calling these Protected Mode APIs security landscape. The Internet Explorer team is
against URLs that do not open in Protected Mode working to help protect users and provide new
will return an error. Calling these APIs from an ways to enhance Web application security.
elevated (high integrity) process will also return an
error. Thanks for your help in securing the Web!
Protected Mode Now Off Eric Lawrence

in the Intranet Zone
For improved performance and lower application

compatibility risk to organizations with ActiveX-
based line-of-business sites, the Intranet Zone will
run outside of Protected Mode in Internet Explor-
er 8 Beta 2.
In Internet Explorer 7, Protected Mode was enabled

in the Intranet Zone only for user-experience rea-
sons. When entering or leaving Protected Mode, In-
ternet Explorer 7 was forced to create a new process
and hence a new window—a serious user-experience
annoyance. The Internet Explorer 8 Beta 2 loosely-
coupled architecture (Figure 8) enables hosting of
both Protected Mode and non-Protected Mode tabs
within the same browser window, eliminating the
need to launch a new window. Of course, Internet
Explorer 8 Beta 2 users and domain administrators
have the option to re-enable Protected Mode for In-
tranet Zone if desired.

CoDeFocus IE8 Web

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

CoDeFocus IE8 Web

Hochgeladen von

Copyright:

Verfügbare Formate

Explorer 8 U

18 Introducing Compatibility View 56 Performance Improvements in

21 Create Your Own Web Slices

Ritika walks through how to create a codeless accelerator,

4 Table of Contents www.code-magazine.com

Welcome to CoDe Focus

S in 1995, I’ve helped ship a lot of Internet

Finally, we wanted to make the Web more efficient

With this issue of CoDe Focus, several of my col-

6 Welcome to CoDe Focus for Internet Explorer 8! www.code-magazine.com

US subscriptions are US $29.99 for one year.

CoDe Component Developer Magazine

In addition to the “Standards” and “Quirks”

8 What’s New in Internet Explorer 8 Beta 2? www.code-magazine.com

Internet Explorer 8 Beta 2 provides a program- More AJAX Enhancements

AJAX Navigations Great tools play a critical role in developer produc-

Instead of reverse engineering how your site works or

www.code-magazine.com What’s New in Internet Explorer 8 Beta 2? 9

10 What’s New in Internet Explorer 8 Beta 2? www.code-magazine.com

www.code-magazine.com What’s New in Internet Explorer 8 Beta 2? 11

The feature is controlled by UI settings and Group

• The Internet Explorer User Agent String de-

By default, Compatibility View is off for all sites

Internet Explorer 8: Feed the Need

It has been a pleasure talking about food… er, I

12 What’s New in Internet Explorer 8 Beta 2? www.code-magazine.com

Making Your Website

shows an example and Figure 1 shows expected

Listing 1: Using CSS 2.1 counters

A correct usage case takes into account current Conclusion

18 Introducing Compatibility View www.code-magazine.com

A new token indicates the underlying Trident en-

To recap, when Compatibility View is enabled:

Figure 1: Compatibility View button.

www.code-magazine.com Introducing Compatibility View 19

5. Long term, update your site to support Inter-

1. Navigate to your website using Internet Ex-

Figure 2: Compatibility View Settings.

20 Introducing Compatibility View www.code-magazine.com

ONLINE QUICK ID 0811052

There are four main behaviors for a Web Slice:

• Discovery: Users discover the Web Slice with-

There are two ways for users to discover a Web

www.code-magazine.com Create Your Own Web Slices 21

page every few minutes, a user can subscribe to an id attribute

• hslice class Note: If the id value changes, Internet Explorer

22 Create Your Own Web Slices www.code-magazine.com

Optional Elements endtime

• entry-content class For example, a Web Slice may be tracking a flight

Any link within the Web Slice that specifies a fee-

<div class="hslice" id="auction">

www.code-magazine.com Create Your Own Web Slices 23

Create Your First Web Slice

... The first step is to decide exactly what content will

The Web Slice will contain five items:

<div class="hslice" id="upcoming_show"

24 Create Your Own Web Slices www.code-magazine.com

<div class="hslice myclass" id="upcoming_show">

It is important to note that the page containing

Once a user adds the slice, it appears on the Favor-

Creating a Web Slice is very easy and is a great

Active Software Professionals Microsoft Volume 5 / Issue 3

www.aspalliance.com 12 www.microsoft.com/ie8/developer 13 Major Advances

www.code-magazine.com Create Your Own Web Slices 25