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

Pure CSS code to achieve flow and dynamic line effects

Ideas: An outer box sets the background; an inner...

A brief analysis of the use of the HTML webpack plugin

Using the html-webpack-plugin plug-in to start th...

Explanation of Mac connecting to remote servers through SSH in different terminals

Mac uses Shell (Terminal) SSH to connect to the r...

Display ellipsis effect when table cell content exceeds (implementation code)

illustrate In front-end development, you often en...

Corporate website and column dictionary Chinese and English comparison Friends who make Chinese and English bilingual corporate websites need

name character name character information news te...

Summary of Spring Boot Docker packaging tools

Table of contents Spring Boot Docker spring-boot-...

Common problems and solutions during MySQL MGR construction

Table of contents 01 Common Faults 1 02 Common Fa...

Element uses scripts to automatically build new components

Table of contents background How does element-ui&...

How to configure mysql on ubuntu server and implement remote connection

Server: Ubuntu Server 16.04 LSS Client: Ubuntu 16...

Solution to the problem that Docker container cannot access Jupyter

In this project, the Docker container is used to ...

Steps for encapsulating element-ui pop-up components

Encapsulate el-dialog as a component When we use ...

Canonical enables Linux desktop apps with Flutter (recommended)

Google's goal with Flutter has always been to...

MySQL Series 3 Basics

Table of contents Tutorial Series 1. Introduction...

How to use Linux commands in IDEA

Compared with Windows system, Linux system provid...

getdata table table data join mysql method

public function json_product_list($where, $order)...