spacer

Webref WebRef   Sitemap · Experts · Tools · Services · Newsletters · About i.com

home / programming / optimize / speedup / chap9 To page 1To page 2current page
[previous]

Speed Up Your Site, Chapter 9: Optimizing JavaScript for Download Speed

Technical Lead
Thomson Reuters (Markets) LLC
US-NY-New York

Justtechjobs.com Post A Job | Post A Resume
Developer News
Microsoft Shows Off Silverlight 4, IE9 Plans
Metasploit Expands Vulnerability Test Framework
HyperCard Reborn?


Apply JavaScripts Wisely

JavaScripts can be included in an (X)HTML document in any of four ways:

  • In an external file

  • Between a pair of <script>...</script> tags

  • In an event handler

  • After the javascript: pseudo-protocol in an URL

Let's use our minimal Mondrian to demonstrate them all:

<!DOCTYPE html 
   PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Piet Mondrian's Home Page</title>
<script src="/scripts/foo.js" defer="defer" type="text/javascript"></script>

<script type="text/javascript">
   var foo = 1;
</script>
</head>
<body>
   <h1>Piet Mondrian: Abstract Impressionist</h1>
   <p>Mondrian was one of the great abstract masters...</p>

   <p><a onmouseover="window.status='Mondrian Home Page'; return true;"; href="http://www.mondrian.com">Mondrian.com</a></p> 
<p><a href="javascript:window.open('http://www.mondrian.com/')">Mondrian.com</a></p>

</body>
</html>

In honor of Mondrian and expediency, let's focus squarely on the first two options. Event handlers can be used to link behavior to elements (ideally with functions), but the javascript: pseudo-protocol should be avoided as the only reference of a link. The 11 percent of people without JavaScript won't be able to access this content.[3] This is not exactly user friendly.[4] A number of sites rely on JavaScript—even government sites that should be easily accessible like http://www.canadapost.ca/.

Here's the syntax of the script element:

<script>

Function:

Defines an executable script

Attributes:

CHARSET, DEFER, LANGUAGE (deprecated), SRC, TYPE

Examples:

<script type="text/javascript" src="/scripts/foo.js"></script>
<script type="text/javascript" src="/f.js" defer="defer"></script> /* optimized */

End tag:

</script>, not optional

Alternate:

<noscript>alternate content</noscript>

Used in:

<head>, <body>


3. TheCounter.com, "JavaScript Stats," in Global Statistics 2002 [online], (Darien, CT: Jupitermedia Corporation, October, 2002), available from the Internet at http://www.thecounter.com/stats/. Back

4. Pamela L. O'Connell, "Site Unseen?," New York Times, 14 February 2002, Circuits section, D3. Shirley Kaiser of WebStandards.org and I were quoted in this story about Olympics.com, a site that required JavaScript. Back

# # #

[Andy King is the founder and newsletter editor of WebReference.com. The companion Web site for this book can be found at: www.websiteoptimization.com.]


home / programming / optimize / speedup / chap9 To page 1To page 2current page
[previous]

From Speed Up Your Site: Web Site Optimization, Chapter 9.
Copyright 2003. Reproduced by permission of New Riders.

internet.commediabistro.comJusttechjobs.comGraphics.com

Search:

WebMediaBrands Corporate Info

Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs

webref The latest from WebReference.com Browse >
Rolling Out Your Own HTML Application Version Control · HTML 5: Client-side Storage · Working with Ajax Server Extensions
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Wi-Fi Product Watch, November 2009 · Chip Market Recovering From '08 Collapse · Low-Cost Tools to Kickstart Your New Business

Created: February 10, 2003
Revised: February 10, 2003

URL: http://webreference.com/programming/optimize/speedup/chap9/3.html