JavaScript file loading and blocking issues: performance optimization case study

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

  1. The best practice to prevent blocking is to put the script tag at the bottom of the body;
  2. 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! ! !
  3. 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
  4. 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?

Recommend

Implementing search box function with search icon based on html css

Preface Let me share with you how to make a searc...

JavaScript implements the nine-grid mobile puzzle game

This article shares the specific code for JavaScr...

Usage and execution process of http module in node

What is the role of http in node The responsibili...

Common ways to optimize Docker image size

The Docker images we usually build are usually la...

Summary of Docker Data Storage

Before reading this article, I hope you have a ba...

What is Nginx load balancing and how to configure it

What is Load Balancing Load balancing is mainly a...

Summary of 4 ways to add users to groups in Linux

Preface Linux groups are organizational units use...

How to install jupyter in docker on centos and open ports

Table of contents Install jupyter Docker port map...

How to connect to MySQL remotely through Navicat

Using Navicat directly to connect via IP will rep...

HTML5+CSS3 coding standards

The Golden Rule No matter how many people are wor...

MySQL FAQ series: How to avoid a sudden increase in the size of the ibdata1 file

0. Introduction What is the ibdata1 file? ibdata1...

6 ways to view the port numbers occupied by Linux processes

For Linux system administrators, it is crucial to...

Detailed explanation of three relationship examples of MySQL foreign keys

This article uses examples to describe the three ...

Detailed explanation of vite2.0+vue3 mobile project

1. Technical points involved vite version vue3 ts...

CSS3 property line-clamp controls the use of text lines

Description: Limit the number of lines of text di...