How Is a Page Loaded?


#1

Hi,

<head> style.css </head>
<body> content is here

  • jquery.js (not deferred)
  • other js files (deferred) </body>

I think when we enter the url on the browser, css-html both are loaded first and then js files are loaded in above situation. But when will visitor see anything as loading?

I know TTFB but I don’t understand some terms like “parsing, rendering, initializing, first paint” and don’t know the main logic how a browser acts.

Can someone explain that in a simple way please.
(Sorry for bad English)


#2

Although I am not accurate,

but,

TTFB: When browser get the first byte of data
DOM Init: In HTML the tags are basically the node, so first that DOM structure is initialized.
DOM loaded: The tag attributes and content is then loaded in the DOM strcture
Onload: This fires the onload event in Javascript, which means that everything is ready and now Javascript can being processing (If no render blocking JS is written)
First paint: When barebone HTML structure is painted on screen.
Contentful paint: When HTML is applied with Browser’s default CSS, then website’s CSS, the links are given their functionality.

Parsing is reading and evaluating of the HTML tags from the data just tansferred.
Rendering is converting the HTML data into webpage.

I am not 100% sure of how browsers work. But it should be the process. Please correct me.


#3

This would be helpful.