Ajax Optimization Chapter 8

Ajax is a cross-platform set of technologies that allows developers to create web pages that behave more interactively, like applications. It uses a combination of Cascading Style Sheets (CSS), XHTML, JavaScript, and some textual data - usually XML or JavaScript Object Notation (JSON) - to exchange data asynchronously. This allows sectional page updates in response to user input, reducing server transfers (and resultant wait times) to a minimum. Properly coded, Ajax pages replace the old full-page paint, decide, click, and wait approach with streamlined partial page redraws, thereby boosting response times, interactivity, and usability.

Ultimately, the goal of Ajax is to increase conversion rates through a faster, more user-friendly web experience. Unfortunately, unoptimized Ajax can cause performance lags, the appearance of application fragility, and user confusion. It can even harm your search engine rankings. The purpose of this chapter is to help you avoid these possible pitfalls and reap the rewards of Ajax.

We recommend the following best practices for optimizing the performance, stability, and usability of Ajax applications.

• Appropriately applying Ajax to a problem
• Using a well-constructed and supported Ajax library
• Minimizing your JavaScript code footprint
• Reducing HTTP request requirements
• Choosing the correct data format for transmission
• Ensuring that network availability and performance concerns are addressed
• Employing a JavaScript cache
• Carefully polling for user input
• Providing a fallback mechanism for search engines and accessibility when JavaScript is turned off
• Saving state with the fragment identifier

What follows is an outline of this chapter:

• Ajax Optimization
• Common Problems with Ajax
• Ajax - New and Improved JavaScript Communications
• Figure 8-1. Asynchronous Ajax versus the traditional web communications model
• Figure 8-2. Google suggestions courtesy of Ajax requests
• Proper Application of Ajax
• Figure 8-3. Ajax is good for some things, but not everything
• Rolling Your Own Ajax Solution
• Code: Ajax wrapper function for XHR
• Synchronous Versus Asynchronous Communication
• Code: Ajax callback function
• An Illustrative Example
• Code: Ajax Hello World
• Figure 8-4. "Hello World," Ajax version
• Prelude to Ajax optimizations
• Relying on Ajax Libraries
• Code: Prototype Ajax library example
• Code: jQuery Ajax library example
• Code: YUI Ajax library example
• Evaluating an Ajax Library
• JavaScript Optimization
• Remove JavaScript Comments
• Code: Remove JavaScript comments
• Conditional comments
• Code: Conditional comments
• Reduce Whitespace Carefully
• Code: Remove whitespace carefully
• Use JavaScript Shorthand
• Code: JavaScript shorthand
• Use String Constant Macros
• Code: String constant macros
• Avoid Optional Constructs and Kill Dead Code Fast
• Code: Remove code
• Shorten User-Defined Variables and Function Names
• Remap Built-in Objects
• Code: Remap objects
• Inline Localized Functions
• Code: Inline functions
• Assume Default Values
• Code: Assume default values
• Every Byte Counts
• Code: Hello world optimized step 1
• Code: Hello world optimized step 2
• Code: Hello world optimized step 3
• Bundle Your Scripts
• Code: Bundle scripts
• Lazy-Load Your Code
• Code: Lazy-load your JavaScript
• Pace Yourself
• Monitor User Rendering Time
• Code: Monitor Page Rendering Time
• Practice Error Awareness
• Code: Error awareness
• Clean Up After Yourself
• Memory leaks and garbage collection in Internet Explorer
• Go Native
• Code: Go native
• Clock Your Runtime
• Figure 8-5. Firebug's JavaScript profiler in action
• Minimizing HTTP Requests
• Code: The two-connection limit
• Choosing Data Formats Wisely
• Code: XML data format
• Code: JSON dafa format
• Consider Ajah
• Code: Ajah pattern (final optimized code)
• Addressing the Caching Quandary of Ajax
• Method 1: Output No Caching Headers on the Server Side
• Code: No caching headers
• Method 2: Make Requests with Unique URIs
• Code: Unique URIs
• Method 3: Make Requests with an Old If-Modified-Since Header
• Code: If modified since
• Method 4: Create Your Own Cache
• Addressing Network Robustness
is h1
• Figure 8-6. It might spin, but is it informative?
• Timeouts, Retries, and Ordering
• Code: Timeout
• Retrying After a Timeout
• Code: Retry after timeout
• Out of Order Responses
• Addressing Server and Content Error
• Figure 8-7. OK--it's an error!
• Polling Carefully
• The Problem with Polling
• Understanding the Ajax Architecture Effect
• The Location Hash Technique
• Summary

Footnotes

Garrett, J. February 18, 2005. "Ajax: A New Approach to Web Applications."

Adaptive Path, http://www.adaptivepath.com/publications/essays/archives/000385.php (accessed April 15, 2008).

Ajax was a mythological Greek hero

who played an important role in Homer's Iliad. He is described as the strongest of all the Achaeans. Although not the origin of this technology's name, it is certainly a suitable lineage for the power the technology provides.

Yahoo!'s YUI Ajax library

was 143.4 KB unoptimized versus 38.46 KB after minimization, or about 73.2% smaller overall. For the individual files, yahoo.js was 28.5 KB originally versus 5.86 KB minified, event.js was 79 KB unoptimized versus 17 KB minified, and connection.js was 35.9 KB unoptimized versus 13.6 KB optimized. These numbers were for version 2.3.0 of YUI.

We have done extensive testing on this default (the two connection per hostname recommendation).

There are ways to modify it in the browser, but by default, two is the limit of simultaneous connections, at least for JavaScript files. See http://www.w3.org/Protocols/rfc2616/rfc2616-sec8.html for more details.

Neuberg, B. August 15, 2006. "Tutorial: How to Profile and Optimize Ajax Applications."

Coding in Paradise, http://codinginparadise.org/weblog/2006/08/tutorial-how-to-profile-and-optimize.html (accessed February 11, 2008).

Fielding, R. et al. June 1999. "Hypertext Transfer Protocol--HTTP/1.1."

RFC 2616, http://www.w3.org/Protocols/rfc2616/rfc2616-sec8.html (accessed February 11, 2008).

Note that innerHTML has been added to the HTML 5 draft.

See http://www.w3.org/html/wg/html5/diff/.

Zimmerman, H. 1980. "OSI Reference Model--The IS0 Model of Architecture for Open Systems Interconnection."

IEEE Transactions on Communications COM-28 (4): 425-432.

For more in-depth error correction and prevention, see the "Networking Considerations" chapter

written by T. Powell) in my book, Ajax: The Complete Reference (McGraw-Hill Osborne Media).

The term Comet is not an acronym.

The general introduction of the term is attributed to Alex Russell from Dojotoolkit.org sometime in early 2006 (see http://alex.dojotoolkit.org/?p=545).

« CSS Optimization | Ajax Optimization | Advanced Web Performance Optimization »