HTML and CSS Reference
In-Depth Information
Chapter 4
Efficient JavaScript Data Structures
Duncan Tebbs, Senior Software Engineer, Turbulenz Limited
Efficient use of system resources is essential to most game applications, to ensure that the game runs correctly and
as smoothly as possible across a range of devices and browsers. Here, the term “resources” can refer to available
memory, CPU execution time, or other processing or storage units in the system. Although JavaScript can be
considered a rather high-level language, the data structures employed by JavaScript application code can significantly
impact upon resource usage.
Much of the information here is taken from the significant amount of research and engineering manpower
that the Turbulenz team has invested in high performance HTML5. As an open-source, proven engine that boasts
a portfolio including several fully playable 2D and 3D games, the Turbulenz engine (
turbulenz.com
)
represents
a valuable resource for developers seeking to learn more about HTML5 and understand what is possible with
modern web technology.
For many experienced HTML5 engineers the material presented may need little or no explanation. However, the
authors hope this chapter will serve as an introduction for newcomers, and as a reference and explanation of some
fundamental optimization concepts.
As with all optimization, it is important to measure the effect of code and data changes on memory and execution
time. This is something of a universal mantra when writing and maintaining high-performance code, and it is even
more important in the case of JavaScript and the browsers. Execution performance and memory usage characteristics
can vary wildly across JavaScript engines and HTML5 implementations, and all of the major browsers are changing
rapidly as their developers continue to aggressively address the bottlenecks experienced by high performance
interactive applications.
For this reason, it is highly recommended that developers measure performance over a range of target browser
and versions, and keep track of how new browser releases affect their code. As another consequence of the variety
and changing nature of browser performance characteristics, this article intentionally avoids mentioning specific
JavaScript engines or browsers, and concentrates on general strategies for efficiently handling application data in
HTML5 applications.
The Importance of Data Structures
Almost all variables stored in the JavaScript engine require more memory than the equivalent native data structure.
The JavaScript engines implement numbers as either 32-bit signed integers (where frequently only 31-bits are used
for the integer value) or 64-bit floating-point numbers. JavaScript Objects must behave like dynamic key-value
dictionaries, with all of the (non-trivial) memory and execution overhead required to support this system.
All Object properties are referenced by string name. Modern JavaScript engines use a variety of techniques to
reduce the cost of retrieving and storing data by name, and in many cases these can be highly effective. Particularly
in the case where the engine can correctly predict the “type” of object being dereferenced, the cost of storing and
retrieving data can be comparable to native code. Here “type” may refer to a set of known properties that make up
