-
Browser Rendering ProcessWeb/DOMBrowser 2020. 2. 23. 15:09
1. Description
1.1 Render Tree
With the two processes of parsing concluded and with DOM and CSSOM defined, the browser creates a render tree. A render tree is another tree internally stored by the browser and used to represents visual elements. The elements inside <head> are ignored as well as elements defined with display: none. However is worth remembering that elements with visibility: hidden are still part of the tree.
Once the render tree is complete, the browser can execute the process of reflow and repaint.
1.2 Reflow
The process used by the browser for positioning elements on the screen is called Reflow.
This process is executed always a DOM element is manipulated, any CSS rule about position or geometry is changed or when the browser is resized. The reflow process is executed for each element's children, ancestors and elements that appear after it in the DOM, once it needs to re-calculate the styles based on the target element.
1.3 Repaint
Also known as redraw, a repaint is the name of the process used by the browser when it needs to update some style that is not about layout. In other words, styles not related to position, width or height. An example would be a manipulation of the background color.
1.4 Avoiding reflows and repaints
An approach to reduce bad effects caused by reflows and repaints is reducing the number of requests made by styles informations, avoiding adding or removing elements, updates or animations in the DOM, windows resizing, change the font size and make unnecessary page scroll.
Knowing about these processes may help when you need to discuss about some concepts that require a lot of browser’s resource in projects that care about performance on frontend.
So, before making a DOM manipulation makes sure that there is no better way to execute the issue at hand.
2. Reference
https://medium.com/@gneutzling/the-rendering-process-of-a-web-page-78e05a6749dc
'Web > DOMBrowser' 카테고리의 다른 글
Event bubbling and capturing (0) 2019.09.29 Event delegation (0) 2019.09.29 Difference between event.stopPropagation and event.preventDefault (0) 2019.09.28