On May 13, 11:49 pm, "T.J. Crowder" <t...@crowdersoftware.com> wrote:
> Hi,
>
> > As you can see third method is 4 times faster than first one.
>
> Yes. The third method largely evaluates to setting the innerHTML
> property of the list element, which uses the browser's built-in HTML
> processing. Reading HTML strings and quickly turning those into the
> displayed result is fundamentally what browsers *do*, and they're
> highly optimized to do it as quickly as possible (people are endlessly
> comparing browsers' page rendering times). They can do it working
> directly on their internal structures, whereas if you create and
> append elements via DOM methods, you're working through a third-party
> API layered on top of the browser's internals.
I think that is missguided. The source of both HTML and DOM
specifications is the W3C, so the same "third-party" for both. In the
case of innerHTML, the string must first be parsed, then browser-
native methods called. The DOM methods should have direct access to
those methods, and therefore should be at least as fast. In modern
browsers, innerHTML and DOM are about the same speed.
> No surprise, then,
> that the browser does it faster when you let it use its native
> implementations of things. :-)
Big surprise, actually, since they are both "native" to the browser.
In the days when Microsoft was developing IE 6, they don't seem to
have had any interest in supporting W3C methods efficiently, but made
their proprietary methods quite fast. Other browsers followed suit so
as not to be left behind. In Safari (and likely other WebKit based
browsers), DOM and innerHTML have always been pretty much the same
speed, with one faster than the other depending on the version.
> I did a similar exercise a while back (here[1]), comparing DOM methods
> vs. Prototype's wrappers for DOM methods vs. concatenating a string
> and setting innerHTML. The last method, innerHTML, wins on every
> browser I tried, hands down, usually by at least one order of
> magnitude.
"An order of magnitude" suggests some power of 10. I don't see it,
even in IE, unless you use very inefficient code (see below). A
factor of 4 or 5 perhaps, for IE, and 1 to 3 for others.
> (Prototype's wrappers aren't very costly,
They are more costly in IE than any other browser (the $ function adds
50-odd properties to elements every time it's called) making its DOM
performance even worse.
> but going
> through the DOM methods is, and so they inherit that cost.)
Sorry, that makes no sense. Prototype.js is one of the slowest modern
"frameworks"[1]. If you mean calling Prototype.js functions as
wrappers for innerHTML is faster than plain old javascript (POJS),
then you may have a point in IE, but not in other browsers, and your
test code doesn't show it.
> The
> smallest discrepancy, IIRC, is on Chrome ("only" about four times
> faster) -- but then, Chrome is freakishly fast at nearly
> everything. :-)
>
> [1]http://pastie.org/476791
The comment in the code that you can't use the DOM to construct a
table in IE is false.
The POJS code is inefficient, it is even dependent on Prototpye's
insert() method, try the updated function below. For 100 rows and
cells, I get:
Firefox:
DOM took 772ms
[Prototype] DOM took 8505ms
HTML took 374ms
IE 6 gives:
DOM took 2109ms
[Prototype] DOM took 40168ms
HTML took 3125ms
That's right, DOM is *faster* than your HTML method in IE 6. Note the
increadibly slow performance for Prototype.js.
I don't have Safari or Chrome available right now, but I'll bet
they're both significantly faster than Firefox or IE 6.
var numRows = 100;
var numCols = 100;
function useDOMDirect() {
var start = new Date();
var table = document.createElement('table');
var tbody = document.createElement('tbody');
var otr = document.createElement('tr');
var otd = document.createElement('td');
var frag = document.createDocumentFragment();
table.appendChild(tbody);
for (var row = 0; row < numRows; row++) {
tr = otr.cloneNode(false);
frag.appendChild(tr);
for (var col = 0; col < numCols; col++) {
td = otd.cloneNode(false);
td.appendChild(document.createTextNode('Row ' + row + ',
col ' + col));
tr.appendChild(td);
}
}
tbody.appendChild(frag);
document.getElementById('targetTable').appendChild(table);
var end = new Date();
log('DOM took ' + (end - start) + 'ms');
}
1. <URL: http://dante.dojotoolkit.org/taskspeed/ >
--
Rob
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---
