Originally, I just wanted to share some content of Network, but it got stuck when DOMContentLoaded. Many people emphasize on the Internet that CSS will not block DOM parsing, which is true or false.

The DOMContentLoaded event is fired after the initial HTML document has been fully loaded and parsed, without waiting for the stylesheet, image, and subframe to be fully loaded.

It also gives PHP that emulates CSS, saying that link will print immediately after script. So I modeled a CSS myself with Node, and the result was different. Node emulates CSS:

const http=require('http');

http.createServer(function(requset,response){
 response.setHeader('Access-Control-Allow-Credentials', 'true');
 response.setHeader('Access-Control-Allow-Origin', '*');
 setTimeout(() => {
  response.end('#test{color:red}');
 }, 3000);
}).listen(3001);

console.log('run port 3001')
Copy the code

Next comes the page code:

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>DOMContentLoaded</title> <link rel="stylesheet" Href = "http://192.168.9.110:3001/a.css" > < / head > < body > < script > < / script > < / body > < / HTML >Copy the code

In the first case, the link is before or after the script, and the script has content, including a carriage return or a space, and DOMContentLoaded takes the same time as Load:

In this case, CSS blocks DOM parsing.

Second, I put link before script, which has nothing in it, and DOMContentLoaded is much less than Load:

Third, I put link after script, which has nothing in it, and DOMContentLoaded takes the same time as Load:

And just to add, script introduces the same thing. As for the other cases async or defer, there is no test, and the result seems to be different from the various parsing mentioned online now. It’s not that JS has an action style that causes CSS to block.

CSS does not block DOM parsing if the browser does not have any script tags. If you have a script with just a space or a line break, the browser can’t tell if the script is accessing the style of the element, so whenever the script appears, it blocks everything.

This raises the question of whether putting link in front of script, as we often do, works or doesn’t? So we tested it:

<p id="test">test</p>
<script>
  console.log(getComputedStyle(document.getElementById('test'), null).color);
  document.addEventListener('DOMContentLoaded',function(){
    console.log(getComputedStyle(document.getElementById('test'), null).color);
  });
</script>
Copy the code

Put link before and after this code, respectively. Put link before and after this code, it will wait for CSS load to finish printing, both prints are RGB (255, 0, 0), put after, the first will print RGB (0, 0, 0), the second will print RGB (255, 0, 0).

Finally, it is almost impossible to develop without js scripts, but putting link in the head and loading CSS as early as possible is an optimization. Of course, is also very want to know DOMContentLoaded and CSS blocking specific reasons, hope to have research V8 source big guys can answer the answer.

Coding Personal notes public number