{"id":1322,"date":"2022-02-24T21:49:38","date_gmt":"2022-02-24T21:49:38","guid":{"rendered":"https:\/\/mobileaders.com\/?p=1322"},"modified":"2022-02-24T22:35:12","modified_gmt":"2022-02-24T22:35:12","slug":"improve-performance-and-reduce-reflow-repaint","status":"publish","type":"post","link":"https:\/\/mobileaders.com\/?p=1322","title":{"rendered":"Improve Performance and\u00a0Reduce Reflow Repaint"},"content":{"rendered":"\n

Recently I came to know about Reflow and Repaint, how they affect web performance, so I writing this post to give insights about Reflow, Repaints, and how all of this affects our performance and reopen our series about minimizing code<\/a>.<\/p>\n\n\n\n

Critical rendering path<\/strong><\/p>\n\n\n\n

The Critical Rendering Path is the sequence of steps the browser goes through to convert the HTML, CSS, and JavaScript into pixels on the screen. Optimizing the critical render path improves render performance. The critical rendering path includes the Document Object Model (DOM), CSS Object Model (CSSOM), render tree, and layout.
<\/p>\n\n\n\n

The document object model is created as the HTML is parsed. The HTML may request JavaScript, which may, in turn, alter the DOM. The HTML includes or makes requests for styles, which in turn builds the CSS object model. The browser engine combines the two to create the Render Tree. Layout determines the size and location of everything on the page. Once the layout is determined, pixels are painted on the screen.<\/p>\n\n\n\n

Optimizing the critical rendering path improves the time to first render. Understanding and optimizing the critical rendering path is important to ensure reflows and repaints can happen at 60 frames per second, to ensure performant user interactions and avoid jank.<\/p>\n\n\n\n

\"\"
CRP<\/figcaption><\/figure>\n\n\n\n

Document Object Model<\/strong> (DOM)<\/p>\n\n\n\n

DOM is incremental. the HTML response tun into tokens which turn into nodes which turn into DOM tree, single DOM starts tag token and end tag token. DOM is connected based on hierarchy. If another set of start tags and end tag tokens come between a set of start tags and end tags, you have a node inside a node, which is how we define the hierarchy of the DOM tree.
The greater the number of nodes, the longer the following events in the critical rendering path will take. Measure! A few extra nodes won’t make a difference, but divitis can lead to jank.<\/p>\n\n\n\n

CSS Object Model<\/strong> (CSSOM)<\/p>\n\n\n\n

The DOM contains all the content of the page. The CSSOM contains all the styles of the page, information on how to style that DOM. CSSOM is like DOM but it’s different in CSS is
render-blocking, the browser blocks page rendering until it receives and processes all of the CSS. CSS is render-blocking because rules can be overwritten, so the content can’t be rendered until the CSSOM is complete.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Render Tree<\/strong><\/p>\n\n\n\n

render tree captures both content (DOM) and style of the page (CSSOM), combine into a render tree, and to construct the render tree, the browser checks every node, starting from the root of the DOM tree, and determines which CSS rules are attached.
render tree captures visible content and content that is not visible not included in the render tree, not visible content like (meta, script, link) and display: none are omitted from the render tree.<\/p>\n\n\n\n

Layout<\/strong><\/p>\n\n\n\n

Once the render tree is built, the layout becomes possible. The layout is dependent on the size of the screen. The layout step determines where and how the elements are positioned on the page, determining the width and height of each element, and where they are in relation to each other.
Layout performance is impacted by the DOM — the greater the number of nodes, the longer layout takes. The layout can become a bottleneck, leading to a jank if required during scrolling or other animations. While a 20ms delay on load or orientation change may be fine, it will lead to a jank on animation or scroll. Any time the render tree is modified, such as by added nodes, altered content, or updated box model styles on a node, layout occurs. to reduce the frequency and duration of layout events, batch updates and avoid animating box model properties.<\/p>\n\n\n\n

Paint<\/strong><\/p>\n\n\n\n

finally, paint is the last step in CRP is responsible for painting the pixels to the screen. Once the render tree is created and the layout occurs, the pixels can be painted on the screen. Onload, the entire screen is painted. After that, only impacted areas of the screen will be repainted, as browsers are optimized to repaint the minimum area required. Paint time depends on what kind of updates are being applied to the render tree<\/p>\n\n\n\n

for this time I hope you understand what is CRP and how it’s working in the next section I will talk about what repaint and reflow, I know that I have not explained what is reflow so <\/p>\n\n\n\n

what is Reflow<\/strong> <\/p>\n\n\n\n

A reflow computes the layout of the page. A reflow on an element recomputes the dimensions and position of the element, and it also triggers further reflows on that element\u2019s children, ancestors, and elements that appear after it in the DOM. Then it calls a final repaint. Reflowing is very expensive, but unfortunately, it can be triggered easily.
<\/p>\n\n\n\n

Reflow occurs when you:<\/p>\n\n\n\n