Recently, I found a blog named “Does CSS load clog?”, I opened it with the attitude of learning, but I felt that what I said was not completely correct, so I searched for all kinds of information everywhere, and then summarized it by myself

Does loading CSS cause congestion

The answer, of course, is that CSS loading blocks not only HTML parsing, but also JS execution

Before we explain our conclusion, let’s do some configuration for the browser. First, since we need to load CSS files through THE CDN, we need to do a low speed configuration for the browser. First, right-click ->inspect-> Network ->no throtting and set it to slow 3G. With that configured, let’s start with the code to explain our conclusion above

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet">
    <script>
        document.addEventListener('DOMContentLoaded'.() = > {
            console.log('DOMContentLoaded');
        })
    </script>
    <script>
        console.log('script');
        Promise.resolve(1).then(res= > {
            console.log('then');
        });
    </script>
</head>
<body>
    <h1>hello</h1>
</body>
</html>
Copy the code

We import a CSS file through the CDN, and then we load the HTML file. Under the condition of low network speed, no statement and render hello will be printed, and only after the CSS is loaded, the printing sequence will be successively printed. We can also see from the printing order, CSS will cause congestion

Does loading js cause congestion

There is no doubt that loading js will cause jam. Loading and parsing OF JS will cause jam of JS. However, we know that there are defer and async attributes on the script tag.

Normal script execution

Normally, the loading sequence without async or defer attributes is as follows: First, we see the HTML parsing process. When js loading is encountered, the HTML parsing will be interrupted, and js will be executed immediately after loading, which will also block the HTML execution

Script tag with async

When script tags with async properties are executed, js will be loaded asynchronously. Js will be executed immediately after loading, which will cause blocking of HTML parsing

The script tag with defer

When the script tag with the defer attribute is executed, the JS is loaded asynchronously and not executed until the HTML has been parsed

So let’s verify that individually

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>DomContentLoaded</title>
</head>
<body>
    <script src="http://code.jquery.com/jquery-1.4.4.min.js">
    </script>
    <script src="./index.js"/> / / 0
    <script src="./index2.js"/> / / 2
    <script >
    console.log('inline');
        Promise.resolve().then(res= >{
            console.log('then');
        })
    </script>
    <div id="hello">hello world</div>
    
    <script>
        document.addEventListener('DOMContentLoaded'.() = > {
            console.log('DOMContentLoaded');
        })
    </script>
    
</body>
</html>
Copy the code
// index.js
Promise.resolve().then((res) = > {
	console.log('index1');
	return res;
});
Copy the code
// index2.js
Promise.resolve().then((res) = > {
	console.log('index2');
	return res;
});

Copy the code

From this we can see that js loading and execution can block HTML rendering and print before DOMContentLoaded

Let’s verify async

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>DomContentLoaded</title>
</head>
<body>
    <script async src="http://code.jquery.com/jquery-1.4.4.min.js">
    </script>
    <script src="./index.js"></script> 
    <script src="./index2.js"/></script>
    <script>
    console.log('inline');
        Promise.resolve().then(res= >{
            console.log('then');
        })
    </script>
    <div id="hello">hello world</div>
    
    <script>
        document.addEventListener('DOMContentLoaded'.() = > {
            console.log('DOMContentLoaded');
        })
    </script>
    
</body>
</html>
Copy the code

Let’s take a look at the print

Jquery is loaded asynchronously, so you can copy this code for yourself. Before jquery is finished loading, all the statements in the image will be printed out. If jquery is loaded too slowly, it will not block the HTML rendering. So DOMContentLoaded can be executed before or after Async

As with Async, there are two situations: if the loading is too slow, the HTML rendering will not be blocked, and if the loading is too fast, the HTML rendering will be blocked, so DOMContentLoaded may be executed before or after async