thr3ads.net - Rails spinoffs - Performance Issue with Event.observe() onLoad [Nov 2006]

If this information is useful, please help other people find it:
Share via:

Jean-Philippe Encausse

2006-Nov-22 16:54 UTC

Performance Issue with Event.observe() onLoad

Hi !

I''ve developed lots of JavaScript Modules initialized onLoad.
So I have:

Event.observe(window,   ''load''  , function() {
setTimeout(MyModule.init,1); });

Note: The setTimeout() is done to thread work without hangs.
In general my modules do stuff like:

$$(''TAG.givenClass'').each(function(elm,idx){
  // Init or Instantiate stuff
  // Add new features
}

I think my big issue is that each module will call $$ that will parse
the full HTML page to find custom features.

Under IE6 the HTML page is displayed but the Browser hangs, and I
can''t click anywhere.

1. Do you have the same issues ?

2. Is there a solution to do all initialization with one HTML parsing
? May be like EventSelectors
(http://encytemedia.com/event-selectors) ?

3. Is there another way not to hang the browser ? I thought
setTimeOut() would resolve the problem but it seems that on IE6 It
didn''t.

Best Regards,
Jp

-- 
Jean-Philippe Encausse - R&D Jalios SA
Jp [at] encausse.net - http://www.encausse.com - http://www.jalias.com
GTalk: jp.encausse [at] gmail.com - SMS: sms [at] jp.encausse.net
Mob: +33 6 82 12 56 99 Jalios: +33 1 39 23 92 83 Tel: +33 1 39 18 90 15
Do it Once, Use it Twice ~ Do it Twice, Make It Once

--~--~---------~--~----~------------~-------~--~----~
 You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Ryan Gahl

2006-Nov-22 17:15 UTC

head link

Re: Performance Issue with Event.observe() onLoad

Well, first of all, setTimeout is not a ture threading mechanism. It''s
an
asynchronous-via-interruption mechanism. So no matter what, your UI will
block if the code being executed is heavy enough. It just so happens that
IE6 is much slower at execution than FF so you would need heavier processing
to notice the issue on FF.

As for your dilemma, I suggest employing a lazy loading approach to
decorating your modules with their behavior. In other words, wait for the
very latest moment feasible before wiring up each component''s
behaviors. Is
it completely necessary that every one of them be extended at page load?

For a given component, identify the point of user interaction or application
flow where it is most likely that a given set of behaviors are about to be
needed. Draggables are a classic example. If you have potentially many
elements on the page which are to be Draggable, it becomes quite inefficient
to create all those Draggable objects at page load (taking up time to do so
plus all that memory), when it is highly likely that only a handful of them
will ever end up being dragged by the user. If the mouse never passes over
an element, there is never a need to make it draggable. Apply the same logic
to each component/behavior where appropriate.

On 11/22/06, Jean-Philippe Encausse
<Jp-vcK5r0oTKUrk1uMJSBkQmQ@public.gmane.org>
wrote:>
>
> Hi !
>
> I''ve developed lots of JavaScript Modules initialized onLoad.
> So I have:
>
> Event.observe(window,   ''load''  , function() {
setTimeout(MyModule.init,1);
> });
>
> Note: The setTimeout() is done to thread work without hangs.
> In general my modules do stuff like:
>
> $$(''TAG.givenClass'').each(function(elm,idx){
>   // Init or Instantiate stuff
>   // Add new features
> }
>
> I think my big issue is that each module will call $$ that will parse
> the full HTML page to find custom features.
>
> Under IE6 the HTML page is displayed but the Browser hangs, and I
> can''t click anywhere.
>
> 1. Do you have the same issues ?
>
> 2. Is there a solution to do all initialization with one HTML parsing
> ? May be like EventSelectors
> (http://encytemedia.com/event-selectors) ?
>
> 3. Is there another way not to hang the browser ? I thought
> setTimeOut() would resolve the problem but it seems that on IE6 It
> didn''t.
>
> Best Regards,
> Jp
>
> --
> Jean-Philippe Encausse - R&D Jalios SA
> Jp [at] encausse.net - http://www.encausse.com - http://www.jalias.com
> GTalk: jp.encausse [at] gmail.com - SMS: sms [at] jp.encausse.net
> Mob: +33 6 82 12 56 99 Jalios: +33 1 39 23 92 83 Tel: +33 1 39 18 90 15
> Do it Once, Use it Twice ~ Do it Twice, Make It Once
>
> >
>

-- 
Ryan Gahl
Application Development Consultant
Athena Group, Inc.
Inquire: 1-920-955-1457
Blog: http://www.someElement.com

--~--~---------~--~----~------------~-------~--~----~
 You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Ryan Gahl

2006-Nov-22 17:18 UTC

head link

Re: Performance Issue with Event.observe() onLoad

Oh, and get rid of the $$ calls and use IDs.

*typo -- "true" in first sentence.

On 11/22/06, Ryan Gahl <ryan.gahl-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:>
> Well, first of all, setTimeout is not a ture threading mechanism.
It''s an
> asynchronous-via-interruption mechanism. So no matter what, your UI will
> block if the code being executed is heavy enough. It just so happens that
> IE6 is much slower at execution than FF so you would need heavier
processing
> to notice the issue on FF.
>
> As for your dilemma, I suggest employing a lazy loading approach to
> decorating your modules with their behavior. In other words, wait for the
> very latest moment feasible before wiring up each component''s
behaviors. Is
> it completely necessary that every one of them be extended at page load?
>
> For a given component, identify the point of user interaction or
> application flow where it is most likely that a given set of behaviors are
> about to be needed. Draggables are a classic example. If you have
> potentially many elements on the page which are to be Draggable, it becomes
> quite inefficient to create all those Draggable objects at page load
(taking
> up time to do so plus all that memory), when it is highly likely that only
a
> handful of them will ever end up being dragged by the user. If the mouse
> never passes over an element, there is never a need to make it draggable.
> Apply the same logic to each component/behavior where appropriate.
>
> On 11/22/06, Jean-Philippe Encausse
<Jp-vcK5r0oTKUrk1uMJSBkQmQ@public.gmane.org> wrote:
> >
> >
> > Hi !
> >
> > I''ve developed lots of JavaScript Modules initialized onLoad.
> > So I have:
> >
> > Event.observe(window,   ''load''  , function() {
setTimeout(MyModule.init,1);
> > });
> >
> > Note: The setTimeout() is done to thread work without hangs.
> > In general my modules do stuff like:
> >
> > $$(''TAG.givenClass'').each(function(elm,idx){
> >   // Init or Instantiate stuff
> >   // Add new features
> > }
> >
> > I think my big issue is that each module will call $$ that will parse
> > the full HTML page to find custom features.
> >
> > Under IE6 the HTML page is displayed but the Browser hangs, and I
> > can''t click anywhere.
> >
> > 1. Do you have the same issues ?
> >
> > 2. Is there a solution to do all initialization with one HTML parsing
> > ? May be like EventSelectors
> > (http://encytemedia.com/event-selectors) ?
> >
> > 3. Is there another way not to hang the browser ? I thought
> > setTimeOut() would resolve the problem but it seems that on IE6 It
> > didn''t.
> >
> > Best Regards,
> > Jp
> >
> > --
> > Jean-Philippe Encausse - R&D Jalios SA
> > Jp [at] encausse.net - http://www.encausse.com - http://www.jalias.com
> > GTalk: jp.encausse [at] gmail.com - SMS: sms [at] jp.encausse.net
> > Mob: +33 6 82 12 56 99 Jalios: +33 1 39 23 92 83 Tel: +33 1 39 18 90
15
> > Do it Once, Use it Twice ~ Do it Twice, Make It Once
> >
> > > >
> >
>
>
> --
> Ryan Gahl
> Application Development Consultant
> Athena Group, Inc.
> Inquire: 1-920-955-1457
> Blog: http://www.someElement.com



-- 
Ryan Gahl
Application Development Consultant
Athena Group, Inc.
Inquire: 1-920-955-1457
Blog: http://www.someElement.com


--~--~---------~--~----~------------~-------~--~----~
 You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Jean-Philippe Encausse

2006-Nov-22 18:59 UTC

head link

Re: Performance Issue with Event.observe() onLoad

Yes Thanks, I going to lazy my initialization.
The module that hang the most the browser, is a ContextualMenu

1. I declare for example:

<a href="some url" class="MyCtxMenu">MyLink</a>

or/and

<img class="MyCtxMenu" src="..."/>

2. Somewhere else I declare menus
<ul class="ctxmenu click or rightclick ..."
id="MyCtxMenu"> .... </ul>

3. Then on load I bind ''ctxmenu'' with Objects using
it''s id as class.

4. On click I call a function that may do an AJAX call to get the content.

- So may be, during binding may be I could initialize the menu the first time...
- I have to $$(''.MyCtxMenu'') because I can''t use id
(multiple items)
and don''t know object type.

But doing more initialization on click is a good idea and might be possible.
Thanks !



On 11/22/06, Ryan Gahl <ryan.gahl-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:> Oh, and get rid of the $$ calls and use IDs.
>
> *typo -- "true" in first sentence.
>
>
> On 11/22/06, Ryan Gahl <
ryan.gahl-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
> >
> > Well, first of all, setTimeout is not a ture threading mechanism.
It''s an
> asynchronous-via-interruption mechanism. So no matter what, your UI will
> block if the code being executed is heavy enough. It just so happens that
> IE6 is much slower at execution than FF so you would need heavier
processing
> to notice the issue on FF.
> >
> > As for your dilemma, I suggest employing a lazy loading approach to
> decorating your modules with their behavior. In other words, wait for the
> very latest moment feasible before wiring up each component''s
behaviors. Is
> it completely necessary that every one of them be extended at page load?
> >
> > For a given component, identify the point of user interaction or
> application flow where it is most likely that a given set of behaviors are
> about to be needed. Draggables are a classic example. If you have
> potentially many elements on the page which are to be Draggable, it becomes
> quite inefficient to create all those Draggable objects at page load
(taking
> up time to do so plus all that memory), when it is highly likely that only
a
> handful of them will ever end up being dragged by the user. If the mouse
> never passes over an element, there is never a need to make it draggable.
> Apply the same logic to each component/behavior where appropriate.
> >
> >
> >
> >
> > On 11/22/06, Jean-Philippe Encausse <
Jp-vcK5r0oTKUrk1uMJSBkQmQ@public.gmane.org> wrote:
> > >
> > >
> > > Hi !
> > >
> > > I''ve developed lots of JavaScript Modules initialized
onLoad.
> > > So I have:
> > >
> > > Event.observe(window,   ''load''  , function() {
> setTimeout(MyModule.init,1); });
> > >
> > > Note: The setTimeout() is done to thread work without hangs.
> > > In general my modules do stuff like:
> > >
> > > $$(''TAG.givenClass'').each(function(elm,idx){
> > >   // Init or Instantiate stuff
> > >   // Add new features
> > > }
> > >
> > > I think my big issue is that each module will call $$ that will
parse
> > > the full HTML page to find custom features.
> > >
> > > Under IE6 the HTML page is displayed but the Browser hangs, and I
> > > can''t click anywhere.
> > >
> > > 1. Do you have the same issues ?
> > >
> > > 2. Is there a solution to do all initialization with one HTML
parsing
> > > ? May be like EventSelectors
> > > (http://encytemedia.com/event-selectors) ?
> > >
> > > 3. Is there another way not to hang the browser ? I thought
> > > setTimeOut() would resolve the problem but it seems that on IE6
It
> > > didn''t.
> > >
> > > Best Regards,
> > > Jp
> > >
> > > --
> > > Jean-Philippe Encausse - R&D Jalios SA
> > > Jp [at] encausse.net - http://www.encausse.com -
http://www.jalias.com
> > > GTalk: jp.encausse [at] gmail.com - SMS: sms [at] jp.encausse.net
> > > Mob: +33 6 82 12 56 99 Jalios: +33 1 39 23 92 83 Tel: +33 1 39 18
90 15
> > > Do it Once, Use it Twice ~ Do it Twice, Make It Once
> > >
> > >
> > > Blog: http://www.someElement.com
> >
>
>
>
> --
> Ryan Gahl
> Application Development Consultant
> Athena Group, Inc.
> Inquire: 1-920-955-1457
> Blog: http://www.someElement.com
>
>  >
>

-- 
Jean-Philippe Encausse - R&D Jalios SA
Jp [at] encausse.net - http://www.encausse.com - http://www.jalias.com
GTalk: jp.encausse [at] gmail.com - SMS: sms [at] jp.encausse.net
Mob: +33 6 82 12 56 99 Jalios: +33 1 39 23 92 83 Tel: +33 1 39 18 90 15
Do it Once, Use it Twice ~ Do it Twice, Make It Once

--~--~---------~--~----~------------~-------~--~----~
 You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Jean-Philippe Encausse

2006-Nov-23 11:25 UTC

head link

Re: Performance Issue with Event.observe() onLoad

Well,
I try some enhancement, lazy initialise, ... but I still have trouble with IE
because I don''t know how speed up stuff ?

For instance I want to bind Autocompleter to Input Fields with a given class.
So I must do:

  $$(''INPUT.Autocompleter'').each()
  ...
  new Ajax.Autocompleter()


All my modules do stuff like that ... so many $$() and lots for time
consumption ;-(
- Is there a way to do stuff like behaviors lib ?
- Is there a way
--- to declare a list css path ()
--- bind function to call
--- then do only one page parsing ?

Thanks,
Best Regards

On 11/22/06, Jean-Philippe Encausse
<Jp-vcK5r0oTKUrk1uMJSBkQmQ@public.gmane.org>
wrote:> Yes Thanks, I going to lazy my initialization.
> The module that hang the most the browser, is a ContextualMenu
>
> 1. I declare for example:
>
> <a href="some url"
class="MyCtxMenu">MyLink</a>
>
> or/and
>
> <img class="MyCtxMenu" src="..."/>
>
> 2. Somewhere else I declare menus
> <ul class="ctxmenu click or rightclick ..."
id="MyCtxMenu"> .... </ul>
>
> 3. Then on load I bind ''ctxmenu'' with Objects using
it''s id as class.
>
> 4. On click I call a function that may do an AJAX call to get the content.
>
> - So may be, during binding may be I could initialize the menu the first
time...
> - I have to $$(''.MyCtxMenu'') because I can''t use
id (multiple items)
> and don''t know object type.
>
> But doing more initialization on click is a good idea and might be
possible.
> Thanks !
>
>
>
> On 11/22/06, Ryan Gahl
<ryan.gahl-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
> > Oh, and get rid of the $$ calls and use IDs.
> >
> > *typo -- "true" in first sentence.
> >
> >
> > On 11/22/06, Ryan Gahl <
ryan.gahl-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
> > >
> > > Well, first of all, setTimeout is not a ture threading mechanism.
It''s an
> > asynchronous-via-interruption mechanism. So no matter what, your UI
will
> > block if the code being executed is heavy enough. It just so happens
that
> > IE6 is much slower at execution than FF so you would need heavier
processing
> > to notice the issue on FF.
> > >
> > > As for your dilemma, I suggest employing a lazy loading approach
to
> > decorating your modules with their behavior. In other words, wait for
the
> > very latest moment feasible before wiring up each component''s
behaviors. Is
> > it completely necessary that every one of them be extended at page
load?
> > >
> > > For a given component, identify the point of user interaction or
> > application flow where it is most likely that a given set of behaviors
are
> > about to be needed. Draggables are a classic example. If you have
> > potentially many elements on the page which are to be Draggable, it
becomes
> > quite inefficient to create all those Draggable objects at page load
(taking
> > up time to do so plus all that memory), when it is highly likely that
only a
> > handful of them will ever end up being dragged by the user. If the
mouse
> > never passes over an element, there is never a need to make it
draggable.
> > Apply the same logic to each component/behavior where appropriate.
> > >
> > >
> > >
> > >
> > > On 11/22/06, Jean-Philippe Encausse <
Jp-vcK5r0oTKUrk1uMJSBkQmQ@public.gmane.org> wrote:
> > > >
> > > >
> > > > Hi !
> > > >
> > > > I''ve developed lots of JavaScript Modules
initialized onLoad.
> > > > So I have:
> > > >
> > > > Event.observe(window,   ''load''  ,
function() {
> > setTimeout(MyModule.init,1); });
> > > >
> > > > Note: The setTimeout() is done to thread work without hangs.
> > > > In general my modules do stuff like:
> > > >
> > > >
$$(''TAG.givenClass'').each(function(elm,idx){
> > > >   // Init or Instantiate stuff
> > > >   // Add new features
> > > > }
> > > >
> > > > I think my big issue is that each module will call $$ that
will parse
> > > > the full HTML page to find custom features.
> > > >
> > > > Under IE6 the HTML page is displayed but the Browser hangs,
and I
> > > > can''t click anywhere.
> > > >
> > > > 1. Do you have the same issues ?
> > > >
> > > > 2. Is there a solution to do all initialization with one
HTML parsing
> > > > ? May be like EventSelectors
> > > > (http://encytemedia.com/event-selectors) ?
> > > >
> > > > 3. Is there another way not to hang the browser ? I thought
> > > > setTimeOut() would resolve the problem but it seems that on
IE6 It
> > > > didn''t.
> > > >
> > > > Best Regards,
> > > > Jp
> > > >
> > > > --
> > > > Jean-Philippe Encausse - R&D Jalios SA
> > > > Jp [at] encausse.net - http://www.encausse.com -
http://www.jalias.com
> > > > GTalk: jp.encausse [at] gmail.com - SMS: sms [at]
jp.encausse.net
> > > > Mob: +33 6 82 12 56 99 Jalios: +33 1 39 23 92 83 Tel: +33 1
39 18 90 15
> > > > Do it Once, Use it Twice ~ Do it Twice, Make It Once
> > > >
> > > >
> > > > Blog: http://www.someElement.com
> > >
> >
> >
> >
> > --
> > Ryan Gahl
> > Application Development Consultant
> > Athena Group, Inc.
> > Inquire: 1-920-955-1457
> > Blog: http://www.someElement.com
> >
> >  > >
> >
>
>
> --
> Jean-Philippe Encausse - R&D Jalios SA
> Jp [at] encausse.net - http://www.encausse.com - http://www.jalias.com
> GTalk: jp.encausse [at] gmail.com - SMS: sms [at] jp.encausse.net
> Mob: +33 6 82 12 56 99 Jalios: +33 1 39 23 92 83 Tel: +33 1 39 18 90 15
> Do it Once, Use it Twice ~ Do it Twice, Make It Once
>

-- 
Jean-Philippe Encausse - R&D Jalios SA
Jp [at] encausse.net - http://www.encausse.com - http://www.jalias.com
GTalk: jp.encausse [at] gmail.com - SMS: sms [at] jp.encausse.net
Mob: +33 6 82 12 56 99 Jalios: +33 1 39 23 92 83 Tel: +33 1 39 18 90 15
Do it Once, Use it Twice ~ Do it Twice, Make It Once

--~--~---------~--~----~------------~-------~--~----~
 You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Rails spinoffs - Nov 2006 - Performance Issue with Event.observe() onLoad

Performance Issue with Event.observe() onLoad

Re: Performance Issue with Event.observe() onLoad

Re: Performance Issue with Event.observe() onLoad

Re: Performance Issue with Event.observe() onLoad

Re: Performance Issue with Event.observe() onLoad