Got a question in one of the interviews about how does HTML page load, as in, how the resources are actually being fetched from top to bottom and their execution?
Starting a thread about it here.
#FailedInterview #javascript #html
Starting a thread about it here.
#FailedInterview #javascript #html
Not all resources in the HTML are blocking.
For example, CSS and other static assets are non-blocking.
However, JavaScript is blocking unless it's used with async or defer.
For example, CSS and other static assets are non-blocking.
However, JavaScript is blocking unless it's used with async or defer.
This whole process is all about two things, "Fetching" and "Parsing".
The browser fetches the resource first and then start the parsing.
However, fetching and parsing happens in parallel for multiple resources.
The browser fetches the resource first and then start the parsing.
However, fetching and parsing happens in parallel for multiple resources.
What loads first or where is fetching being done first?
<head> or <body>?
<head> does first but that doesn't mean that <body> will wait for all the resources the load and execute first in <head>
<head> or <body>?
<head> does first but that doesn't mean that <body> will wait for all the resources the load and execute first in <head>
"It may start parsing the <body> before all <head> resources have been fetched. But, all tags in the <head> section are parsed before it starts parsing the <body> section." - StackOverflow
"If there are multiple stylesheets specified in <head> tag, then is it like, sheet1 will load first and then sheet2"?
No, stylesheets are loaded in parallel and it doesn't block the parsing, waiting for a stylesheets to load first.
No, stylesheets are loaded in parallel and it doesn't block the parsing, waiting for a stylesheets to load first.
"Is it same for javascript files being fetched and parsed in parallel just like stylesheets"?
Well, multiple scripts can be fetched in parallel but further parsing won't happen until the first one is fetched and executed.
Unless it's async or defer, it executes serially.
Well, multiple scripts can be fetched in parallel but further parsing won't happen until the first one is fetched and executed.
Unless it's async or defer, it executes serially.
If <script> has been specified in <head> and as we know that, scripts are blocking resources, further parsing of page won't happen until the script is first loaded and executed.
That's why it is recommended to put script tags inside body at the bottom, so page can be parsed.
That's why it is recommended to put script tags inside body at the bottom, so page can be parsed.
"What if High Quality images who are large in size? Do they load in parallel too?"
Answers is Yes! They do. But browser has certain connection limits for loading content from a server in parallel and will load upto certain N number of resources from the same server.
Answers is Yes! They do. But browser has certain connection limits for loading content from a server in parallel and will load upto certain N number of resources from the same server.
@tanaypratap @hellonehha RTs are really appreciated for this thread so that people can be even more ready than before for the interview. And let me know if you want to correct or add any new points in this. This is purely my research and recent experience.
