Reflow visualizations are crazy

by Danny Mendez May 27th 2008

What's this "reflow" stuff mentioned in the title? We're glad you asked because you should probably ~~fully understand~~ know what we're referring to before you watch the vid. Reflow deals with the process by which a browser lays stuff out on a web page -- well, that's a simple way of putting it.

Anyway, the video above is the reflow process of Wikipedia slowed and "visualized". We're unsure how the author of the video captured or simulated the action, but what we do know is it's an interesting way to spend a few seconds. Check out a Google Japan reflow after the jump.

[via DougT]

Tags: browser, reflow, simulation, visual, visualization, visuals

Reader Comments (Page 1 of 1)

Andreas said 6:20PM on 5-27-2008

Would be interesting to compare a table vs. css based layout this way.

kenna said 10:32PM on 5-27-2008

I just don't get it.

Andrew Edahl said 12:21AM on 5-28-2008

sexy.

what you're not getting is the fact that if you had .5 kb/s internet, and a sick nasty graphics card, this is what you'd see.

This is what your browser is doing as you stare at a blank page, waiting for something to pop up.

dgtljunglist said 1:35AM on 5-28-2008

Andrew:

Actually, not quite. What you're basically seeing is just the markup and css styling being parsed. This all happens at once after all markup is downloaded and before any rendering occurs.

Bandwidth has more to do with images/media loading.

Andrew Edahl said 5:51PM on 6-15-2008

Ah... my mistake..
Thanks.

Colin said 2:26PM on 5-28-2008

This totally needs some techno music to go with.

whiskey said 11:50PM on 5-28-2008

Quick... somebody make a Firefox AddOn that does just this!

Imagine being able to understand why your site takes longer to render. This tool would be great to explain to clients what you mean when you say "leaner code means faster pages" or what you do when you do the voodoo that you do.

Featured Time Waster

Civiballs is a beautiful, soothing physics puzzle Time Waster

I have an absolute weakness for physics games, and while Civiballs isn't the strongest physics-based game, what it lacks in the physics department it makes up for a few times over in style and fun.

In Civiballs, you are presented with a few colored balls, and your goal is to get those balls into the same-colored urn on the level. The "civi" part of Civiballs is that there are 3 sets of levels to play, each representing a different civilization. While the civilization doesn't affect gameplay, the artwork for each level is beautifully themed to it's appropriate era.

To play the game, you are given only one tool - a sword with which to cut the chains that are holding the balls. The puzzle part of the game is in figuring out what order, and with what timing to cut each chain. Do it right, and all the right balls end up in the right urns, with no stray balls entering an urn (a no-no). Do it wrong, and you get to start over again.

Civiballs is not terribly deep on gameplay; the entire game can be completed in about 15 minutes. But if you enjoy this type of game, it will be a very enjoyable 15 minutes.

View more Time Wasters