Rails spinoffs - Jan 2008 - Element.up using element.ancestors() -- Please help with the logic

It''s me.  I realize it''s me, but I just can''t wrap my
brain around it.

So I have 120-ish form fields, and for each of the form fields I need
to go up to the field''s container div.

I replaced a large chunk of DOM traversal code (recursive checks of
parentNode until the correct condition is reached -- selector is
matched -- approximately 2 iterations) with the Prototype code of
$(element).up(''div.field_control'')

That line looks about right.

So (expect the so, it''s a story) performance on the form took a huge
hit (processing time increased by factor of 5 to 10).

As I stepped through the code, I saw that Element.up used
element.ancestors(), and ... well, it must be me.

Analogy:  I want to find your (yes, YOUR) most recent ancestor whose
name was Joe.  $(you).up(''joe'') -- right?  Yes, given names
are
tagNames.
It turns out that the procedure is to find all of your (I''m still
talking about you) ancestors up to Adam (it''s just a name; somebody
had to kick it off) and then iterate through them to find the most
recent match.

I don''t suppose there should be a way to shortcut the recursion to
actually stop when a match is found instead of (in my case) 12 more
recursion instances so that performance doesn''t take a sevenfold hit
(2 to 14 recursion instances) without sacrificing the beauty of the
syntax.  I sure wish there was though.

I''m sure it''s just something I''m missing, and I am
fully ready to
accept a logical explanation.  I just need some help.
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---

It''s actually worst than that.  It searches the entire DOM for
''joe'' and
then loops through all ''joes'' that are returned to see if they
are one
of the ancestors.  In Firefox, this is pretty fast (because it uses 
Xpath) but in IE, when there are a lot of elements it gets really slow.

If you know the exact ancestor count, you could do $(you).up(1).  This 
is much faster than $(you).up(''joe'').

Trevan

Peter wrote:
> It''s me.  I realize it''s me, but I just can''t
wrap my brain around it.
> 
> So I have 120-ish form fields, and for each of the form fields I need
> to go up to the field''s container div.
> 
> I replaced a large chunk of DOM traversal code (recursive checks of
> parentNode until the correct condition is reached -- selector is
> matched -- approximately 2 iterations) with the Prototype code of
> $(element).up(''div.field_control'')
> 
> That line looks about right.
> 
> So (expect the so, it''s a story) performance on the form took a
huge
> hit (processing time increased by factor of 5 to 10).
> 
> As I stepped through the code, I saw that Element.up used
> element.ancestors(), and ... well, it must be me.
> 
> Analogy:  I want to find your (yes, YOUR) most recent ancestor whose
> name was Joe.  $(you).up(''joe'') -- right?  Yes, given
names are
> tagNames.
> It turns out that the procedure is to find all of your (I''m still
> talking about you) ancestors up to Adam (it''s just a name;
somebody
> had to kick it off) and then iterate through them to find the most
> recent match.
> 
> I don''t suppose there should be a way to shortcut the recursion to
> actually stop when a match is found instead of (in my case) 12 more
> recursion instances so that performance doesn''t take a sevenfold
hit
> (2 to 14 recursion instances) without sacrificing the beauty of the
> syntax.  I sure wish there was though.
> 
> I''m sure it''s just something I''m missing, and I
am fully ready to
> accept a logical explanation.  I just need some help.
> > 

--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---

Get latest version of prototype (1.6.0.1+) - all traversal methods
have gained 2x/3x performance increase.
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---

1.6.0.1 still uses element.ancestors() ...
The code is very elegant, but imvho a performance gain could be
achieved by checking the selector before all the ancestors are
gathered.

On Jan 22, 11:06 pm, kangax
<kan...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:
> Get latest version of prototype (1.6.0.1+) - all traversal methods
> have gained 2x/3x performance increase.
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---

I have noticed huge performance problems in IE when doing what should
be a simple operation, like: $$(''body'')

It''s instantaneous in Firefox, and dog-slow in IE.

-justin

--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---

Peter,

please feel free to submit a patch with benchmarks.

Thanks!

Tobie

On Jan 23, 6:21 pm, "Justin Perkins"
<justinperk...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:
> I have noticed huge performance problems in IE when doing what should
> be a simple operation, like: $$(''body'')
>
> It''s instantaneous in Firefox, and dog-slow in IE.
>
> -justin
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---

On 23/01/2008, Justin Perkins
<justinperkins-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:
>
> I have noticed huge performance problems in IE when doing what should
> be a simple operation, like: $$(''body'')
>
> It''s instantaneous in Firefox, and dog-slow in IE.
>
> -justin
I agree.

I am using ...

if (!Prototype.Browser.IE) {
	$$(''.MTABLE tbody tr'').invoke(''observe'',
''mouseover'', function(e) {
		e.element().up(''tr'').down(''th
span'').addClassName(''valVEH'');
	}).invoke(''observe'', ''mouseout'',
function(e) {
		e.element().up(''tr'').down(''th
span'').removeClassName(''valVEH'');
	});
}

to add a highlight to a span in a TH when the mouse moves over
anything in that row.

Works as expected and more or less instantly in FF. In IE it takes 2
seconds (more or less).


How do I generate timings?


-- 
-----
Richard Quadling
Zend Certified Engineer : http://zend.com/zce.php?c=ZEND002498&r=213474731
"Standing on the shoulders of some very clever giants!"

--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---

Hi,

Google for event delegation, and code something like this:

$$(''table.MTABLE'').each(function(table) {
  table.observe(''mouseover'', function(event) {
    var element = event.findElement(''tr'');
    if (!element) return;
    element.up(''tr'').down(''th
span'').addClassName(''valVEH''); //not
sure about this withot seeing the HTML
    event.stop();
  });

    table.observe(''mouseout'', function(event) {
    var element = event.findElement(''tr'');
    if (!element) return;
    element.up(''tr'').down(''th
span'').removeClassName(''valVEH''); //not
sure about this withot seeing the HTML
    event.stop();
  });
});

Also, as a sidenode, perf is greatly improved by specifying the
tagName of the element you''re selecting whenever possible.

So $$(''div.bar'') is a lot faster than
$$(''.bar'');

Best,

Tobie

Richard Quadling wrote:
> On 23/01/2008, Justin Perkins
<justinperkins-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
> >
> > I have noticed huge performance problems in IE when doing what should
> > be a simple operation, like: $$(''body'')
> >
> > It''s instantaneous in Firefox, and dog-slow in IE.
> >
> > -justin
>
> I agree.
>
> I am using ...
>
> if (!Prototype.Browser.IE) {
> 	$$(''.MTABLE tbody
tr'').invoke(''observe'', ''mouseover'',
function(e) {
> 		e.element().up(''tr'').down(''th
span'').addClassName(''valVEH'');
> 	}).invoke(''observe'', ''mouseout'',
function(e) {
> 		e.element().up(''tr'').down(''th
span'').removeClassName(''valVEH'');
> 	});
> }
>
> to add a highlight to a span in a TH when the mouse moves over
> anything in that row.
>
> Works as expected and more or less instantly in FF. In IE it takes 2
> seconds (more or less).
>
>
> How do I generate timings?
>
>
> --
> -----
> Richard Quadling
> Zend Certified Engineer :
http://zend.com/zce.php?c=ZEND002498&r=213474731
> "Standing on the shoulders of some very clever giants!"
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---

Ha. It seems that using transparency in IE for the backgrounds on
td/th, REALLY REALLY slows the rendering down.

My timings are pretty much the same on IE and FF.


On 24/01/2008, Tobie Langel
<tobie.langel-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:
>
> Hi,
>
> Google for event delegation, and code something like this:
>
> $$(''table.MTABLE'').each(function(table) {
>   table.observe(''mouseover'', function(event) {
>     var element = event.findElement(''tr'');
>     if (!element) return;
>     element.up(''tr'').down(''th
span'').addClassName(''valVEH''); //not
> sure about this withot seeing the HTML
>     event.stop();
>   });
>
>     table.observe(''mouseout'', function(event) {
>     var element = event.findElement(''tr'');
>     if (!element) return;
>     element.up(''tr'').down(''th
span'').removeClassName(''valVEH''); //not
> sure about this withot seeing the HTML
>     event.stop();
>   });
> });
>
> Also, as a sidenode, perf is greatly improved by specifying the
> tagName of the element you''re selecting whenever possible.
>
> So $$(''div.bar'') is a lot faster than
$$(''.bar'');
>
> Best,
>
> Tobie
>
> Richard Quadling wrote:
> > On 23/01/2008, Justin Perkins
<justinperkins-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
> > >
> > > I have noticed huge performance problems in IE when doing what
should
> > > be a simple operation, like: $$(''body'')
> > >
> > > It''s instantaneous in Firefox, and dog-slow in IE.
> > >
> > > -justin
> >
> > I agree.
> >
> > I am using ...
> >
> > if (!Prototype.Browser.IE) {
> >       $$(''.MTABLE tbody
tr'').invoke(''observe'', ''mouseover'',
function(e) {
> >               e.element().up(''tr'').down(''th
span'').addClassName(''valVEH'');
> >       }).invoke(''observe'',
''mouseout'', function(e) {
> >               e.element().up(''tr'').down(''th
span'').removeClassName(''valVEH'');
> >       });
> > }
> >
> > to add a highlight to a span in a TH when the mouse moves over
> > anything in that row.
> >
> > Works as expected and more or less instantly in FF. In IE it takes 2
> > seconds (more or less).
> >
> >
> > How do I generate timings?
> >
> >
> > --
> > -----
> > Richard Quadling
> > Zend Certified Engineer :
http://zend.com/zce.php?c=ZEND002498&r=213474731
> > "Standing on the shoulders of some very clever giants!"
> >
>

-- 
-----
Richard Quadling
Zend Certified Engineer : http://zend.com/zce.php?c=ZEND002498&r=213474731
"Standing on the shoulders of some very clever giants!"

--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---