-7

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? 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:

  1. First the browser will request the HTML page from your server.

  2. 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.

  3. 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 async or defer attribute. If they do, they will be parsed later.

    3.2 Execute the JavaScript files found in the head section.

  4. After executing the JavaScript files found in the <head>, because it could change the DOM using document.write, it will continue to create the DOM.

  5. Now it will go through the rest of the page, only pausing if it finds a <script> tag without defer/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.

  6. 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-element is 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

closed as off-topic by gnat, rene, Sonic the Anonymous Hedgehog, Nathaniel, Robert Longson Aug 22 '18 at 21:00

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "This question's topic is only applicable to one specific site in the Stack Exchange Network. Questions on Meta Stack Exchange should relate to features or policies that commonly apply to the network or the software that drives it, within the guidelines defined in the help center. You should ask this question on the meta site where your concern originated." – gnat, rene, Sonic the Anonymous Hedgehog, Nathaniel, Robert Longson
If this question can be reworded to fit the rules in the help center, please edit the question.

7

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?

This is pretty much textually the description of a question that is too broad. Actually, I would like to quote part of your cited answer:

Actually a lot more is happening that I wrote here. The real answer would require a small book.

You, yourself, were aware that this was too broad. Too broad questions, are closed, and possibly deleted. It's unfortunate you spent time on this, but at this point, seeing the reputation you have on SO, you should know that off-topic questions will be closed.

  • My point is that I believe it is a very common question for new web developers (and senior) and that the existing resources on the web are a bit of a mouthful. I gave the main points in regard to browser rendering and provided a link (49 pages) to more information. medium.com/@monica1109/how-does-web-browsers-work-c95ad628a509 is 5 pages and also give an overview. But my answer was a good fit for SO and answered the main question @UtkarshPramodGupta had. Too bad this Q/A didn't make the cut. – dotnetCarpenter Aug 22 '18 at 19:42
  • Also he added the following tags: javascript html css dom html-parsing That suggest that he is interested in these 5 aspects and not network, wifi, tcp etc. – dotnetCarpenter Aug 22 '18 at 20:21
  • 1
    Yes, it does suggest that, you are right. Maybe there is a way to ask another question that would address that in a way that is not too broad, though one would be extremely careful in doing that. It could even be a self-answered question. – Félix Gagnon-Grenier Aug 22 '18 at 20:23
  • 2
    What are the max number of tags on a question? 5? coincidence? – Kevin B Aug 22 '18 at 20:36
6

A question having an answer does not save it from deletion. An answer being written does not make a question immune from deletion, nor closure. It's unfortunate that you spent so much effort on a question that asker didn't believe was worth keeping, but there isn't really anything we can do about that. Just shrug and move on, really.

If an asker deletes their question, then...it's deleted. There are circumstances where they cannot, such as having a positively upvoted answer. If you find questions that you believe have been wrongly deleted and have 10K, you can vote to undelete.

Not the answer you're looking for? Browse other questions tagged .