I think the person got pressured to delete the question from moderators. I think the question was hard to answer completely but definitely deserve to be asked and answered on Stack Overflow.
At least there should be a way to contact the author and let him know that I have an answer for him!
I have posted the entire question and my answer below, so everyone can make up their own mind about the quality of the Q/A.
I really think that the procedure should change, especially in the context of judgemental moderators here on SO. If you someone, somehow could reach out to UtkarshPramodGupta. He doesn't have any public email on Stack Overflow, GitHub or LinkedIn.
It would be very interesting to hear his side of the story to why he decided to deleted the post.
I was missing an important point:
From @rene: Did you actually post your answer or was the question deleted while you were still writing the answer?
From @dotnetcarpenter: It was deleted while I was writing. I just finished and hit "Answer". And I got "This post is no longer answerable" and something more - the page just disappeared while I'm writing this.
From @rene: OK, thanks for clarifying that. I couldn't find that important fact in your question
The question was:
How does webpage rendering occurs?
Okay, so I have been asked this questions related to webpage rendering, HTML parsing, and the likes in many job interviews and I have failed each and every time because I couldn't really find a proper resource and explanation for it till date. I'll make it simple for you guys to answer so that you don't post answers like the ones posted on the below two posts:
- Describe the page rendering process in a browser?
- What is the complete process from entering a url to the browser's address bar to get the rendered page in browser?
Describe the page rendering process in a browser? What is the complete process from entering a URL to the browser's address bar to get the rendered page in browser? Moreover, the answers on the above posts are almost a decade old and don't even explain the webpage rendering in the modern browsers.
So, making it short and snappy I have the following HTML:
This is the static HTML file the browser has just received from the server. Now I want to know what all is going to happen in the browser engine and in what series until we get the final display of this page on the web browser.
And my answer was:
I have always found this article explains it the best: https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/
It's from 2011 but browsers have not changed.
To take your example briefly:
First the browser will request the HTML page from your server.
Then it will parse the HTML and create the DOM.
<head>section in parallel.
While constructing the DOM, it will pause before it starts with the
deferattribute. If they do, they will be parsed later.
<head>, because it could change the DOM using
document.write, it will continue to create the DOM.
Now it will go through the rest of the page, only pausing if it finds a
<body>tag is executed and only have access to the DOM up till the point where the browser found them.
.my-fancy-elementis faster than
#my-fancy-element .something-under p.
Actually a lot more is happening that I wrote here. The real answer would require a small book.
The main point for you as a web developer, is that you understand that the browser can only show the page up til a
<script> tag. If you have a
<script> tag somewhere in your HTML, the browser can not show the page before the code has been downloaded, parsed and executed, which causes slow page loads. You also need to understand slow CSS selectors but more importantly
@import and specificity in CSS selectors.
<head> section, unless you use
async attributes. And never ever use
@import in CSS unless you pre-compile.
PS: @UtkarshPramodGupta I hope you find this