Amazing Page Architecture - Measuring the thickness of the web pages

disclaimer: i'm not css/html expert.

I believe that browsers render web pages in x,y co-ordinates (width, height) however they also keep the z-index. The z-index is somewhat controlled by css code. The performance of the page rendering is also controlled by how deep the content is i.e. depth of the displayable html element. Performance degrades as we move the elements deep inside the container elements. e.g.

<div><div><div><h3>hello world!</h3></div></div></div>

Some javascript operations (which operates on DOM structure internally, e.g. getelementbyid), also get affected by how deep the target element lies as it needs to traverse through the DOM tree.

Figuring out the depth of the element in the static html is easy however when it comes to browser, it all depends on how we generate final html code, using javascript,css as Dynamic Html. In this case the final view of the html codebase can be viewed only by the browser's internal memory.

I tried to play with the browser ('Firefox') tool and found very interesting web page architectures (because they look like amazing colorful physical designs) of google and HN home pages.

feel free to explore the gallery below:

[gallery link="file"]