Gecko Reflow Visualization - mozilla.org
Why Stack Overflow recommends it
Stack Overflow users link it as a concrete picture of reflow and repaint when answering questions about CSS performance and how browsers lay out and render pages.
Recommended by 1 people across 1 different months, 2011 to 2013.
What it is
A 27-second screen recording from 2009 that visualizes how Mozilla's Gecko rendering engine performs reflow as a page loads, showing layout being recalculated and painted in stages. It is a short demo posted on a personal channel, with no narration described.
What people said
Recommends madr · 2012-03 · Stack Overflow · on “Impact of OOCSS on website performance - shorter css but bulky html with more classes”
By simplifying CSS selectors, keeping the properties DRY and using class attributes in HTML, reflows and repaints will (in theory) be light-weight and therefore increase the smoothness and overall performance of the site. Reflows and repaints occour when Resizing the window Changing the font Adding or removing a stylesheet Content changes, such as a user typing text in an input box Activation of CSS pseudo classes such as :hover (in IE the activation of the pseudo class of a sibling) Manipulating the class attribute A script manipulating the DOM Calculating offsetWidth and offsetHeight Setting a property of the style attribute (above list copied from Reflows & Repaints: CSS Performance makin
Cites Matt Ball · 2011-08 · Stack Overflow · on “How is CSS applied by the browser, and are repaints affected by it?”
How does the browser take the rules in this stylesheet and apply it to the HTML? Typically this is done in a streaming fashion. The browser reads the HTML tags as a stream, and applies what rules it can to the elements it has seen so far. (Obviously this is a simplification.) An interesting related Q&A: Use CSS selectors to collect HTML elements from a streaming parser (e.g. SAX stream) [LINK] (a diversion while I search for the article I have in mind). Ah, here it is: Why we don't have a parent selector [LINK] . We often think of our pages as these full and complete documents full of elements and content. However, browsers are designed to handle documents like a stream. They begin to receiv
Cites Onur Yıldırım · 2013-01 · Stack Overflow · on “Multiples frames are executed in the same browser thread?”
I'm no expert on "how browsers work" but what I predict is: You cannot be sure. It depends on the type of engine (we talk about), browser and it's version... If we are talking about the layout rendering engine (which is generally single threaded); everything is executed within a linear flow in a single thread. Traditionally , it was the main thread of the " browser ", then with IE7 each browser " window " had its own thread. But it keeps changing in time and now it's mostly single thread per " tab ". Within a tab; while a javascript is executing, the rendering engine waits for it to finish. The reason is Javascript engines are traditionally sharing the same single thread (but not necessarily