How to implement high-performance loading order in javascript

This article mainly introduces you to the relevant information about the loading order and execution principle of high-performance JavaScript. The article introduces it in great detail through sample code. It has certain reference learning value for everyone's study or work. It is needed Friends, let’s study together.

Preface

The performance of JavaScript in the browser can be considered the most serious usability problem faced by developers. Today, myself After reading the chapter on high-performance javascript loading and execution, let’s talk about how to solve the loading order and execution principle of js. I won’t say much below, let’s take a look at the detailed introduction:

When the browser encounters the tag, the browser must first download the external link file and then execute it. During this process, page rendering and user interaction are 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 until they are all downloaded and executed. Page rendering will continue. 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. js file, 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: put the script at the bottom of the body

##Organize the script

Since each tag will block the rendering of the page when downloaded, it is essential to reduce the number of tags contained in the page. Solution: You can merge multiple js files The advantage of packaging it into a js file is that it can minimize the delay time and significantly improve the overall performance of the page. In addition, it can also reduce 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

Simply put, the defer mechanism 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 script. The first is to dynamically create script tags, and 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, they Will wait for all previous dynamic script nodes to be executed)

In mainstream browsers, a load event will be triggered when the tag is received, but the IE browser does not, so we must encapsulate a load event that is compatible with all Methods that can be used by any browser

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 a script

is actually equivalent to creating a With a tag with inline script, once the newly created element is added to the page, the code is immediately executed and ready to go.

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

Disadvantages: The js file must be in the same domain as the requested page. The js file 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)]

I have introduced so much above, I would like to recommend some dynamic lazy loading libraries

There are libraries such as YUI3, LazyLoad and LABjs. Personally, I think the LABjs library is better. Yes, but I have never used it. You can learn about it. I won’t explain how to use it here.

Summary:

Several aspects of improving js performance

1. Before closing the tag, Move all tags to the bottom of the page. This ensures that the page has completed rendering before the script is executed

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

## The actual performance of js web applications

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.