Thanks T.J. for this long answer.
Maybe not many people will face such a performance problem, but this could
be written in documentation, so we can avoid such issues at the beginning.
This could be also good topic for PimpMyCode series at Prototype's blog.
Greetings
Romek
2009/5/13 T.J. Crowder <t...@crowdersoftware.com>
>
> 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. No surprise, then,
> that the browser does it faster when you let it use its native
> implementations of things. :-)
>
> 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. (Prototype's wrappers aren't very costly, but going
> through the DOM methods is, and so they inherit that cost.) 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
> --
> T.J. Crowder
> tj / crowder software / com
> Independent Software Engineer, consulting services available
>
>
> On May 13, 9:12 am, keemor <kee...@gmail.com> wrote:
> > Hi,
> >
> > I'd like to present 3 ways of building ul list and compare the speed
> > of them.
> > I used firebug's profiler on FF3
> >
> > html:
> > <body>
> > <a href="#" id="go">go</a>
> > <ul id="list"></ul>
> > </body>
> > $('go').observe('click',go);
> >
> > First method:
> > Time to build (2122.406ms, 84055 wywołań)
> > function go(e){
> > e.stop();
> > $('list').update();
> > var tpl = new Template ('<li class="#{class}" id="#{id}">#{id}</
> > li>');
> > $R(1, 1000).each(function(i){
> > $('list').insert(tpl.evaluate({
> > class: 'klasa',
> > id: i
> > }));
> > })
> >
> > }
> >
> > Second:
> > Time to build (1754.548ms, 57053 wywołań)
> > function go(e){
> > e.stop();
> > $('list').update();
> > $R(1, 1000).each(function(i){
> > var li = new Element('li', {
> > class: 'klasa',
> > id: i
> > }).update(i);
> > $('list').insert(li);
> > })
> >
> > }
> >
> > Third:
> > Time to build (513.747ms, 30054 wywołań)
> > function go(e){
> > e.stop();
> > var tpl = new Template ('<li class="#{class}" id="#{id}">#{id}</
> > li>');
> > var list = new String;
> > $R(1, 1000).each(function(i){
> > list += tpl.evaluate({class: 'klasa', id: i});
> > })
> > $('list').update(list);
> >
> > }
> >
> > As you can see third method is 4 times faster than first one.
> > In first two methods around 50% of time took
> > extractScripts() & stripScripts() which are used in update and
> insert
> > methods.
> >
> > So if you have more complex RIA with many dynamic elements you can
> > simply improve it significantly :)
> >
>
--
keemor
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---
