According to an article, CSS is considered render-blocking, so JavaScript will evaluate after constructing a CSSOM (also known as recalculating styles in dev tools).
However, it appears in Chrome dev tools that JavaScript is evaluated before CSSOM. Why is this the case? Did I misunderstand something? https://i.sstatic.net/xV8gD.png
If you'd like to view my example, click => here
Call Tree
https://i.sstatic.net/nt5k0.png
Event log https://i.sstatic.net/s36Ow.png
<html>
<head>
<style>
h1 {color:red;}
p>p {color:blue;}
p>p>p {color:blue;}
p>p>p>p {color:blue;}
p>p>p>p>p {color:blue;}
p>p>p>p>p>p {color:blue;}
p>p>p>p>p>p>p {color:blue;}
p>p>P>p>p>p>p>p {color:blue;}
</style>
</head>
<body>
<h1>A heading</h1>
<p>A paragraph.</p>
<p>Hello <span>web performance</span> students!</p>
<div><img src="awesome-photo.jpg"></div>
<script>
var span = document.getElementsByTagName('span')[0];
span.textContent = 'interactive'; // change DOM text content
span.style.display = 'inline'; // change CSSOM property
// create a new element, style it, and append it to the DOM
var loadTime = document.createElement('div');
loadTime.textContent = 'You loaded this page on: ' + new Date();
loadTime.style.color = 'blue';
document.body.appendChild(loadTime);
var cnt=0
while(cnt++ <=9999999){}
</script>
</body>
</html>