Recently, I came across an article about the problem of loading CSS files, which slows down the processing of page materials. I read that article, trying to learn something new, but it seemed to me that what it said was not quite true. So I did my own research on this topic and experimented with loading CSS and JavaScript.
Can loading CSS resources block page parsing?
First of all, I will say that the question in the title of this section can, without any doubt, be answered positively. Loading CSS files can not only block HTML code parsing, but also prevent JavaScript code from executing.
To begin with, I suggest experimenting. To do this, we will need to configure the browser accordingly. We will download the CSS file from the CDN, so we will limit the speed of working with the network in the Google Chrome browser. To do this , on the developer tools tabPerformance, change the parameter value Networkto Slow 3G. We will explore the next page:
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metadata-fr-http-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><linkhref="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>We download the CSS file from the CDN, but since the Internet connection speed is artificially limited, it will take some time to load the styles. As a result, nothing gets to the JavaScript console before the CSS file is loaded, and the page content is not displayed on the screen. What we're seeing indicates that CSS loading is blocking other page content from being loaded and processed.
Output of data to the JS console
Can loading and executing JS code block page parsing?
Loading and processing JS files, of course, blocks page parsing. However, to fix this problem, you can use attributes and tags when connecting scripts to the pagedefer async <script>. Now we will study their impact on page loading.
Normal script loading and execution
If the tag<script> does not useasync or attributesdefer — the page content loading and processing process is performed as shown in the following diagram. Loading JS files and executing the code contained in them blocks HTML parsing.
Using the<script> tag without the async and defer attributes
Here and further, we will use the following color symbols.
HTML parsing — HTML parsing; HTML parsing paused-HTML parsing suspended; Script download — Script loading; Script execution — Script execution
Using the<script> tag with the async attribute
When the browser processes a tag<script> with an attributeasync, the JavaScript code is loaded asynchronously. The script code is executed immediately after loading. However, JS code execution blocks HTML parsing.
Using the<script> tag with the async attribute
Using the<script> tag with the defer attribute
If the tag<script> contains an attributedefer — the script code is loaded asynchronously. However, after the code is loaded, it is executed only when the parsing of the HTML code is completed.
Using the<script> tag with the defer attribute
Experiments
Let's experiment withasync the and attributesdefer. Let's start with the next page:
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metadata-fr-http-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>DomContentLoaded</title></head><body><scriptsrc="http://code.jquery.com/jquery-1.4.4.min.js"></script><scriptsrc="./index.js"/>// 0<scriptsrc="./index2.js"/>// 2<script>console.log('inline');Promise.resolve().then(res=>{console.log('then');})</script><divid="hello">hello world</div><script>document.addEventListener('DOMContentLoaded',()=>{console.log('DOMContentLoaded');})</script></body></html>This page, in addition to downloading the scriptjquery-1.4.4.min.js from the CDN, loads a couple of its own scripts -index.js andindex2.js. Below is their code.
Fileindex.js:
Promise.resolve().then((res)=>{console.log('index1');returnres;});Fileindex2.js:
Promise.resolve().then((res)=>{console.log('index2');returnres;});When this page loads, the JS console gets what is shown below.
Output of data to the JS console
As a result, we have proof that loading and processing JS files blocks HTML code rendering. Messages output by scripts appear in the console before the message indicating that the DOM content has finished loading.
Now let's take a look at how scripts<script> that use the attribute in their tags behave<async>:
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metadata-fr-http-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>DomContentLoaded</title></head><body><scriptasyncsrc="http://code.jquery.com/jquery-1.4.4.min.js"></script><scriptsrc="./index.js"></script><scriptsrc="./index2.js"/></script><script>console.log('inline');Promise.resolve().then(res=>{console.log('then');})</script><divid="hello">hello world</div><script>document.addEventListener('DOMContentLoaded',()=>{console.log('DOMContentLoaded');})</script></body></html>Let's look at what is shown in the console.
Output of data to the JS console
The jQuery library script is loaded asynchronously. What goes to the console is displayed there before it is loaded. If the library script loads too slowly, it won't interfere with parsing the HTML code. The messageDOMContentLoaded can be displayed either before or after the async script is loaded and executed. And when the attributedefer is applied, the script will be loaded asynchronously, wait for the document materials to be processed, and then , but before the eventDOMContentLoaded, it will be executed.
Have you ever encountered problems with blocking the processing of web page content?
Top comments(7)
I think that async allow code execute without stop parse of html.
Read here:
"If async is present: The script is executed asynchronously with the rest of the page (the script will be executed while the page continues the parsing)"
source:w3schools.com/tags/att_script_asyn...
Yes i also definitely agree with this.
async executes while HTML loading.
Checked withidevelop.pro/ consoles.
- LocationIndia
- EducationB.Tech (2020)
- WorkSoftware Developer
- Joined
This is not correct.
If async ia there, script "download" happens asynchronously not the execution.
In MDN docs:developer.mozilla.org/en-US/docs/W...
Look in source:
"If the async attribute is set, the script is downloaded in parallel to parsing the page, and executed as soon as it is available."
In simple words we mustdefer the script(s) instead ofasync if we want them to be executed properly on already LOADED HTML content
You can use async + DOMContentLoaded event.
TL;DR; DOMContentLoaded is event when all html is parsed and is safety manipulated.
So, script is async downloaded and execute waiting DOM is ready
Example:
<!-- index.html --><!DOCTYPE html><html><head><metacharset="UTF-8"><title>Example</title><scriptasyncsrc="./test.js"/></head><body><main><sectionid="example"></section></main>// ...</body></html>/* test.js */(()=>{functionrun(){constexample=document.getElementById("example");console.log({example})// ...}window.addEventListener('DOMContentLoaded',run);})();More info about event here:developer.mozilla.org/en-US/docs/W...
For further actions, you may consider blocking this person and/orreporting abuse
