Before we go into that. I want to mention that it is very essential for a web developer (mostly frontend developers) to understand how the browser parses the code they have written. For that, i have linked a very good articles which should supossedly make you understand that into detail.
HTML and CSS both have object models. That of HTML is called the DOM (
Let's get to it ;)
When the browser finished to parse the HTML and CSS code. An event is triggered. You might have come accross this event which is DOMContentLoaded. You will usually use it as such :
This event is especially useful when you want to do something after the page structure and its styles have been loaded.
Note that event though the DOMContentLoaded event may be triggered, other stuff like images, audio or even video might have not yet loaded.
Another event triggered by the browser is the load event. You will use it this way.
Now you know the two major load events you can make use of in the browser.
For this, you can use the
This post was meant to be brief and i hope it was XD.
Read this post about how the browser renders a page to understand everything more into details