Game Tutorial, has.js, getElementsByTagName Performance

2010-10-01 00:00:00 +0100 by Alex R. Young

Tutorial: Simple Game with HTML5 Canvas

Michal Budzynski has written another HTML5 game tutorial. This one is a
five part series: here's part

These tutorials are based on Michal's
10k entry, and cover set up, animation, physics, controls, collisions, scrolling, and game states.


has.js by Peter E Higgins, tentatively released under three licenses (Academic Free License, New
BSD License, and the MIT License), is a library of tests for feature
detection. The author's first example illustrates the intended usage:

mylibrary.trim = has('string-trim') ? function(str) {
    return (str || '').trim();
} : function(str) {
    /* Implement trim here */

Tests can be added like this:

has.add("some-test-name", function(global, document, anElement) { });

Higgins mentions that it's likely that people will use portions of the
library rather than the entire thing. The project doesn't have a build
script yet, but I imagine in future their build script will allow the
required tests to be specified to.

Take a look at the tests in
detect/ to get a feel for the library.

Why is getElementsByTagName() faster that querySelectorAll()?

In Why is getElementsByTagName() faster that

Nicholas C. Zakas discusses the performance characteristics of the
NodeList object for static and live NodeLists.

The author refers to WebKit source code, so he's dug into the issue
pretty deeply:

Live NodeList objects can be created and returned faster by the browser because they don’t have to have all of the information up front while static NodeLists need to have all of their data from the start. To hammer home the point, the WebKit source code has a separate source file for each type of NodeList: DynamicNodeList.cpp and StaticNodeList.cpp.