0

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>
Shinov T
  • 862
  • 5
  • 9

1 Answers1

0

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):

  1. My state is initial and I see <html>. Go to state before html and try again.
  2. My state is before html and I see <html>. Create the <html> element and go to state before head.
  3. My state is before head and I see <div>. That's not <head>, so create a <head> element, go to state in head, and try again.
  4. My state is in head and I see <div>. That's not allowed in <head>, so we must be implicitly after the head; go to state after head.
  5. My state is after head and I see <div>. That's not a <body>, so create the <body> element, go to state in body, and try again.
  6. [Steps for regular body content processing of the <div></div> omitted.]
  7. My state is in body and 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.
  8. My state is in body and I see <link>. Insert a <link> element in the open element (which is <body>).
  9. [Continues to process the rest of the document.]

If you use the developer tools in your browser to examine the DOM tree, you will see something like

<html><head></head><body>
    <div></div>
    <link rel="stylesheet" href="./assets/a.css" type="text/css">
    <link rel="stylesheet" href="./assets/b.css" type="text/css">
    <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>

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.

Kevin Reid
  • 37,492
  • 13
  • 80
  • 108