This content originally appeared on Go Make Things and was authored by Go Make Things
The other day, I got an email asking…
What order do files load in the browser? Does CSS load before JavaScript?
Great question! Here’s an over-simplified, handwavy explanation of how browsers load files…
- The HTML file downloads.
- The browser starts reading it, and rendering stuff in it in real time as it does.
- If it finds remote assets, it starts downloading them, two at a time, as it comes across them. Once they’re downloaded, they render.
Step 3 is where stuff gets “weird.”
Browsers are optimized to avoid repainting the UI whenever they can. If the browser finds a CSS file, it keeps downloading stuff but stops rendering until the CSS file is downloaded and parsed.
Because CSS changes how HTML is laid out, the browser wants to know the right way to do that to avoid painting the UI twice.
If the browser finds a JavaScript file, it stops rendering and stops downloading other files. Because JS can add and remove elements from the UI, the browser wants to know what the final layout is before continuing.
JavaScript files can also be loaded with async and defer attributes.
<script async src="script1.js"></script>
<script defer src="script1.js"></script>The defer attribute tells the browser to download the file, but wait until all of the other stuff is done before running the file. The async attribute tells the browser to download this file, but don’t stop downloading others while you do. The two can be used together.
So, the short answer is files are loaded in the order they appear in the HTML file.
The longer answer is … but it depends!
☀️😎 Almost Summer Sale! This week only, get 30% off all of my Vanilla JS courses, books, and bundles.
This content originally appeared on Go Make Things and was authored by Go Make Things
Go Make Things | Sciencx (2022-05-25T14:30:00+00:00) What order do files load in the browser?. Retrieved from https://www.scien.cx/2022/05/25/what-order-do-files-load-in-the-browser/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.