JavaScript file loading and blocking issues: performance optimization case study

Let me start with a question: When writing an HTML page, when you want to import a JS file from the outside, where will the script tag be placed? Does the different placement have an impact on page loading?
By default , browsers load JavaScript scripts synchronously : that is, the rendering engine stops when it encounters a script tag, waits until the script is executed , and then continues rendering. If it is an external script, you must also include the time when the script is downloaded .
If the script is very large , it will take a long time to download and execute, thus blocking the browser. Users will feel that the browser is "stuck", with a brief blank and no response. This will cause a very bad user experience. There are two solutions to this problem:

①. Change the placement of the script tag . It is best to put it at the end of the body tag, that is, before the </body> tag . This method will not affect the browser's DOM rendering and will execute it after the page processing is completed.

②. Convert synchronous to asynchronous . The browser allows scripts to be loaded asynchronously. This way, the script tag can continue to be placed in the head. The following are two syntaxes for asynchronous loading:

<script src="./1.js" async></script>
<script src="./1.js" defer></script>

async and defer

Asynchronous means that if the defer or async attribute is turned on in the script tag, the script will be loaded asynchronously. When the browser rendering engine encounters this line of command, it will start downloading the external script . While downloading, the rendering engine will directly execute the subsequent commands.

Both async and defer will prevent the rendering engine from stopping while external scripts are being downloaded.

The difference between the async attribute and defer is:

insert image description here

The blue line represents network reads (script downloads), the red line represents execution, both of which are for scripts; the green line represents HTML parsing.

defer attribute, the browser will download the corresponding script immediately. The page processing will not stop during the download process. The script will not be executed until the document parsing is completed .

async attribute, the browser will download the corresponding script immediately. The page processing will not stop during the download process. It will be executed immediately after the download is completed . The page processing will stop during the execution process.

If no attributes are set, then when a script is encountered, the page processing will continue after the script is downloaded and executed.

[ Note ] async is more powerful than defer. When the same tag uses both attributes at the same time, follow async! ! !

Multiple scripts

The difference between async and defer is not only reflected in the download and execution of external script files, but also in the difference when multiple scripts exist:
Here is a code example:

External script files
1.js file:

// ... a lot of js code console.log('1');

2.js file:

console.log('2');

Main html file

Use defer :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js blocking</title>
    <!-- defer will let dom execute first -->
    <script src="./1.js" defer></script>
    <script src="./2.js" defer></script>
</head>
<body>
    How does <h1>js blocking work? </h1>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            console.log('DOMContentLoaded');
        })
    </script>
</body>
</html>

Console execution results:

insert image description here

Using async :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js blocking</title>
    <!-- defer will let dom execute first -->
    <script src="./1.js" async></script>
    <script src="./2.js" async></script>
</head>
<body>
    How does <h1>js blocking work? </h1>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            console.log('DOMContentLoaded');
        })
    </script>
</body>
</html>

Console execution results:

insert image description here

From the running results of the console, we can see:
defer : The first deferred script will be executed before the second deferred script (of course, if some browsers do not fully comply with the HTML5 standard, they may not be executed in order) , and these two scripts will be executed before the DOMContentLoaded event.

async : Whichever download is completed first will be executed immediately ! ! ! These two scripts may not be executed before the DOMContentLoaded event is triggered, but they will definitely be executed before the window.onload event. In addition, it is worth noting that during the execution of the script that has been downloaded first, other scripts will not stop downloading but will continue downloading.

[ Note ] DOMContentLoaded will be triggered after DOM loading is completed, that is, after the document is fully loaded and parsed.
○ For more information about DOMContentLoaded, please refer to https://www.jb51.net/article/222345.htm

summary

The best practice to prevent blocking is to put the script tag at the bottom of the body;
defer and async are the same in terms of network reading (downloading), both are asynchronous (compared to HTML parsing)
The difference between the two lies in when the script is executed after it is downloaded . Obviously, defer is closest to our requirements for application script loading and execution, especially for the case where there are dependencies between script files (dependency means that this js file may reference the content of the previous js file), it executes the scripts in the order of loading! ! !
async is a master of out-of-order execution. For it, script loading and execution are closely connected, so no matter what order you declare, as long as it is loaded, it will be executed immediately <br /> If you think about it carefully, async is not very useful for application scripts, because it does not consider dependencies at all (even the lowest level of sequential execution), but it is very suitable for scripts that do not depend on any script or are not depended by any script . The most typical example is: Google Analytics
defer/async are only suitable for operating external scripts . In addition, it is best not to use async/defer when operating DOM scripts , because when using async, the js code may be executed before the page is loaded, which is likely to cause exceptions. If you must use it, you can put the js part that needs to operate the DOM in the DOMContentLoaded event callback for execution ☺!

refer to

[1] https://blog.csdn.net/mx18519142864/article/details/82021754
[2] https://blog.csdn.net/weixin_42561383/article/details/86564715
[3] https://segmentfault.com/q/1010000000640869

This is the end of this article about the performance optimization case of JavaScript file loading and blocking issues. For more relevant content about JavaScript file loading and blocking issues, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:

Detailed explanation of JavaScript non-blocking loading, defer and async
Perfect solution to the blocking problem when loading JS file pages
Load js without blocking to prevent the page display from being affected by js loading failure
Rewrite document.write to achieve non-blocking loading of js ads (supplement)
Non-blocking loading performance optimization solution in JavaScript

<<: Detailed explanation of how to use Docker to deploy Django+MySQL8 development environment

>>: Where is mysql data stored?

MySQL 8.0.22 winx64 installation and configuration method graphic tutorial

JavaScript file loading and blocking issues: performance optimization case study

async and defer

Multiple scripts

summary

refer to

MySQL 8.0.22 winx64 installation and configuration method graphic tutorial

How to change password in MySQL 5.7.18

Detailed steps to install a virtual machine and use CentOS 8 using VMware 15

Double loading issue when the page contains img src

Use of Linux ln command

How to configure Nginx to distinguish between PC or mobile phone access to different domain names

Flex layout realizes left text overflow and omits right text adaptation

Detailed tutorial on building nextcloud private cloud storage network disk

Detailed explanation of JavaScript animation function encapsulation

The most basic code for web pages

Recommend

A little-known JS problem: [] == ![] is true, but {} == !{} is false

Detailed explanation of common usage methods of weixin-js-sdk in vue

Docker View Process, Memory, and Cup Consumption

Detailed explanation of using JavaScript WeakMap

JS implements the dragging and placeholder functions of elements

Detailed steps to install and uninstall Apache (httpd) service on centos 7

How to install PostgreSQL11 on CentOS7

Solution to slow response of Tomcat server

IDEA configuration process of Docker

Linux installation steps for Jenkins and various problem solving (page access initialization password)

MySQL password modification example detailed explanation

jQuery implements shopping cart function

Implementation of MySQL Shell import_table data import

The whole process record of introducing Vant framework into WeChat applet

Analysis of the process of configuring a simple network environment based on Tcl language