Render-tree Construction, Layout, and Paint | Web Fundamentals

TODO

Home Articles Render-tree Construction, Layout, and Paint Stay organized with collections Save and categorize content based on your preferences. Ilya Grigorik Published: March 31, 2014 The CSSOM and DOM trees are combined into a render tree, which is then used to compute the layout of each visible element and serves as an input to the paint process that renders the pixels to screen. Optimizing each of these steps is critical to achieving optimal rendering performance. In the previous section on constructing the object model, we built the DOM and the CSSOM trees based on the HTML and CSS input.

related reading

• An Introduction to the Browser Rendering Pipelinewebperf.tips
• Constructing the Object Model | Articles | web.devdevelopers.google.com
• Inside look at modern web browser (part 3) | Blog | Chrome for Developersdeveloper.chrome.com
• Populating the page: how browsers work - Performance | MDNdeveloper.mozilla.org
• The Web Animation Performance Tier List | Motion Magazinemotion.dev
• Build your own Reactpomb.us
• Critical Rendering Path | Articles | web.devdevelopers.google.com
• When does React re-render components? | Felix Gerschaufelixgerschau.com
• Why React Re-Renders • Josh W. Comeaujoshwcomeau.com
• Implementing React from scratchrob.directory
• Analyzing Critical Rendering Path Performance | Articles | web.devdevelopers.google.com
• Blogged Answers: A (Mostly) Complete Guide to React Rendering Behavior · Mark's Dev Blogblog.isquaredsoftware.com