I am loving Firefox 11's 3D DOM Viewer!
Let us use it for a mini Google+ case study ...
Today, Firefox announced that they released version 11 of their browser. (I am really excited for version 13 which will come out in three months). I took a screenshot of the 3D DOM viewer of Google+ Stream so we can talk about it below.
So what can we learn from this 3D representation? People say that it wont help web developers solve real-world problems, but I will disagree with that. It will help us know how complex our DOM really is. The deeper the DOM, the heavier the site would be. The heavier the site, the more kilobytes will get transferred, and the rendering would be slower.
For example, look how deep the "Google Chat" is on the left. There are 24 levels of DOM just to create this chat user interface. With basic HTML/CSS knowledge, you could recreate that with just a simple unordered list, it isn't a complex UI component. You can save many bytes of data by optimizing that piece of code. But if you look further, there are many areas that could use optimization.
Imagine we redesign Google+ while taking into account this 3D DOM Viewer, by redesigning many areas in Google+, we can save couple of kilobytes per request. With such a high traffic website, you can save resources and rendering time. And that would be a win win for both Google and Users because speed matters and performance matters.
Some tips for navigation:
- Left click and hold to rotate the page.
- Double click a node to show the html
- Right click and drag to pan
- Scroll to zoom
- Use W, A, S, D to rotate the page
- Use the arrow keys to pan through the page.
- Press ESC to exit
Kudos for the Firefox team! The web got better!