Optimizing JavaScript for Download Speed

A lightweight interpreted language, JavaScript is ideally suited to data validation, interactive forms, and enhancing navigation. Presented with such a broad toolset to play with, many authors have gone overboard with JavaScript, bulking up their sites at an alarming rate. Fortunately, JavaScript offers rich opportunities for file size and execution speed optimization. By using techniques like packing, compression, and obfuscation, you can realize 50 to 90 percent savings off the size of your JavaScript files. This chapter shows you how to put your JavaScripts on a low-char diet. In Chapter 10, "Optimizing JavaScript for Execution Speed," you will learn how to speed up the execution speed of your code. Here's an excerpt from WebReference.com.

Code Listings

Summary

  • Trim the fat by removing excess whitespace and comments, and using semicolons to avoid any misunderstandings.
  • Minimize HTTP requests by combining files and merging or embedding scripts on high traffic pages.
  • Defer or delay loading where possible (but avoid sticky pages).
  • Load only what's necessary segment API code (NS4, IE5, DOM, and so on).
  • Compress larger external files located in the head.
  • Gracefully degrade avoid JavaScript-only techniques.
  • Abbreviate and map names automatically or manually to make your optimization reversible.
  • Crunch and obfuscate your code to shrink scripts and deter prying eyes.
  • Create self-extracting archives if entering the 5K competition.
  • Use ESC or Blue Clam to abbreviate variable and object names for maximum packing.

Further Reading

Books

JavaScript: The Definitive Guide, 4th ed.
by David Flanagan (O'Reilly, 2001)
The Practice of Programming
by Brian W. Kernighan and Rob Pike (Addison-Wesley, 1999).
Programming Pearls, 2nd ed.
by Jon Bentley (Addison-Wesley, 1999) - See Column 10: "Squeezing Space."

Crunching and Obfuscation

JavaScript Crunchinator
Removes whitespace and comments from JavaScript files and combines literal strings. From BrainJar's Mike Hall.
ESC (ECMAScript Cruncher)
This free Windows program is an ECMAScript pre-processor written in JScript. In addition to removing whitespace and comments from JavaScript, it can optionally rename variables in JavaScript. For IE5.5+ Win. From Saltstorm.
JSCruncher
Based on BrainJar's specifications, this free Windows application packs CSS and JavaScript files. Requires semicolons. From the DOMAPI project by Darin Kadrioski.
Script Squisher
This updated 5K entry squishes JavaScript by removing whitespace and comments. Does not require semicolons. By Darren Semotiuk.
SpaceAgent
This powerful Windows/Mac web site optimizer optimizes (X)HTML, XML, JavaScript, GIFs, and JPEGs. Server version also available. From Insider Software, Inc.
VSE HTML Turbo
Like SpaceAgent, this Mac application optimizes (X)HTML, JavaScript, GIFs, and JPEGs. From VSE Online.

JavaScript Obfuscation

Blue Clam
A Java-based JavaScript obfuscator from Solmar Solutions. Supports recursive directory tree parsing, a user-defined keyword dictionary, variable length obfuscated keyword support, extended file types (such as .js, .jsp, and .asp) and a graphical environment.
ECMAScript Formatter
Semantic Designs offers industrial strength source code obfuscation and optimization tools for JavaScript and other languages. The ECMAScript formatter can either format JavaScript applications into readable form, or it can conversely protect the source code against reverse engineering by removing structure, comments, and scrambling identifier names. For Windows.
JavaScript Scrambler
JMyth
Quek
A browser-based surf/animate/chat application written in JavaScript from Q42 (employs home-grown obfuscator). By Lon Boonen.

Self-Extracting Archives

The 5K
Some sub-5K page contestants employ self-extracting archives to save space at the expense of time.
Dithered JavaScript Compression
Chris Nott's self-extracting archive creation tool.
Extended ASCII JavaScript Packer
Substitutes single byte-token extended ASCII characters for longer strings for efficient packing of JavaScripts. By Chris Johnson.

General

ECMAScript Language Specification, Standard ECMA-262
The official JavaScript spec.
JavaScript.com
The definitive JavaScript resource. News, views, and how-tos.
JavaScript Resources
DMOZ/Google Open Directory.
WebReference.com
Web developer site founded by the author with DHTML Lab and Doc JavaScript.