Game Tutorial, has.js, getElementsByTagName Performance
Tutorial: Simple Game with HTML5 Canvas
Michal Budzynski has written another HTML5 game tutorial. This one is a five part series: here’s part one.
These tutorials are based on Michal’s 10k entry, and cover set up, animation, physics, controls, collisions, scrolling, and game states.
has.js
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 querySelectorAll()? 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.
