While researching async scripting in web applications, I stumbled upon an interesting article. Essentially, it suggests that JavaScript scripts are not executed until all stylesheet CSS files are downloaded and parsed. Intrigued by this concept, I decided to conduct a small experiment to see it in action.
Upon reviewing the performance report, it is evident that the jQuery script executes smoothly on its own before the CSS file is downloaded and parsed.
I'm curious to understand why this behavior occurs?
This situation arises due to the potential blocking effect of CSS during parsing based on the sequence of external stylesheets and scripts in the document. If external style sheets precede scripts in the document, the creation of DOM and CSSOM objects may conflict with each other. When the parser encounters a script tag, DOM construction halts until the JavaScript completes execution. However, the JavaScript cannot execute until the CSS file has been downloaded, parsed, and the CSSOM becomes available.
source
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<title>React App</title>
</head>
<body>
<link rel="preload" onload="this.rel='stylesheet'" as="style" href='https://s3-eu-west-1.amazonaws.com/welcome.b2b.test/form/bundle.css'/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"/>
<script>
window.onload = function() {
console.log("window");
};
</script>
</body>
</html>