Game Development Reference
In-Depth Information
A warning about performance
Something that is often overlooked in web design and front-end web development is
performance. While today's major browsers make rendering HTML seem like a trivi-
al task, there is actually a lot of work going on behind the scenes in order to turn a
collection of HTML tags and CSS into a nice looking web page. What's more, as it
becomes easier to add bells and whistles to a web page through rollover effects, drop
down menus, and automatic slideshows, it is easy to forget about what the browser
still needs to do to get that work done.
If you think about an HTML document as a tree structure, where each nested tag is
like a branch in the structure, then it's easy to understand what a deep layout would
look like compared to a shallow layout. In other words, the more nested tags you
have, the deeper the structure.
With that said, always keep in mind that the slightest change in an HTML node (such
as the physical size a text tag takes up on the page changing because a hover effect
caused the text to become bold, thus taking a few extra pixels on the screen) may trig-
ger what is called a reflow, which essentially will cause the browser to perform many
calculations on each and every branch (tag) in your HTML structure, because it will
need to recalculate where each element needs to go, so it can redraw the page prop-
erly.
The more shallow you can make your HTML structures, the less calculations the
browser will need to make every time it needs to redraw the page, thus causing
a smoother experience. While the argument that deeply nested
<div>
tags cause
HTML files to become harder to read and maintain can be subjective, there is no ar-
guing that deep HTML structures perform much worse than flatter alternatives.
