Browser Rendering vs Repaints vs Reflows

Browser rendering, repaints, reflows


Performance test engineers need to understand these concepts, so that they can clearly distinguish between client and server bottleneck, guide the development team for better performance pages.


Rendering - A web browser engine (sometimes called layout engine or rendering engine), is a software component that takes marked up content (such as HTML, XML, image files, etc.) and formatting information (such as CSS, XSL, etc.) and displays the formatted content on the screen. It "paints" on the content area of a window, which is displayed on a monitor or a printer. A web browser engine is typically embedded in web browsers, e-mail clients, on-line help systems or other applications that require the displaying (and editing) of web content.


Repaint - A repaint occurs when changes are made to an elements skin that changes visibility, but do not affect its layout. Examples of this include outline, visibility, or background color. According to Opera, repaint is expensive because the browser must verify the visibility of all other nodes in the DOM tree.


Reflow - A reflow is even more critical to performance because it involves changes that affect the layout of a portion of the page (or the whole page). Reflow of an element causes the subsequent reflow of all child and ancestor elements as well as any elements following it in the DOM.


In-order to improve the page performance need to avoid the reflows.
Following are some of the links that explain the above concepts in detail.
Stubbornella
Dev.Opera
Code.Google.com
Reflow Visualization 
Mozilla




---