0
<head>
  <script src="/some/path/to/js"></script>
  <link href="/some/path/to/css">
</head>

When we have one <script> tag (for js file) in the <head> tag before a <link> tag (for css file). Which file would be requested first by the browser?

  1. Would it make the request for both css and js file simultaneously?
  2. Would it first wait for the js file to get downloaded before making the request for the css file?
  3. Or, would it download the css first, render the page with complete HTML and CSS and then making the request for the js file thereafter?

Describe the page rendering process in a browser? This post doesn't explain the blocking nature of js files and how it affects HTML rendering/parsing.

UtkarshPramodGupta
  • 7,486
  • 7
  • 30
  • 54
  • Many question and answers about this have been given. A browser reads each file from top to bottom so what comes first is loaded first. Most devs set scripts at the bottom because JS has the harders impact on page loading. Meaning JS won't block page render at the bottom. – SuperDJ Aug 23 '18 at 17:46
  • Possible duplicate of [Describe the page rendering process in a browser?](https://stackoverflow.com/questions/7515227/describe-the-page-rendering-process-in-a-browser) – SuperDJ Aug 23 '18 at 17:50
  • @SuperDJ Please read the edits. – UtkarshPramodGupta Aug 23 '18 at 17:57

2 Answers2

2

In general… <script> elements that are not defer or async can document.write so block futher parsing of the HTML document. The <link> will not be added to the DOM before the script has been processed so it won't download the CSS until then.

However, HTTP 2 is arriving, which allows the server to start delivering associated resources without the browser explicitly requesting them.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
0

Browser reads from top to bottom, which is why you see in various projects the JS scripts at the end of a document to prevent any errors so the DOM loads first. It would not make it simultaneous first the script will load. If you open up your inspector tools -> network you could refresh a sample page and see how the dom loads in the files.

Gianni
  • 136
  • 1
  • 14