一.Loading and Execution
?? JavaScript performance in the browser is arguably the most important usability issue facing developers. The problem is complex because of the blocking nature of JavaScript, which is to say that nothing else can happen while JavaScript code is being executed.
??? In fact, most browsers use a single process for both user interface (UI) updates and JavaScript execution, so only one can happen at any given moment in time. The longer JavaScript takes to execute, the longer it takes before the browser is free to respond to user input.
??? On a basic level, this means that the very presence of a <script> tag is enough to make the page wait for the script to be parsed and executed. Whether the actual JavaScript code is inline with the tag or included in an external file is irrelevant; the page download and rendering must stop and wait for the script to complete before proceeding. This is a necessary part of the page’s life cycle because the script may cause changes to the page while executing. The typical example is using document.write() in the middle of a page (as often used by advertisements).
??? When the browser encounters a <script> tag, as in this HTML page, there is no way?of knowing whether the JavaScript will insert content into the <p>, introduce additional?elements, or perhaps even close the tag. Therefore, the browser stops processing the?page as it comes in, executes the JavaScript code, then continues parsing and rendering?the page. The same takes place for JavaScript loaded using the src attribute; the browser?must first download the code from the external file, which takes time, and then parse?and execute the code. Page rendering and user interaction are completely blocked during?this time.
- ?Script Positioning
???? The HTML 4 specification indicates that a <script> tag may be placed inside of a?<head> or <body> tag in an HTML document and may appear any number of times?within each. Traditionally, <script> tags that are used to load external JavaScript files?have appeared in the <head>, along with <link> tags to load external CSS files and other?metainformation about the page. The theory was that it’s best to keep as many style?and behavior dependencies together, loading them first so that the page will come in?looking and behaving correctly. For example:<html> <head> <title>Script Example</title> <-- Example of inefficient script positioning --> <script type="text/javascript" src="file1.js"></script > <script type="text/javascript" src="file2.js"></script > <script type="text/javascript" src="file3.js"></script > <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <p>Hello world!</p> </body> </html>
?? Though this code seems innocuous, it actually has a severe performance issue: there are three JavaScript files being loaded in the <head>. Since each <script> tag blocks the page from continuing to render until it has fully downloaded and executed the JavaScript code, the perceived performance of this page will suffer. Keep in mind that browsers don’t start rendering anything on the page until the opening <body> tag is encountered. Putting scripts at the top of the page in this way typically leads to a noticeable delay, often in the form of a blank white page, before the user can even begin reading or otherwise interacting with the page.
??? Internet Explorer 8, Firefox 3.5, Safari 4, and Chrome 2 all allow parallel downloads?of JavaScript files. This is good news because the <script> tags don’t necessarily block?other <script> tags from downloading external resources. Unfortunately, JavaScript?downloads still block downloading of other resources, such as images. And even though?downloading a script doesn’t block other scripts from downloading, the page must still?wait for the JavaScript code to be downloaded and executed before continuing. So while?the latest browsers have improved performance by allowing parallel downloads, the?problem hasn’t been completely solved. Script blocking still remains a problem.
??? Because scripts block downloading of all resource types on the page, it’s recommended?to place all <script> tags as close to the bottom of the <body> tag as possible so as not?to affect the download of the entire page. For example:<html> <head> <title>Script Example</title> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <p>Hello world!</p> <-- Example of recommended script positioning --> <script type="text/javascript" src="file1.js"></script > <script type="text/javascript" src="file2.js"></script > <script type="text/javascript" src="file3.js"></script > </body> </html>
?? This code represents the recommended position for <script> tags in an HTML file.?Even though the script downloads will block one another, the rest of the page has?already been downloaded and displayed to the user so that the entire page isn’t perceived?as slow. This is the Yahoo! Exceptional Performance team’s first rule about?JavaScript: put scripts at the bottom.
- Grouping Scripts
?? Since each <script> tag blocks the page from rendering during initial download, it’s helpful to limit the total number of <script> tags contained in the page. This applies to both inline scripts as well as those in external files. Every time a <script> tag is encountered during the parsing of an HTML page, there is going to be a delay while the code is executed; minimizing these delays improves the overall performance of the page.
?? The problem is slightly different when dealing with external JavaScript files. Each HTTP request brings with it additional performance overhead, so downloading one single 100 KB file will be faster than downloading four 25 KB files. To that end, it’s helpful to limit the number of external script files that your page references.?
???Typically, a large website or web application will have several required JavaScript files. You can minimize the performance impact by concatenating these files together into a single file and then calling that single file with a single <script> tag.
- Nonblocking Scripts
?? JavaScript’s tendency to block browser processes, both HTTP requests and UI updates,is the most notable performance issue facing developers. Keeping JavaScript files small and limiting the number of HTTP requests are only the first steps in creating a responsive web application. The richer the functionality an application requires, the more JavaScript code is required, and so keeping source code small isn’t always an option.
?? Limiting yourself to downloading a single large JavaScript file will only result in locking the browser out for a long period of time, despite it being just one HTTP request. To get around this situation, you need to incrementally add more JavaScript to the page in a way that doesn’t block the browser.
?? The secret to nonblocking scripts is to load the JavaScript source code after the page has finished loading. In technical terms, this means downloading the code after the window’s load event has been fired. There are a few techniques for achieving this result.
Deferred Scripts
??? HTML 4 defines an additional attribute for the <script> tag called defer. The defer attribute indicates that the script contained within the element is not going to modify the DOM and therefore execution can be safely deferred until a later point in time. The defer attribute is supported only in Internet Explorer 4+ and Firefox 3.5+, making it less than ideal for a generic cross-browser solution. In other browsers, the defer attribute is simply ignored and so the <script> tag is treated in the default (blocking) manner. Still, this solution is useful if your target browsers support it. The following is an example usage:<script type="text/javascript" src="file1.js" defer></script >
??? A <script> tag with defer may be placed anywhere in the document. The JavaScript file will begin downloading at the point that the <script> tag is parsed, but the code will not be executed until the DOM has been completely loaded (before the onload?event handler is called). When a deferred JavaScript file is downloaded, it doesn’t block?the browser’s other processes, and so these files can be downloaded in parallel with?others on the page.
?? Any <script> element marked with defer will not execute until after the DOM has been?completely loaded; this holds true for inline scripts as well as for external script files.?The following simple page demonstrates how the defer attribute alters the behavior of?scripts:<html> <head> <title>Script Defer Example</title> </head> <body> <script defer> alert("defer"); </script > <script> alert("script"); </script > <script> window.onload = function(){ alert("load"); }; </script > </body> </html>? ?This code displays three alerts as the page is being processed. In browsers that don’t support defer, the order of the alerts is “defer”, “script”, and “load”. In browsers that?support defer, the order of the alerts is “script”, “defer”, and “load”. Note that the?deferred <script> element isn’t executed until after the second but is executed before?the onload event handler is called.
Dynamic Script Elements
??? The Document Object Model (DOM) allows you to dynamically create almost any part of an HTML document using JavaScript. At its root, the <script> element isn’t any?different than any other element on a page: references can be retrieved through the?DOM, and they can be moved, removed from the document, and even created. A new?<script> element can be created very easily using standard DOM methods:var script = document.createElement("script"); script.type = "text/javascript"; script.src = "file1.js"; document.getElementsByTagName("head")[0].appendChild(script);?? This new <script> element loads the source file file1.js. The file begins downloading as soon as the element is added to the page. The important thing about this technique is that the file is downloaded and executed without blocking other page processes, regardless of where the download is initiated. You can even place this code in the <head> of a document without affecting the rest of the page (aside from the one HTTP connection that is used to download the file).
??? When a file is downloaded using a dynamic script node, the retrieved code is typically?executed immediately (except in Firefox and Opera, which will wait until any previous?dynamic script nodes have executed). This works well when the script is self-executing?but can be problematic if the code contains only interfaces to be used by other scripts?on the page. In that case, you need to track when the code has been fully downloaded?and is ready for use. This is accomplished using events that are fired by the dynamic?<script> node.
? ??Firefox, Opera, Chrome, and Safari 3+ all fire a load event when the src of a?<script> element has been retrieved. You can therefore be notified when the script is?ready by listening for this event:var script = document.createElement("script") script.type = "text/javascript"; //Firefox, Opera, Chrome, Safari 3+ script.onload = function(){ alert("Script loaded!"); }; script.src = "file1.js"; document.getElementsByTagName("head")[0].appendChild(script);? ?Internet Explorer supports an alternate implementation that fires a readystatechange event. There is a readyState property on the <script> element that is changed at various times during the download of an external file. There are five possible values for ready State:
????"uninitialized" The default state "loading" Download has begun "loaded" Download has completed "interactive" Data is completely downloaded but isn’t fully available "complete" All data is ready to be used?
???? Microsoft’s documentation for readyState and each of the possible values seems to?indicate that not all states will be used during the lifetime of the <script> element, but?there is no indication as to which will always be used. In practice, the two states of most?interest are "loaded" and "complete". Internet Explorer is inconsistent with which of?these two readyState values indicates the final state, as sometimes the <script> element?will reach the "loaded" state but never reach "complete" whereas other times "complete" will be reached without "loaded" ever having been used. The safest way to use?the readystatechange event is to check for both of these states and remove the event?handler when either one occurs (to ensure the event isn’t handled twice):var script = document.createElement("script") script.type = "text/javascript"; //Internet Explorer script.onreadystatechange = function(){ if (script.readyState == "loaded" || script.readyState == "complete"){ script.onreadystatechange = null; alert("Script loaded."); } }; script.src = "file1.js"; document.getElementsByTagName("head")[0].appendChild(script);?? ?In most cases, you’ll want to use a single approach to dynamically load JavaScript files.?The following function encapsulates both the standard and IE-specific functionality:function loadScript(url, callback){ var script = document.createElement("script") script.type = "text/javascript"; if (script.readyState){ //IE script.onreadystatechange = function(){ if (script.readyState == "loaded" || script.readyState == "complete"){ script.onreadystatechange = null; callback(); } } } else { //Others script.onload = function(){ callback(); }; } script.src = url; document.getElementsByTagName("head")[0].appendChild(script); }?? You can dynamically load as many JavaScript files as necessary on a page, but make sure you consider the order in which files must be loaded. Of all the major browsers, only Firefox and Opera guarantee that the order of script execution will remain the same as you specify. Other browsers will download and execute the various code files in the order in which they are returned from the server. You can guarantee the order by chaining the downloads together, such as:loadScript("file1.js", function(){ loadScript("file2.js", function(){ loadScript("file3.js", function(){ alert("All files are loaded!"); }); }); });?? If the order of multiple files is important, the preferred approach is to concatenate the files into a single file where each part is in the correct order. That single file can then be downloaded to retrieve all of the code at once (since this is happening asynchronously, there’s no penalty for having a larger file).
??? Dynamic script loading is the most frequently used pattern for nonblocking JavaScript downloads due to its cross-browser compatibility and ease of use.
XMLHttpRequest Script Injection
?? ?Another approach to nonblocking scripts is to retrieve the JavaScript code using an XMLHttpRequest (XHR) object and then inject the script into the page. This technique involves creating an XHR object, downloading the JavaScript file, then injecting the javaScript code into the page using a dynamic <script> element. Here’s a simple example:var xhr = new XMLHttpRequest(); xhr.open("get", "file1.js", true); xhr.onreadystatechange = function(){ if (xhr.readyState == 4){ if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){ var script = document.createElement("script"); script.type = "text/javascript"; script.text = xhr.responseText; document.body.appendChild(script); } } }; xhr.send(null);?? This code sends a GET request for the file file1.js. The onreadystatechange event handler checks for a readyState of 4 and then verifies that the HTTP status code is valid (anything in the 200 range means a valid response, and 304 means a cached response). If a valid response has been received, then a new <script> element is created and its text property is assigned to the responseText received from the server. Doing so essentially creates a <script> element with inline code. Once the new <script> element is added to the document, the code is executed and is ready to use.
? The primary advantage of this approach is that you can download the JavaScript code without executing it immediately. Since the code is being returned outside of a <script> tag, it won’t automatically be executed upon download, allowing you to defer its execution until you’re ready. Another advantage is that the same code works in all modern browsers without exception cases.
? The primary limitation of this approach is that the JavaScript file must be located on the same domain as the page requesting it, which makes downloading from CDNs impossible. For this reason, XHR script injection typically isn’t used on large-scale web applications.
Recommended Nonblocking Pattern
??The recommend approach to loading a significant amount of JavaScript onto a page is a two-step process: first, include the code necessary to dynamically load JavaScript,and then load the rest of the JavaScript code needed for page initialization. Since the first part of the code is as small as possible, potentially containing just the load Script() function, it downloads and executes quickly, and so shouldn’t cause much interference with the page. Once the initial code is in place, use it to load the remaining JavaScript. For example:<script type="text/javascript" src="loader.js"></script > <script type="text/javascript"> loadScript("the-rest.js", function(){ Application.init(); }); </script >?? Place this loading code just before the closing </body> tag. Doing so has several benefits. First, as discussed earlier, this ensures that JavaScript execution won’t prevent the rest of the page from being displayed. Second, when the second JavaScript file has finished downloading, all of the DOM necessary for the application has been created and is ready to be interacted with, avoiding the need to check for another event (such as window.onload) to know when the page is ready for initialization.