I'm curious about how browsers handle the loading of web pages. Specifically, does the Document Object Model (DOM) get fully built before JavaScript executes, or does the browser process HTML, CSS, and JavaScript in a line-by-line manner like other programming languages? Also, is there a typical order of operations like should HTML load first, then CSS, and finally JavaScript? If not, why is it common to position tags right before the tag?
4 Answers
The initial loading starts with the HTML content, and it will load resources like CSS and JavaScript based on the order specified in the document. If you see pages display without styles briefly, that usually means the CSS loaded after the page rendered.
When a browser processes an HTML page, it goes from the top to the bottom. If it encounters a script tag that doesn't have `defer`, `async`, or `type="module"`, it will stop parsing until it fetches that script. Once the script is downloaded, it executes, and only then does the browser continue parsing the rest of the HTML. In the past, script tags were placed at the end to prevent blocking the user from seeing a blank screen. Nowadays, you can use `async` for scripts to load without blocking, or `defer` so they run after the entire document is loaded, which allows you to position your script tags earlier in the document if needed.
MDN has great resources that explain the browser loading process and how script attributes work. It's true that placing scripts at the end was a good practice to avoid blocking the parser, but most modern browsers support `defer` and `async` now, making it perfectly fine to put important scripts in the header to load them earlier.
Nope, it's on developers to ensure that none of their JavaScript that relies on DOM elements runs until the DOM is fully constructed. It’s pretty straightforward to manage!
Exactly! Back then, we would often wrap code in `$( document ).ready(...)` to make sure everything was loaded before executing any scripts.