A brief analysis of JavaScript asynchronous loading_javascript skills

Foreword

I believe you have encountered many problems with JavaScript script loading. Mainly in a few points——

1> File loading, file dependency and execution order issues caused by synchronous scripts and asynchronous scripts
2> Performance optimization issues caused by synchronous scripts and asynchronous scripts

A thorough understanding of all aspects related to script loading will not only help solve practical problems, but also help grasp and implement performance optimization.

First look at any script tag code——

Copy code The code is as follows:

If placed above the , it will block all page rendering work, leaving the user in a "white screen of death" state until the script is loaded and executed. The script at the end of will only allow users to see a lifeless static page. The place where client-side rendering should be performed is scattered with ineffective controls and empty boxes. Get a test case -

Copy code The code is as follows:

I am the content

Among them, the content in test.js——

Copy code The code is as follows:

alert('I am the script code in the head. After executing the js here, the content rendering of the body will start!');

We will see that alert is a pause point, and at this time, the page is blank. But please note that the entire page has been loaded at this time. If the body contains tags with certain src attributes (such as the img tag above), the browser has already started loading related content. In short, please note that the working timing of the js engine and the rendering engine are mutually exclusive (some books call it the UI thread).

Therefore, we need - those scripts responsible for making the page look better and easier to use should be loaded immediately, while those scripts that can be loaded later should be loaded later.

1. Delayed execution of script

It is becoming more and more popular to place scripts at the end of the tag of the page. In this way, on the one hand, users can see the page faster, and on the other hand, scripts can directly operate on the loaded DOM elements. For most scripts, this "move" is a huge improvement. The page model is as follows——

Copy code The code is as follows:

This does speed up the rendering time of the page significantly, but be aware that this may give the user a chance to interact with the page before the bodyScript is loaded. The reason is that the browser cannot load these scripts until the entire document has been loaded, which can be a bottleneck for large documents sent over slow connections.

Ideally, the loading of the script should occur simultaneously with the loading of the document and not affect the rendering of the DOM. This way, you can run the script once the document is ready because the scripts have already been loaded in the order of the <script> tags. </p> <p></p> <p>We can use defer to fulfill this requirement, that is - </p> <p><br> </p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="92200" class="copybut" id="copybut92200" onclick="doCopy('code92200')"><u>Copy code</u></a></span> The code is as follows:</div> <div class="codebody" id="code92200"> <br> <script src="deferredScript.js"></script>

Adding the defer attribute is equivalent to telling the browser: Please start loading this script now, but please wait until the document is ready and all previous scripts with the defer attribute have finished running before running it.

In this way, placing the delay script in the head tag will bring all the benefits of placing the script in the body tag, and it will also greatly increase the loading speed of large documents. The page mode at this time is——

Copy code The code is as follows:

But not all browsers support defer (for some modern browsers, if defer is declared, their internal scripts will not perform document.write and DOM rendering operations. IE4 all supports the defer attribute). This means that if you want to ensure that your delayed script can run after the document is loaded, you must encapsulate all the delayed script code in a structure such as jQuery's $(document).ready. It's worth it because almost 97% of your visitors get the benefits of parallel loading, while the other 3% still have access to fully functional JavaScript.

2. Complete parallelization of scripts

Make the loading and execution of scripts one step faster. I don’t want to wait for defer scripts to run one after another (defer reminds us of an orderly queuing scenario of quietly waiting for the document to load), nor do I want to wait until the document is ready before running these Scripts, I want to load as quickly as possible and run these scripts as quickly as possible. The async attribute of HTML5 comes to mind here, but be aware that it is a chaotic anarchy.

For example, we load two completely unrelated third-party scripts, the page runs just fine without them, and we don’t care which one runs first and which one runs last. Therefore, using the async attribute on these third-party scripts is equivalent to improving their running speed without spending a penny.

The async attribute is new to HTML5. The function is similar to defer, which allows DOM rendering while downloading the script. However, it will be executed as soon as possible after downloading (that is, the JS engine will be executed as soon as it is idle), and there is no guarantee that the script will be executed in order. They will complete before the onload event.

Firefox 3.6, Opera 10.5, IE 9 and the latest Chrome and Safari all support the async attribute. You can use async and defer at the same time, so that all IE after IE 4 support asynchronous loading, but be aware that async will overwrite defer.

Then the page model at this time is as follows——

Copy code The code is as follows:

Pay attention to the order of execution here - each script file is loaded, then headScript.js is executed, and then defferedScript.js is loaded in the background while the DOM is rendering. Then at the end of DOM rendering, defferedScript.js and the two asynchronous scripts will be run. It should be noted that for browsers that support the async attribute, these two scripts will run out of order.

3. Programmable script loading

Although the functions of the above two script attributes are very attractive, they are not widely used due to compatibility issues. Therefore, we use scripts more often to load other scripts. For example, we only want to load a script to those users who meet certain conditions, which is often referred to as "lazy loading".

At the browser API level, there are two reasonable ways to grab and run server scripts -

1> Generate ajax request and use eval function to process the response

2> Insert

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Show More

Hot Article

Roblox: Grow A Garden - Complete Mutation Guide

3 weeks ago By DDD

Roblox: Bubble Gum Simulator Infinity - How To Get And Use Royal Keys

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

How to fix KB5055612 fails to install in Windows 10?

3 weeks ago By DDD

Nordhold: Fusion System, Explained

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Blue Prince: How To Get To The Basement

4 weeks ago By DDD

Show More

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Show More

Hot Topics

Java Tutorial

1664

14

CakePHP Tutorial

1423

52

Laravel Tutorial

1318

25

PHP Tutorial

1268

29

C# Tutorial

1248

24

Show More