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:
<html>
<head>
<link... // CSS_1 file
<script src=... // Script_1 file
<link... // CSS_2 file
<link... // CSS_3 file
<script src=... // Script_2 file
<script src=... // Script_3 file
<link... // CSS_4 file
</head>
<body>
// Some HTML body code
<script>
// Some JavaScript Script_4
</script>
// Some more HTML body code
<script src=... // Script_5 file
// Some more HTML body code
<link... // CSS_5 file
// Some more HTML body code
<script src=... // Script_6 file
</body>
</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.
Tags:
javascript html css dom html-parsing
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.
2.1 While parsing the HTML, it will start downloading the external resources (CSS/JavaScript) found in the
<head>section in parallel.2.2 Then it will start downloading all other links and JavaScript files it finds.
While constructing the DOM, it will pause before it starts with the
<body>tag and:3.1 Parse the CSS files and JavaScript files, unless the JavaScript files has either
asyncordeferattribute. If they do, they will be parsed later.3.2 Execute the JavaScript files found in the head section.
After executing the JavaScript files found in the
<head>, because it could change the DOM usingdocument.write, it will continue to create the DOM.Now it will go through the rest of the page, only pausing if it finds a
<script>tag withoutdefer/async. Request to external resources happen when the tag is parsed (images, scripts, CSS, etc.). The JavaScript code found in the<body>tag is executed and only have access to the DOM up till the point where the browser found them.The DOM is now constructed, the JavaScript code is parsed to AST (Abstract Syntax Tree) and all CSS is also parsed and resolved (CSS can have multiple import statements). The CSS now gets applied to the DOM via CSS selectors. Each selector block is separated with a space and each selector queries a piece of the DOM. The fastest selectors are the ones with no spaces. E.g
.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.
I hope you see why it's bad to have JavaScript files in the <head> section, unless you use defer/async attributes. And never ever use document.write in JavaScript code. Also do not use @import in CSS unless you pre-compile.
PS: @UtkarshPramodGupta I hope you find this
