- Introduction
- Creating the Session
- Downloading the Data
- Persistent Connections and Pipelining
- Summary
Downloading the Data
Once the TCP session has been established, the web browser can send its first HTTP request to download the HTML code for the specified web page. This request (yet again) incurs an RTT delay, as well as a serialization delay (see Figure 2).
Once the HTML code for the web page has been loaded, the browser analyses the web page and identifies additional components that have to be loaded to render the page:
- Cascading style sheets (CSS)
- Images
- JavaScript files
- Java applets
- XSL style sheets (if you perform the XML-to-HTML translation within the web browser)
Most of these elements can be loaded in the background and will modify the page layout once they're loaded. The JavaScript files are an exception, due to their ability to modify the HTML source directly with the document.write()function; they have to be loaded and processed serially before rendering of the web page can proceed. The situation is made worse if SCRIPT tags are included in the HTML header, because the scripts will be loaded before the first text will appear on the visitor's screen.
For example, as of May 20, 2008, Microsoft's home page had 19 external JavaScript files (as measured with the YSlow tool within the Firefox browser). If Microsoft didn't use geographically dispersed web servers, the propagation delay from Europe to the U.S. west coast alone would cause its home page to load almost four seconds slower for European users.
Because browsers usually don't prioritize JavaScript files over other page elements (images, style sheets, and so on), the increase in the download delay is usually significantly longer. Furthermore, Internet Explorer doesn't display the contents of a table until the whole table has been downloaded and rendered; pages using tables for layout (a technique that is strongly discouraged but still widely used) thus could remain completely blank until the last JavaScript file is loaded.
The slow download of web page components also impacts modern web pages that use progressive enhancement techniques or Ajax. These pages often start enhancing the web page through the window.onload event, which fires only after the last page component (CSS, applet, image) has been loaded.
Takeaway point: Large numbers of web page components and high propagation delay can cause dismal performance even on high-speed links.