Shulou(Shulou.com)06/02 Report--

This article mainly explains "what are the performance optimization methods of JavaScript". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what are the performance optimization methods of JavaScript".

Whether the current JavaScript code is embedded or in an outer chain file, the download and rendering of the page must stop and wait for the script to complete. The longer it takes to execute the JavaScript, the longer the browser waits to respond to user input. The reason why browsers block when downloading and executing scripts is that scripts may change the namespace of the page or JavaScript, which affects the content of later pages. A typical example is the use of [xss_clean] () in a page.

Listing 1 example of embedded JavaScript code

Source Example

[xss_clean] ("Today is" + (new Date ()) .toDateString ()

When the browser encounters a tag, the current HTML page has no way to know whether JavaScript will report to

The tag adds content, or introduces other elements, or even removes the tag. Therefore, the browser stops processing the page, executes the JavaScript code, and then continues to parse and render the page. The same thing happens when loading JavaScript using the src property, where the browser must first take the time to download the code in the outer link file, and then parse and execute it. In the process, page rendering and user interaction are completely blocked.

Script location

The HTML 4 specification states that tags can be placed in or in an HTML document and can occur multiple times. Web developers are generally used to loading out-of-chain JavaScript, and then using tags to load outer-linked CSS files or other page information. For example, listing 2

Listing 2 example of inefficient script location

Source Example

Hello world!

However, this conventional approach hides serious performance problems. In the example in listing 2, when the browser parses to the tag (line 4), the browser stops parsing the following content and instead downloads the script file and executes the code in it, which means that neither the subsequent styles.css style file nor the tag can be loaded, and because the tag cannot be loaded, the page naturally cannot be rendered. So the page is blank until the JavaScript code is fully executed. Figure 1 depicts the process of downloading scripts and style files during page loading.

Figure 1 loading and execution of JavaScript files block downloads of other files

We can find an interesting phenomenon: the first JavaScript file starts to download, while blocking the download of other files on the page. In addition, there is a delay between the completion of the script1.js download and the start of the script2.js download, which happens to be the execution of the script1.js file. Each file must wait until the previous file is downloaded and executed before it starts downloading. In the process of downloading these files one by one, the user sees a blank page.

Parallel downloading of JavaScript files is allowed starting with IE 8, Firefox 3.5, Safari 4, and Chrome 2. This is good news because tags do not block other tags when downloading external resources. Unfortunately, the JavaScript download process still blocks downloads of other resources, such as style files and images. Although the download process of the script does not affect each other, the page must wait for all the JavaScript code to be downloaded and executed before continuing. Therefore, although the latest browsers have improved performance by allowing parallel downloads, the problem has not been completely solved, and script blocking is still a problem.

Because scripts block downloads of other resources on the page, it is recommended that you place all tags at the bottom of the tags as far as possible to minimize the impact on the entire page download. For example, listing 3

Example of the recommended code placement location in listing 3

Source Example

Hello world!

This code shows the recommended location to place tags in an HTML document. Although the script download blocks another script, most of the page has been downloaded and displayed to the user, so the page download will not appear too slow. This is the first rule for optimizing JavaScript: put the script at the bottom.

Organization script

Because each tag blocks page rendering when it is initially downloaded, reducing the number of tags the page contains can help improve this situation. This is not only for external chain scripts, but also for the number of embedded scripts. Every time a browser encounters a tag in the process of parsing a HTML page, it will cause a certain delay due to the execution of the script, so minimizing the delay time will significantly improve the overall performance of the page.

This problem is slightly different when dealing with outer chain JavaScript files. Given the additional performance overhead associated with HTTP requests, downloading a single 100Kb file will be faster than downloading a five-20Kb file. In other words, reducing the number of external link scripts in the page will improve performance.

Usually a large website or application depends on several JavaScript files. You can merge multiple files into one so that you only need to reference a single tag to reduce performance consumption. The work of file merging can be achieved through offline packaging tools or some real-time online services.

In particular, placing an embedded script after referencing an outer chain stylesheet will cause the page to block waiting for the stylesheet to be downloaded. This is done to ensure that embedded scripts get the most accurate style information when they are executed. Therefore, it is recommended that embedded scripts not be placed immediately after the tag.

Non-blocking script

Reducing JavaScript file size and limiting the number of HTTP requests is not always possible on feature-rich Web applications or large websites. The richer the features of the Web application, the more JavaScript code is required, although downloading a single larger JavaScript file produces only one HTTP request, it locks up the browser for a long time. To avoid this, you need to load the JavaScript file into the page step by step through some specific techniques, which does not block the browser to some extent.

The secret of non-blocking scripts is to load the JavaScript code after the page has been loaded. This means that the script is downloaded after the onload event of the window object is triggered. There are many ways to achieve this effect.

Delay loading script

HTML 4 defines an extended attribute for the tag: defer. The Defer attribute indicates that the script contained in this element does not modify the DOM, so the code can safely delay execution. The defer property is only supported by browsers later in IE 4 and Firefox 3.5, so it is not an ideal cross-browser solution. In other browsers, the defer attribute is ignored directly, so tags are handled by default, that is, blocking. However, this is still a useful solution if your target browser supports it. Listing 4 is an example

Listing 4 example of how to use the defer property

Tags with the defer attribute can be placed anywhere in the document. The corresponding JavaScript file will be downloaded when the page parses to the tag, but will not be executed until the DOM load is complete, that is, before the onload event is triggered. When a JavaScript file with the defer attribute is downloaded, it does not block other processes in the browser, so such files can be downloaded in parallel with other resource files.

Any element with the defer attribute will not be executed until the DOM finishes loading, whether embedded or out-of-chain scripts. The example in listing 5 shows how the defer attribute affects script behavior:

Listing 5 effect of the defer attribute on the behavior of the script

Script Defer Example alert ("defer"); alert ("script"); _ window.onload = function () {alert ("load");}

This code pops up the dialog box three times during page processing. The pop-up order of browsers that do not support the defer attribute is "defer", "script", and "load". On browsers that support the defer attribute, the order in which it pops up is "script", "defer", and "load". Note that the element with the defer attribute is not executed after the second, but is called before the onload event is triggered.

If your target browser includes only Internet Explorer and Firefox 3.5, then defer scripts are really useful. If you need to support multiple browsers across domains, there is a more consistent implementation.

HTML 5 defines a new extended attribute for tags: async. Like defer, it can load and execute scripts asynchronously without blocking the loading of the page by loading the script. It is important to note, however, that in the case of async, the JavaScript script will be executed as soon as it is downloaded, so it is likely not to be executed in the original order. If there are dependencies before and after JavaScript scripts, errors are likely to occur with async.

Dynamic script element

The document object Model (DOM) allows you to dynamically create almost all of the document content of HTML using JavaScript. Elements, like other elements on the page, can be easily created through standard DOM functions:

Listing 6 creates the element through the standard DOM function

Var script = document.createElement ("script"); script.type = "text/javascript"; script.src = "script1.js"; document.getElementsByTagName ("head") [0] .appendChild (script)

The new element loads the script1.js source file. This file starts downloading as soon as the element is added to the page. The point of this technique is that no matter where you start the download, the download and run of the file will not block other page processing. You can even put this code in sections without affecting the rest of the page code (except for the HTTP connection used to download the file).

When a file is downloaded using a dynamic script node, the returned code is usually executed immediately (except for Firefox and Opera, which will wait for all previous dynamic script nodes to finish executing). This mechanism works fine when the script is a "self-run" type, but it can cause problems if the script contains only interfaces that can be called by other scripts on the page. In this case, you need to track whether the script download is complete and whether it is ready. You can use dynamic nodes to emit events to get relevant information.

Firefox, Opera, Chorme, and Safari 3 + issue an onload event after the node has finished receiving it. You can monitor this event to be notified that the script is ready:

Listing 7 loads the JavaScript script by listening for onload events

Var script = document.createElement ("script") script.type = "text/javascript"; / / Firefox, Opera, Chrome, Safari 3 + script.onload = function () {alert ("Script loaded!");}; script.src = "script1.js"; document.getElementsByTagName ("head") [0] .appendChild (script)

Internet Explorer supports another implementation, which emits a readystatechange event. The element has a readyState attribute whose value changes as the external file is downloaded. There are five values for readyState:

"uninitialized": default state

"loading": download begins

"loaded": download completed

"interactive": download completed but not yet available

"complete": all the data is ready

Microsoft documentation says that these values for readyState do not necessarily appear during the life cycle of the element, but do not indicate which values will always be used. In practice, we are most interested in the "loaded" and "complete" states. The final state represented by Internet Explorer for these two readyState values is not consistent. Sometimes elements get "loader" but never "complete", but in other cases "complete" occurs without "loaded". The safest way is to check these two states in the readystatechange event, and when one of them occurs, delete the readystatechange event handle (ensure that the event is not processed twice):

Listing 8 loads the JavaScript script by checking the readyState status

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 = "script1.js"

Document.getElementsByTagName ("head") [0] .appendChild (script)

In most cases, you want to call a function to achieve dynamic loading of JavaScript files. The following functions encapsulate the functionality required by the standard implementation and the IE implementation:

Listing 9 is encapsulated with a function

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);}

This function takes two arguments: the URL of the JavaScript file, and a callback function that is triggered when the JavaScript reception is complete. Property checks are used to determine which events to monitor. The final step is to set the src property and add the element to the page. This loadScript () function is used as follows:

Listing 10 how to use the loadScript () function

LoadScript ("script1.js", function () {alert ("File is loaded!");})

You can dynamically load many JavaScript files on the page, but note that browsers do not guarantee the order in which the files are loaded. Of all the major browsers, only Firefox and Opera ensure that the scripts are executed in the order you specify. Other browsers download and run different code files in the order in which the server returns them. You can concatenate the download operations to ensure their order, as follows:

Listing 11 loads multiple JavaScript scripts through the loadScript () function

LoadScript ("script1.js", function () {loadScript ("script2.js", function () {loadScript ("script3.js", function () {alert ("All files are loaded!");}))

This code waits for script1.js to be available before it starts loading script2.js, and after script2.js is available before it starts loading script3.js. Although this method is feasible, it is still troublesome to download and execute a lot of files. If the order of multiple files is important, it is better to concatenate them into one file in the correct order. Stand-alone files can download all the code at once (since this is done asynchronously, there is nothing to lose from using a large file).

Dynamic script loading is the most common mode in non-blocking JavaScript downloads because it is cross-browser and easy to use.

Using XMLHttpRequest (XHR) objects

This technique first creates a XHR object, then downloads the JavaScript file, and then injects JavaScript code into the page with a dynamic element. Listing 12 is a simple example:

Listing 12 loads the JavaScript script through the XHR object

Var xhr = new XMLHttpRequest (); xhr.open ("get", "script1.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 to the server to get the script1.js file. The onreadystatechange event handler checks whether the readyState is 4, and then checks whether the HTTP status code is valid (2XX represents a valid response, and 304 represents a cached response). If a valid response is received, create a new element and set its text property to the responseText string received from the server. Doing so actually creates an element with inline code. Once the new element is added to the document, the code is executed and ready for use.

The main advantage of this approach is that you can download JavaScript code that is not executed immediately. Because the code is returned outside the tag (in other words, it is not constrained by the tag), it does not execute automatically after download, which allows you to postpone execution until everything is ready. Another advantage is that the same code does not throw exceptions in all modern browsers.

The main limitation of this method is that JavaScript files must be placed in the same domain as the page and cannot be downloaded from CDN (CDN refers to "content delivery Network (Content Delivery Network)", so large web pages usually do not use XHR script injection technology.

Thank you for your reading, the above is the content of "what are the performance optimization methods of JavaScript". After the study of this article, I believe you have a deeper understanding of what the performance optimization methods of JavaScript have, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.