Ire Aderinokun:<\/p>\n
\nThere are 6 stages to the CRP –<\/p>\n
\n
- Constructing the DOM Tree<\/li>\n
- Constructing the CSSOM Tree<\/li>\n
- Running JavaScript<\/li>\n
- Creating the Render Tree<\/li>\n
- Generating the Layout<\/li>\n
- Painting<\/li>\n<\/ol>\n<\/blockquote>\n
I imagine if you’re really getting into performance work, you’ll want a firm understanding of this. There are lots of ways to block\/delay parts of this process. The job of a perf nerd is to understand when and why that’s happening, evaluate if it’s necessary or not, and tweak things to get to that painting step as soon as possible.<\/p>\n
I’m curious if this is generic enough that 100% of all rendering engines work 100% the same way, or if there are significant differences.<\/p>\n","protected":false},"excerpt":{"rendered":"
Ire Aderinokun: There are 6 stages to the CRP – Constructing the DOM Tree Constructing the CSSOM Tree Running JavaScript Creating the Render Tree Generating the Layout Painting I imagine if you’re really getting into performance work, you’ll want a firm understanding of this. There are lots of ways to block\/delay parts of this process. […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[17],"tags":[592,1111],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":274522,"url":"https:\/\/css-tricks.com\/browser-painting-and-considerations-for-web-performance\/","url_meta":{"origin":250798,"position":0},"title":"Browser painting and considerations for web performance","date":"August 8, 2018","format":false,"excerpt":"The process of a web browser turning HTML, CSS, and JavaScript into a finished visual representation is quite complex and involves a good bit of magic. Here\u2019s a simplified set of steps the browser goes through: Browser creates the DOM and CSSOM. Browser creates the render tree, where the DOM\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/07\/browser-paint-featured.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":278627,"url":"https:\/\/css-tricks.com\/css-and-network-performance\/","url_meta":{"origin":250798,"position":1},"title":"CSS and Network Performance","date":"November 13, 2018","format":false,"excerpt":"JavaScript and images tend to get the bulk of the blame for slow websites, but Harry explains very clearly why CSS is equally to blame and harder to deal with: A browser can\u2019t render a page until it has built the Render Tree; the Render Tree is the combined result\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/css-running.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":320963,"url":"https:\/\/css-tricks.com\/content-visibility-the-new-css-property-that-boosts-your-rendering-performance\/","url_meta":{"origin":250798,"position":2},"title":"content-visibility: the new CSS property that boosts your rendering performance","date":"September 14, 2020","format":false,"excerpt":"Una Kravets and Vladimir Levin: [...] you can use another CSS property called\u00a0content-visibility\u00a0to apply the needed containment automatically.\u00a0content-visibility\u00a0ensures that you get the largest performance gains the browser can provide with minimal effort from you as a developer.The content-visibility property accepts several values, but\u00a0auto\u00a0is the one that provides immediate performance improvements.\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/09\/content-visibility-perf.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":324466,"url":"https:\/\/css-tricks.com\/more-on-content-visibility\/","url_meta":{"origin":250798,"position":3},"title":"More on content-visibility","date":"October 28, 2020","format":false,"excerpt":"Back in August 2020, when the content-visiblity property in CSS trickled its way into Chrome browsers, Una Kravets and Vladimir Levin wrote about it and we covered it. The weirdest part is that to get the performance value out of it, you pair it with contain-intrinsic-size on these big chunks\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/devtools-paintbrush.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":283672,"url":"https:\/\/css-tricks.com\/the-client-server-rendering-spectrum\/","url_meta":{"origin":250798,"position":4},"title":"The Client\/Server Rendering Spectrum","date":"March 6, 2019","format":false,"excerpt":"I've definitely been guilty of thinking about rendering on the web as a two-horse race. There is Server-Side Rendering (SSR, like this WordPress site is doing) and Client-Side Rendering (CSR, like a typical React app). Both are full of advantages and disadvantages. But, of course, the conversation is more nuanced.\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/02\/server-side-rendering.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":338426,"url":"https:\/\/css-tricks.com\/how-to-improve-css-performance\/","url_meta":{"origin":250798,"position":5},"title":"How to Improve CSS Performance","date":"April 19, 2021","format":false,"excerpt":"There is no doubt that CSS plays a huge role in web performance. Milica Mihajlija puts a point on exactly why: When there is CSS available for a page, whether it\u2019s inline or an external stylesheet,\u00a0the browser delays rendering until the CSS is parsed. This is because pages without CSS\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/04\/calibreapp-css-performance.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/250798"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=250798"}],"version-history":[{"count":2,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/250798\/revisions"}],"predecessor-version":[{"id":250801,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/250798\/revisions\/250801"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=250798"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=250798"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=250798"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}