Replaced and Non-Replaced Elements

Mon, 29 Aug 2016 17:33:33 +0000

Suddenly heard about this concept. Never heard of it before. So I looked it up to learn more.

Replaced elements generally refer to elements that have default styles, such as: img, input, textarea, select, object
Non-replaced elements are the opposite, that is, all elements other than replaced elements like: img, input, textarea, select, object.

What is Browser Repaint and Reflow

Mon, 25 Apr 2016 19:33:33 +0000

Repaint: When current element’s style (background color, font color, etc.) changes, we only need to re-render the changed element, repaint has smaller impact on browser performance, so generally not considered. 　　Repaint situations: Changing container’s appearance style, etc., like background: black, etc. Changing appearance, not changing layout, not affecting other dom.
Reflow: Process where browser recalculates element positions and geometric structure in document to re-render part or all of document. Because reflow may cause entire dom tree reconstruction, it’s a major performance killer. An element’s reflow causes subsequent reflow of all its child elements and ancestors immediately following it in DOM.