Hi...
I got some code running correct, but I''m quite sure it can be written
in a way that it performs better...
I implemented a system that loads rows of a table in batches (using
Anthem ajax). It will be used for print reports with a big amount of
rows.
On the initial load of the page, the first batch is displayed (let''s
say 100 data rows + 1 header row). Then I make a callback to retrieve
the next 100 rows. The problem is that each time I also get the header
row of the table.
The header row has a class name ''HeaderRow''. The data rows
have ''Row''
as classname.
This is the code I''m using now:
var newContainer = new Element(''div'');
newContainer.innerHTML = result.controls[controlID]; // this contains
a html table with the header row and data rows
newContainer.select(''table.grid tr.Row'').each(function(row)
{
oldContainer.insert(row);
});
delete newContainer;
The part that I would like to optimize is the ''select'' of the
data
rows and the looping through each of them to insert them at the bottom
of the datarows already on the page.
I would be happy to hear if and how this can be optimized...
With kind regards,
Manu aka TweeZz.
--~--~---------~--~----~------------~-------~--~----~
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...
In the mean time I was able to speed it up a lot! But I''m still
looking for more... :)
I''m testing with a list of 12134 rows and I''m loading them in
batches
of 1000 rows (13 batches in total).
The changes I made:
- I was scrolling to the bottom of the page each time I batch was
loaded (document.documentElement.scrollTop
document.documentElement.scrollHeight;)
This appeared to take a big part of the cake! The reason I scrolled
down, was to somehow show the user that something is happening. Now I
have a floating DIV which shows the user some information about the
progress.
- After every batch is loaded from server, I need to retrieve the
''tbody'' of the table that''s loaded already. I was
using something
like: $(containerID).down(''table tbody'');
Changing it to $(containerID).down().down().down() was a great spead
up.
- The problem I had with receiving in each batch the header of the
table, I fixed by not rendering the header. Simple :)
- A new batch I can now append to the ''old container'' using
something
like:
var newContainer = new Element(''div'',
{id:''tmpContainer''});
newContainer.innerHTML = result.controls[controlID];
var newTBody = newContainer.down().down().down(); // similar
optimization as retrieving it using newContainer.down(''table
tbody'')
oldContainer.insert(newTBody.innerHTML);
delete newContainer;
(much much faster then looping through every row)
In the first version of the code I started with loading batches at
around 3 seconds.. gradually growing to +- 14 seconds (!!) for the
last full batch (batch nr 12).
Now the retrieving and rendering is quite stable in FF (around 3 - 3.5
seconds).
I''m looking for more optimizations, because on slower computers
it''s
still (very) bad. I have a few ideas thx to firebug...
On Nov 21, 10:28 am, TweeZz
<manu.temmermanuyttenbro...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:> Hi...
>
> I got some code running correct, but I''m quite sure it can be
written
> in a way that it performs better...
> I implemented a system that loads rows of a table in batches (using
> Anthem ajax). It will be used for print reports with a big amount of
> rows.
>
> On the initial load of the page, the first batch is displayed
(let''s
> say 100 data rows + 1 header row). Then I make a callback to retrieve
> the next 100 rows. The problem is that each time I also get the header
> row of the table.
> The header row has a class name ''HeaderRow''. The data
rows have ''Row''
> as classname.
> This is the code I''m using now:
>
> var newContainer = new Element(''div'');
> newContainer.innerHTML = result.controls[controlID]; // this contains
> a html table with the header row and data rows
> newContainer.select(''table.grid
tr.Row'').each(function(row)
> {
> oldContainer.insert(row);});
>
> delete newContainer;
>
> The part that I would like to optimize is the ''select'' of
the data
> rows and the looping through each of them to insert them at the bottom
> of the datarows already on the page.
>
> I would be happy to hear if and how this can be optimized...
> With kind regards,
>
> Manu aka TweeZz.
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---
Well... if we don''t know exactly what your code looks like, so it''s hard to give pointers... If you have some sort of Events attached to the rows, it be be worth it to look into attaching the same event to the tbody and determine there which row was clicked. Not only does that save you attaching it 999 times, you don''t have to re-attach it after you loaded a new batch of rows since the tbody is still in the DOM. I can''t think of anything else without having seen your code. Greetz, Wizz On 23 nov, 07:52, TweeZz <manu.temmermanuyttenbro...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> Hi... > > In the mean time I was able to speed it up a lot! But I''m still > looking for more... :) > I''m testing with a list of 12134 rows and I''m loading them in batches > of 1000 rows (13 batches in total). > > The changes I made: > - I was scrolling to the bottom of the page each time I batch was > loaded (document.documentElement.scrollTop > document.documentElement.scrollHeight;) > This appeared to take a big part of the cake! The reason I scrolled > down, was to somehow show the user that something is happening. Now I > have a floating DIV which shows the user some information about the > progress. > - After every batch is loaded from server, I need to retrieve the > ''tbody'' of the table that''s loaded already. I was using something > like: $(containerID).down(''table tbody''); > Changing it to $(containerID).down().down().down() was a great spead > up. > - The problem I had with receiving in each batch the header of the > table, I fixed by not rendering the header. Simple :) > - A new batch I can now append to the ''old container'' using something > like: > > var newContainer = new Element(''div'', {id:''tmpContainer''}); > newContainer.innerHTML = result.controls[controlID]; > var newTBody = newContainer.down().down().down(); // similar > optimization as retrieving it using newContainer.down(''table tbody'') > oldContainer.insert(newTBody.innerHTML); > delete newContainer; > > (much much faster then looping through every row) > > In the first version of the code I started with loading batches at > around 3 seconds.. gradually growing to +- 14 seconds (!!) for the > last full batch (batch nr 12). > Now the retrieving and rendering is quite stable in FF (around 3 - 3.5 > seconds). > > I''m looking for more optimizations, because on slower computers it''s > still (very) bad. I have a few ideas thx to firebug... > > On Nov 21, 10:28 am, TweeZz <manu.temmermanuyttenbro...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> > wrote:> Hi... > > > I got some code running correct, but I''m quite sure it can be written > > in a way that it performs better... > > I implemented a system that loads rows of a table in batches (using > > Anthem ajax). It will be used for print reports with a big amount of > > rows. > > > On the initial load of the page, the first batch is displayed (let''s > > say 100 data rows + 1 header row). Then I make a callback to retrieve > > the next 100 rows. The problem is that each time I also get the header > > row of the table. > > The header row has a class name ''HeaderRow''. The data rows have ''Row'' > > as classname. > > This is the code I''m using now: > > > var newContainer = new Element(''div''); > > newContainer.innerHTML = result.controls[controlID]; // this contains > > a html table with the header row and data rows > > newContainer.select(''table.grid tr.Row'').each(function(row) > > { > > oldContainer.insert(row);}); > > > delete newContainer; > > > The part that I would like to optimize is the ''select'' of the data > > rows and the looping through each of them to insert them at the bottom > > of the datarows already on the page. > > > I would be happy to hear if and how this can be optimized... > > With kind regards, > > > Manu aka TweeZz.--~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---