What's a simpleton ?
I have a T61p thinkpad, so a pretty modern machine with a CPU of
today, using late version browsers, and walking the DOM is very
noticeable the pauses drive me crazy.
So yes, I think it's still very much an issue.
Look, these are the times to walk a tree of 1288 (<span>) elements.
Kofler is right in that as walkTheDom walks into all kinds of nodes
it's a bit slower. But I doubt very much that delays of between a
couple ms and a couple of tens of ms (in the worst case) could drive
nobody crazy. Unless your code walksTheDOM viciously or the trees it
walks are insanely large.
Chrome 1.0.154.53 on Windows NT
walkTheDomClassic 271 (3.69ms)
walkTheDomNew 450 (2.22ms)
Safari 3.2.1 on Windows NT
walkTheDomClassic 209 (4.78ms)
walkTheDomNew 301 (3.32ms)
Opera 9.64 on Windows NT
walkTheDomClassic 151 (6.62ms)
walkTheDomNew 320 (3.13ms)
MSIE 8.0 on Windows NT
walkTheDomClassic 28 (35.71ms)
walkTheDomNew 56 (17.86ms)
Firefox 3.0.6 on Windows NT
walkTheDomClassic 58 (17.24ms)
walkTheDomNew 103 (9.71ms)
Safari 4.0 on Intel Mac OS X 10_5_6
walkTheDomClassic 280 (3.57ms)
walkTheDomNew 299 (3.34ms)
Firefox 2.0.0.20 on Intel Mac OS X
walkTheDomClassic 13 (76.92ms)
walkTheDomNew 33 (30.3ms)
Firefox 2.0.0.9 on Intel Mac OS X
walkTheDomClassic 13 (76.92ms)
walkTheDomNew 31 (32.26ms)
Opera 9.64 on Intel Mac OS X
walkTheDomClassic 65 (15.38ms)
walkTheDomNew 103 (9.71ms)
Firefox 3.0.8 on Intel Mac OS X 10.5
walkTheDomClassic 38 (26.32ms)
walkTheDomNew 69 (14.49ms)
The test code is:
function walkTheDomClassic (node, f) {
f(node);
node = node.firstChild;
while (node) {
walkTheDomClassic(node, f);
node = node.nextSibling;
}
}
function walkTheDomNew (node, f) {
var set= node.getElementsByTagName('*');
var length= set.length;
while (length--) {
f(set[length]);
}
}
var flipFlop= true;
function f (e) {
if (e.style && e !== container) {
e.className= (flipFlop= !flipFlop) ? "" : "bold";
}
}
http://jorgechamorro.com/cljs/052/