Detailed explanation of the loading order and execution principle of high-performance JavaScript

The performance of javascript in the browser can be considered the most serious usability problem faced by developers. This article mainly introduces relevant information about the loading order and execution principle of high-performance javascript. The article uses sample code The introduction is very detailed and has certain reference value for everyone's study or work. Friends who need it can follow the editor to learn together.

##When the browser encounters the tag, the browser must first download the external link file and then execute it. During this process, the page is rendered. Interaction with the user is completely blocked.

Where is the best place to put the script?

This situation undoubtedly has serious performance problems, because the script will block the rendering of the page, and the page rendering will not continue until they are all downloaded and executed. The picture below is the execution sequence of the code

The first js file is downloaded. The second js file will not be executed until the first js file is completely downloaded. , but now IE8, Firefox3.5, Safari4 and Chrome2 all allow parallel downloading of js files. Unfortunately, the js download process will still block the download of other resources, such as: Picture

So one of the ways to improve performance : Place the script at the bottom of the body

##Organize the script

Since each tag will block the page when downloading Rendering, so it is essential to reduce the number of tags contained in the page. Solution: You can merge and package multiple js files into one js file. The advantage of doing this is that it can minimize the delay time and it will be obvious. Improve the overall performance of the page, in addition to reducing HTTP requests.

Generally speaking, downloading a single 100KB file is faster than downloading four 25KB files.

If there are multiple external link js files, they can be merged into one js file

Non-blocking script

Although downloading a single large js file only generates one HTTP request, it will cause the browser to freeze for a long time. In order to avoid this situation, you need to gradually load js files into the page.

Delayed script

The defer attribute indicates that the script contained in this element can be delayed, but only IE4+ and Firefox3.5+ browsers support it

Simply speaking, the mechanism of defer is to download the js file before the DOM is loaded, and will not block other processes of the browser

The pop-up order for browsers that do not support the defer attribute is: defer,script,load

The pop-up order for browsers that support the defer attribute is: script, defer, load

So defer is called before the onload event is executed

Dynamic script

There are two ways to inject dynamic scripts. The first is to dynamically create scripts. tag, the second is to inject the page through XMLHttpRequest

Let’s talk about how to use the first one first:

The key point of this technology is: no matter When the download is started, the download and execution process of the file will not block other processes on the page, but when using dynamic script nodes to download js files, the returned code will be executed immediately (except for Firefox and Opera, which will wait for all previous dynamic script nodes to execute Completed)

Mainstream browsers will trigger a load event when the tag is received, but the IE browser does not, so we must encapsulate a method that is compatible with all browsers

#The disadvantage of this method is that you need to know the loading order of the files. When there are many js files and the dependencies are complex, it is difficult to manage the loading order of dependencies

Code written like this is difficult to maintain

The second way to dynamically create scripts

is actually equivalent to creating a tag with an inline script. Once the newly created element is added to the page, the code will be executed immediately and then ready.

Advantages: The js code is downloaded but not executed immediately. This way you can postpone the execution of the script until you are ready. This method is also compatible with all browsers

Disadvantages: js The file must be in the same domain as the requested page. JS files cannot be downloaded from CDN. Generally, large web applications will not use this method.

It is recommended to use non-blocking mode:

First add the code required for dynamics, and then pretend to initialize the remaining code of the page

[Image upload failed...(image-dd3f9-1515902024710)]

Introduced above After reading so much, I would like to recommend some dynamic lazy loading libraries to you

There are libraries such as YUI3, LazyLoad and LABjs. I personally think that the LABjs library is easier to use, but I have never used it. You can check it out. , the usage method will not be mentioned here.

Summary:

Several aspects of improving js performance

1. Before closing the tag,

2. Merge the script. The fewer tags in your page, the faster it will load and respond. This is true regardless of external link files or embedded scripts

3. There are many ways to download js without blocking

3.1 Use the defer attribute of the tag

3.2 Use dynamically created elements to download and execute code

3.3 Use XHR objects to download js code and inject it into the page

Through the above strategies, the actual performance of web applications that require a large amount of js can be greatly improved.

Related recommendations:

A brief analysis of CSS loading and loading sequence

The loading sequence and execution of html, css and js files

jquery’s $(document).ready() and onload loading sequence_javascript skills