Tuesday, October 26, 2010

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.

Renderingweb browser engine (sometimes called layout engine or rendering engine), is a software component that takes marked up content (such as HTMLXMLimage files, etc.) and formatting information (such as CSSXSL, 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 browserse-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.
Reflow Visualization 


No comments:

Post a Comment