javascript code optimization
Locked
 
|
Hi
all,
We've been having
some problems loading xforms with many elements in it (> 2000) into IE (6 was
worse than 7, but both had problems). We tracked the issue down to the fact that
IE doesn't allow window.addEventListener() and has to add an eventlistener to
every element throught the yahoo library. The problem with the code seems to be
the for-loop itself:
for (var j = 0; j
< form.elements.length; j++) {
var element = form.elements[j]; ORBEON.xforms.Init.registerListenersOnFormElement((element)); } the
"form.elements.length" gets evaluated on every iteration which causes many cpu
cycles to be consumed and slows the loading of the page considerably for large
pages (35 seconds load time). A simple solution would be to simply extract the
"form.elements.length" from the loop like:
var elementCount = form.elements.length;
for (var j = 0; j
< elementCount; j++) {
var element
= form.elements[j];
ORBEON.xforms.Init.registerListenersOnFormElement((element)); }
or even change the
for-loop to a while-loop, but the speedup for this extra change is
minimal
var iter =
form.elements.length-1;
if (iter >= 0) { do { var element = form.elements[iter]; ORBEON.xforms.Init.registerListenersOnFormElement((element)); } while(--iter >= 0); } These changes
reduce load-time from 35 seconds to 15 seconds in IE6. I hope these changes can make
it into the production code since now we have overridden the xforms.js file and
need to remember that we changed it whenever we update
ops/orbeon.
Thanks in
advance,
Gerrit
-- You receive this message as a subscriber of the [hidden email] mailing list. To unsubscribe: mailto:[hidden email] For general help: mailto:[hidden email]?subject=help OW2 mailing lists service home page: http://www.ow2.org/wws |
Re: javascript code optimization
|
Administrator
|
Gerrit,
On Jan 21, 2008 3:43 AM, Gerrit Germis <[hidden email]> wrote: > the "form.elements.length" gets evaluated on every iteration which causes > many cpu cycles to be consumed and slows the loading of the page > considerably for large pages (35 seconds load time). A simple solution would > be to simply extract the "form.elements.length" from the loop like: > > var elementCount = form.elements.length; > for (var j = 0; j < elementCount; j++) { > var element = form.elements[j]; > ORBEON.xforms.Init.registerListenersOnFormElement((element)); > } which it that significant. I have done some testing here on a form with 250 controls, and that loop takes about 100 ms on IE with the code we have now and about 80 ms with your change. So we gain 20 ms by avoiding 250 calls to form.elements.length. Those are milliseconds, not seconds. Which leads me to wonder: how many form element do you have on your form? This is for sure an improvement. And you are right: since form.elements.length potentially calls some DOM code, we should avoid doing that. I checked in this change (included the corresponding entry in the bug base for reference). When a get a chance could you double check that this change really gets you the performance improvement you are talking about? http://forge.objectweb.org/tracker/index.php?func=detail&aid=308323&group_id=168&atid=350207 Thank you for sharing this performance improvement! Alex -- Orbeon Forms - Web 2.0 Forms, open-source, for the Enterprise http://www.orbeon.com/ -- You receive this message as a subscriber of the [hidden email] mailing list. To unsubscribe: mailto:[hidden email] For general help: mailto:[hidden email]?subject=help OW2 mailing lists service home page: http://www.ow2.org/wws |
RE: javascript code optimization
|
|
In reply to this post by Gerrit Germis-2
Hi Alex,
Thanks for taking an interest in this issue. I can confirm that I gained about 15 seconds on a page that would otherwise take about 40 seconds to load. The page is an editable invoice. A single invoice line can have up to 15 xform elements (mostly textareas and checkboxes) in it. An invoice can have any number of lines. The bigger invoices can have over 200 lines, so that's about 3000 editable xform elements on a single page. The client we are using this project on uses IE6 internally. I also added this comment to the tracker link you posted Thanks again, Gerrit -----Original Message----- From: [hidden email] [mailto:[hidden email]] On Behalf Of Alessandro Vernet Sent: Tuesday, January 22, 2008 20:21 PM To: [hidden email] Subject: Re: [ops-users] javascript code optimization Gerrit, On Jan 21, 2008 3:43 AM, Gerrit Germis <[hidden email]> wrote: > the "form.elements.length" gets evaluated on every iteration which > causes many cpu cycles to be consumed and slows the loading of the > page considerably for large pages (35 seconds load time). A simple > solution would be to simply extract the "form.elements.length" from the loop like: > > var elementCount = form.elements.length; for (var j = 0; j < > elementCount; j++) { > var element = form.elements[j]; > ORBEON.xforms.Init.registerListenersOnFormElement((element)); > } I am surprised the repeated use of form.elements.length have an impact which it that significant. I have done some testing here on a form with 250 controls, and that loop takes about 100 ms on IE with the code we have now and about 80 ms with your change. So we gain 20 ms by avoiding 250 calls to form.elements.length. Those are milliseconds, not seconds. Which leads me to wonder: how many form element do you have on your form? This is for sure an improvement. And you are right: since form.elements.length potentially calls some DOM code, we should avoid doing that. I checked in this change (included the corresponding entry in the bug base for reference). When a get a chance could you double check that this change really gets you the performance improvement you are talking about? http://forge.objectweb.org/tracker/index.php?func=detail&aid=308323&grou p_id=168&atid=350207 Thank you for sharing this performance improvement! Alex -- Orbeon Forms - Web 2.0 Forms, open-source, for the Enterprise http://www.orbeon.com/ -- You receive this message as a subscriber of the [hidden email] mailing list. To unsubscribe: mailto:[hidden email] For general help: mailto:[hidden email]?subject=help OW2 mailing lists service home page: http://www.ow2.org/wws |
Re: javascript code optimization
|
Administrator
|
Gerrit,
On Jan 22, 2008 12:32 PM, Gerrit Germis <[hidden email]> wrote: > Thanks for taking an interest in this issue. I can confirm that I gained > about 15 seconds on a page that would otherwise take about 40 seconds to > load. The page is an editable invoice. A single invoice line can have up > to 15 xform elements (mostly textareas and checkboxes) in it. An invoice > can have any number of lines. The bigger invoices can have over 200 > lines, so that's about 3000 editable xform elements on a single page. > The client we are using this project on uses IE6 internally. 3000 editable elements on a single page (!!)... I see. :) Alex -- Orbeon Forms - Web 2.0 Forms, open-source, for the Enterprise http://www.orbeon.com/ -- You receive this message as a subscriber of the [hidden email] mailing list. To unsubscribe: mailto:[hidden email] For general help: mailto:[hidden email]?subject=help OW2 mailing lists service home page: http://www.ow2.org/wws |
«
Return to Orbeon Forms community mailing list
|
1 view|%1 views
| Free forum by Nabble | Edit this page |