HTML and CSS Reference
The compromises of going with DOM:
No rotation of elements—fine on some browsers, a massive slowdown on others.
No extensive particle effects—all would have to be prerendered.
No visual effects via Canvas.
Not really engaging with HTML5 features for rendering.
So long as simple rules are adhered to, great performance can be achieved with DOM manipulation
(see Figure 14-4 ). Key is that virtually every time the DOM is touched, a redraw is initiated. 4 A tip here is to update
only on the condition that a relevant parameter has actually changed.
Figure 14-4. The big reveal
Key to any user experience is how intuitive an interface is as well as how responsive. Many mobile web touch-screen
experiences feel a little “laggy.” This is likely to be the result of the use of gesture events. For any gesture to be recognized,
most browsers need to wait long enough (300ms) to determine if a double tap has been captured.
As a user, when I press a button, my expectation is for an immediate response—300ms can feel like a lifetime and
certainly does so in game when timing is critical. Preventing the default action on all gesture/touch events can step
around native deficiencies and allow the system to react immediately and under its own volition:
event.preventDefault ? event.preventDefault() : event.returnValue = false;
I have seen in many other games the use of multiple event listeners on a page, one for each button or
interactive ED: engines. My preference is to listen for one key press/mouse interaction/touch per page and then
interpret that action.
4 Minimizing the DOM manipulation - ( http://swingpants.com/2012/02/08/html5-game-dev-dom-manipulation-its-