In this article, we'll look into actions performed by a browser to render a webpage.
🎯 Steps involved in HTML page rendering:
Construc...
For further actions, you may consider blocking this person and/or reporting abuse
Great article Anuradha.
Good one, seems like I'm seeing ur posts after longtime.
Question on CSSOM , where u mentioned it will copy the css to html element, but again if I understand ur statements correctly Render tree is also doing same job as CSSOM stage, couldn't spot the exact bit which differs , to me both stages looks to club css to html element?
What does it mean by user agent style sheets? Does it mean default browser style that comes i.e the bare html without connecting written css code?
CSSOM contains the nodes on which css rules are applied whereas render tree only contains the visible nodes to be displayed on the screen.
And yes, user-agent stylesheet means default styles applied by web browsers in absence of any css rules specify by user.
@srikanth597 You are correct. The CSSOM diagram, widely reproduced from a Google source, misrepresents what the CSSOM is. There is no body-to-div-to-img tree structure in the CSSOM. The CSSOM is a like a database of the accumulated stylesheets loaded for the document. All the rules, media queries etc declared, but not yet applied via the cascade to the DOM elements. The CSSOM provides the means for this database of rules to be manipulated by JavaScript.
Only when the CSSOM is applied to the DOM can the cascade be resolved for each element and the render tree (a.k.a box tree) constructed.
Hey great article....
But I guess CSSOM tree is generated simultaneously when creating the DOM tree.
When html is parsed into Dom Tree ,when it encounters the CSS files it makes a request for it and a CSSOM is created simultaneously.
DOM tree and CSSOM tree are 2 independent tree structures , these two entities are combined to formed a Render tree, a combination of both DOM and CSSOM.
U should have also explained how DOM and CSSOM behaves when encountering Scripts(Javascript) .Like how DOM halts until script execution and script stops until CSSOM execution that led to critical path rendering.
I enjoyed your article with beautiful diagrams ....thankyou.
Really great article. One question about all the process : how can we have the duration for each steps ? Is there so hook or whatever ? Or only with lighthouse when recording ?
Thanks a lot again for this great article 🙏👍
Great article, it's interesting to position yourself on the web browser side. 👍
Thank you!!
Thanks for the detailed explanation.
:D
@jothinkumar I'm glad you find it useful 🙂
One question:-
Please free to answer ,
When we create single file and save it with .html and run from browser
WIll it be CSR or SSR?