In browser rendering, do images come before JavaScript files?

The browser rendering process goes like this.

1. Download the HTML file: the browser downloads the HTML file from the server.

2. Parse the HTML: the browser parses the downloaded HTML file and builds the DOM (Document Object Model) tree.

3. Download and process CSS files: when the browser finds a CSS file while parsing the HTML, it downloads and processes that file. Processing the CSS file creates style rules, and the style rules are applied to DOM elements. The size and position of images are calculated at this stage.

4. Download and run JavaScript files: when the browser finds a script tag while parsing the HTML, it downloads and runs that JavaScript file.

So the answer is that the JavaScript file is downloaded after the images finish rendering.

Then where should the <script></script> tag go in an HTML file?

The usual recommendation is to put the <script> tag for a JavaScript file at the end of the <body> tag.

This is because it lets the browser put off downloading and running the JavaScript file as long as possible while it parses the HTML.

But in some cases the <script> tag is placed inside the <head> tag. For example, when certain JavaScript code is tied to the page's initial setup or essential features, placing it inside the <head> tag can be useful. In that case, you can also use the defer attribute to adjust when the JavaScript file is downloaded and run.

Example of the defer attribute, applied inside the <head> tag

1<script src="파일경로.js" defer></script>