Recently I had a chance to present a talk at NDC Sydney about web performance and it received a great feedback.
That inspired me to write up a ser...
For further actions, you may consider blocking this person and/or reporting abuse
Wow, this a great article for me to understand more of the 3 heads up of Web Development program. It'll help other people to appreciate those technologies mostly for the beginners to start their career as a developer 👌 Cool enough.
Great explanation of what a browser is doing under the hood, no wonder browsers are among the most complex pieces of software ... also obvious now why techniques like Turbolinks are so effective, because it means the CSS and a large part of the HTML needs to be parsed just once instead of for every page.
Your explanation made me wonder though - I see that the browser has to do a lot of work (parsing etc) just to arrive at the Render Tree - what if that work could somehow be done server side (by "precompiling" an HTML page and its CSS) and the server just sends a complete "compiled" render tree to the browser - is that a crazy idea?
Not at all, a small part of that is done by server side rendering, but browsers still will need to perform majority of the work. Maybe some day
Evidently yes, the browser does most of that work nowadays - I just thought, theoretically, whether some of that work could be shifted to the "build phase" - sort of a precompilation ...
Especially since all of these resources (html, css) are essentially plain text - then internally the browser builds an optimized 'binary' version - so I thought if that "optimized" version could somehow be pre-generated and downloaded ...
A bit similar to what they're doing with Javascript and Web Assembly ... OTOH if building that 'render tree' depends on a lot of dynamic variables which are not known in advance then this would of course not be practically feasible :-)
Great and informative article, Yaser. One small nitpick: there is not something like the CSSDOM, but rather CSSOM.
Ooops, you're completely right. Will fix it ASAP
Fixed, I had the correct full term but wrong acronym 🤦♂️
Yeah, nothing serious :) thanks for the post!
great article.
Can you recommend any tool to "extract the unused CSS from the main file and load them separately and later when needed"? Would like a separate post about such tools or best practices.
Here you go dev.to/yashints/knock-out-your-unu...
Great article.
Part 4 and 5 have broken links
Done
Thanks for letting me know, will fix it soon
Nicely done. Would recommend to read this for every web developer.
Thanks