File Under: Web Basics

Video: Visualizing How Your Browser Sees the Web

Ever wondered what a web page looks like to a browser? When a browser renders a page it parses through all the HTML, CSS and JavaScript commands at lightning speed to display the pages you see, but slowing it all down offers a fascinating look at how a browser “thinks.”

The video above show how Mozilla’s reflow tool works. For the unfamiliar, here’s how Mozilla explains the reflow process:

Reflow is the process by which the geometry of the layout engine’s formatting objects are computed. The HTML formatting objects are called frames: a frame corresponds to the geometric information for (roughly) a single element in the content model; the frames are arranged into a hierarchy that parallels the containment hierarchy in the content model. A frame is rectangular, with width, height, and an offset from the parent frame that contains it.

Sounds rather dry and boring, which is what makes the video visualization even more amazing.

The videos were highlighted by blogger Doug T, who discovered them on Google video. The videos are part of a talk at the recent Mozilla 24 event in Tokyo. A series of videos from the talk are available as well (in Japanese). There’s also a few more visualization videos available as well.

A commenter on the original post also points out Matthew Buchanan’s TimeLapse CSS tool, which uses JavaScript to slowdown page rendering and show how page elements fall into place.

Although it may not be technically possible, the visualizations would make for a great Firefox add-on.

[via Google Blogoscoped]

See Also: