Gecko Reflow, Awesome Visualization of Web Page Layout
Gecko Back Story
The Gecko engine is the second most popular layout engine after Trident used by Microsoft’s IE. However, Gecko is open source, and used in all Mozilla software, most notable of which is of course Firefox. Many web browsers use this engine including Firefox, Camino, Flock, SeaMonkey, Galeon, Epiphany, K-Meleon, Kazehakase, Skipstone, and the newly discontinued Netscape. It runs on most operating systems including Microsoft Windows, Mac OS X, BSD based OSes, Linux, Solaris, OpenVMS, OS/2 and AIX.
Gecko Layout
Gecko’s CSS layout of the page is done using rendering objects known as frames — not to be confused with HTML frames or iframes — that closely parallel the DOM tree. Three main operatoions are performed on frames:
- frame construction (building the tree of objects)
- reflow (determining their positions; should perhaps have been called Layout instead), and
- painting (drawing them on the screen) (the code to determine targets for events is closely connected to the painting code, so it can be considered part of this area).
More Info on Reflow:
Reflow Refactoring
Table reflow optimization
Gecko Reflow Videos
These awesome videos deal with the last two steps, I think, since the first step is behind the scenes.
Gecko Reflow of Wikipedia.org
Google Video link: Gecko Reflow of Wikipedia.org
Gecko Reflow of Mozilla.org
Google Video link: Gecko Reflow of Mozilla.org
Gecko Reflow of Google.co.jp
Google Video link: Gecko Reflow of Google.co.jp
It is interesting to note that it reflows the page twice for wikipedia.org and mozilla.org but not for Google. I don’t know what that means, but I’m sure it contributes to page load time. Perhaps this happens because Google doesn’t use CSS nor JS, or perhaps it is because Google doesn’t have a scrollbar, and the other two do? Now, if only someone made a Firefox extension of this!
I came across these videos on Google Video, but after more googling I’m inclined to think Shibuya and the developer’s name is Satoshi Ueyamais. (thanks Gen Kanai) the guy who made these videos but because the page is in Japanese, I can’t be sure. Please, if someone can read it leave a comment to confirm.
VIA: gyu.que.jp
Related PostsFirefox 4.0 Download?...
You’re currently reading “Gecko Reflow, Awesome Visualization of Web Page Layout”, an entry on redivide
- Published:
- 25.05.08 / 7pm
- Post Navigation:
- « How to Fix the Firefox Grey Bar Below the Status Bar
Google Chrome Browser Review »
