In my project we noticed first paint time in Chrome browser got increased almost 1 sec. And after debugging we figured it out, in last release we removed an unnecessary div which was just below the html tag. This empty div is changing the request order. When empty div got added(its was a bug) image files in the above fold view port is requesting prior to JavaScript request and improved the first paint as this was not blocked by JavaScript. But without that buggy div, image request was happening after the JavaScript request as delayed first paint. if any body having any idea why an empty div creates this request order in network call? sample html with empty div.
<html>
<div></div>
<head>
<link rel="stylesheet" href="./assets/a.css" type="text/css">
<link rel="stylesheet" href="./assets/b.css" type="text/css">
</head>
<body>
<img src="./assets/image1.png"/>
<img src="./assets/image2.png"/>
<script src="./assets/script1.js"></script>
<script src="./assets/script2.js"></script>
<script src="./assets/script3.js"></script>
</body>
</html>
The reason it made such a difference is that the way HTML parsing is specified, it is impossible to have a
<div>in that location: the first child of<html>is always<head>, implicitly if not explicitly; seeing something that is not<head>means that you have an implicit one, possibly empty. Then, on the other side, a<head>tag in a location it is not allowed is an error and ignored. So, the sequence of steps the parser follows is (somewhat abbreviated):initialand I see<html>. Go to statebefore htmland try again.before htmland I see<html>. Create the<html>element and go to statebefore head.before headand I see<div>. That's not<head>, so create a<head>element, go to statein head, and try again.in headand I see<div>. That's not allowed in<head>, so we must be implicitly after the head; go to stateafter head.after headand I see<div>. That's not a<body>, so create the<body>element, go to statein body, and try again.<div></div>omitted.]in bodyand I see<head>. Declare a parse error because we can't have a<head>inside a<body>, then ignore the tag and look at the next token.in bodyand I see<link>. Insert a<link>element in the open element (which is<body>).If you use the developer tools in your browser to examine the DOM tree, you will see something like
I don't know exactly what the rules are for script and style loading when the
links are not in the<head>as you intended, but they are presumably different in the way you observed.The important thing to remember here is that a HTML document always has a
<html>element containing exactly a<head>element and a<body>element. If you write something else, it will be forced into that shape, possibly not in the way you intended.