HTML and CSS Reference
In-Depth Information
an Object “template” or a specific underlying native implementation of the Object. However, in the general case, the
engine may need to hash strings, perform hash-table lookups, and traverse prototype hierarchies and scopes in order
to find a given piece of stored data.
Garbage collection has traditionally been a source of “long” (up to several hundred milliseconds) pauses
that can be noticeable in interactive JavaScript applications. This situation is now all but resolved as all “major”
JavaScript engines have addressed this issue rather effectively, using strategies such as “generations” to avoid
freezing execution and traversing all active objects on the heap. The evolution of solutions to this problem provides
a good example of the varied and changing nature of the HTML5 implementations. The different JavaScript engines
introduced solutions at different times in their development history, but as of today garbage collection is much less
of an issue in modern browsers.
However, make sure that it has minimal impact on older browsers and browsers running to on low-end
platforms, it is generally advisable to keep total Object count as low as possible and to minimize the number of
temporary Objects being dynamically created at runtime.
As you shall see, Object count has a pronounced effect on memory usage and as a general rule, structures that
use fewer Objects to store the same amount of data are likely to result in more efficient code execution. This principle,
along with an understanding of how data is stored and accessed for some common object types, is fundamental to
designing data structures that support optimal execution across various HTML5 implementations.
Object Hierarchies
The process of flattening data structures can be a very effective way of reducing object count, and thereby memory
overhead and the cost of looking up data. “Flattening” here involves replacing hierarchies or subhierarchies of objects
with single Objects or Arrays. For example, consider the object structure in Listing 4-1.
Listing 4-1.
A Naïve Particle Structure
Particle
{
position:
{
x: <number>
y: <number>
z: <number>
}
velocity:
{
x: <number>
y: <number>
z: <number>
}
}
An immediate gain in memory efficiency (and runtime performance) can be achieved by flattening this structure,
as shown in Listing 4-2.
