FlexTable population, very faster in Firefox and dead slow in IE. why?

51 views
Skip to first unread message

Suren

unread,
Apr 2, 2009, 3:36:41 AM4/2/09
to Google Web Toolkit
Hi All,

I am populating 100x100 cells in Flextable from database.

Its taking 10 mins in IE to display the table, but only less than 10
secs in Firefox.

I am wondering why such extreme difference exists between these two
browsers?

Ofcourse my code may not be performance efficient though. But still IE
should not disappoint me in this case

I cannot stick with Firefox also in this case, becase blank cells
borders are not displayed properly in firefox.

Any adivse would be helpful and appreciated

Thanks
Suren

Nicanor Babula

unread,
Apr 2, 2009, 3:50:10 AM4/2/09
to Google-We...@googlegroups.com
Hi,
I faced this problem too when trying to work with a grid having lots of rows
and columns. I think is slower in IE because of the way it renders the pages.
Anyway, it turns out that with large numbers of DOM elements browsers fail
displaying the pages. Therefore you could try in some way reduce the number of
elements (every td/tr is an element). Try implementing a fake table with divs.
A big div with a background image that simulates the grid andhe
position:relative, and the cells - other divs with position: absolute.

I did that way for my project.

Or you could still use a flextable, with bigger row heights in order to make
the scrollbars appear. This way you'll load only x% of the total data on page
load, the remaining (100 - x)% you'll load on scroll. ;)

Suren

unread,
Apr 2, 2009, 4:19:59 AM4/2/09
to Google Web Toolkit
Hi Nicanor,

Thanks for the reply.

So, lets assume, I am going for the partial rows display in the
beginning and adding more rows when I scroll..

In this case, Should there be a rendering issue? like when I scroll,
untill the population is being done, the screen will hang or it will
be blank in the end portion of the table right?

and I thought of one more way like, Display the rows that will fit to
the screen in the beginning and add the rows in the background. Is
that possible? I 've read about BulkRenderer or Preloaded table..

Could you please gimme any clues about those?

Thanks
Suren
> > Suren- Hide quoted text -
>
> - Show quoted text -

Nicanor Babula

unread,
Apr 2, 2009, 4:44:26 AM4/2/09
to Google-We...@googlegroups.com
On Thursday 02 April 2009 10:19:59 Suren wrote:
> Hi Nicanor,
>
> Thanks for the reply.
>
> So, lets assume, I am going for the partial rows display in the
> beginning and adding more rows when I scroll..
>
> In this case, Should there be a rendering issue? like when I scroll,
> untill the population is being done, the screen will hang or it will
> be blank in the end portion of the table right?
The scrolled portion of the page could display "loading data.. please wait.
The onScroll events are fired for every pixel, so you could make an algorithm
that populates your table every delta_pixels_scrolled. And here again: What if
the user scrolls a large amount of pixels? Well, you could implement some sort
of stack. Every delta_pixels_scrolled you add to your stack the loading
requests. After that, with a timer you execute all the stacked loading
requests. This way you should be able to avoid the "stop script" message. This
is my idea.
>
> and I thought of one more way like, Display the rows that will fit to
> the screen in the beginning and add the rows in the background. Is
> that possible? I 've read about BulkRenderer or Preloaded table..
>
> Could you please gimme any clues about those?
I never used those objects.. I prefer using only gwt-original objects. And if
I need something special I just implement it myself.
>
> Thanks
The pleasure is mine.

Tony Strauss

unread,
Apr 2, 2009, 5:59:35 AM4/2/09
to Google Web Toolkit
Depending on the nature of your data, it might be better to implement
a paging table rather than fetching more rows during scrolling, For
what it's worth, I think that hitting the server during paging is more
intuitive than hitting the server during scrolling. Implementing your
own paging table isn't that much work, and there are several free
implementations. The incubator has one, for instance:
http://code.google.com/docreader/#p=google-web-toolkit-incubator&s=google-web-toolkit-incubator&t=PagingScrollTable

Tony
--
Tony Strauss
Designing Patterns, LLC
http://www.designingpatterns.com
http://blogs.designingpatterns.com

Thomas Broyer

unread,
Apr 2, 2009, 9:09:03 AM4/2/09
to Google Web Toolkit


On 2 avr, 09:36, Suren <nsurendi...@gmail.com> wrote:
>
> I am populating 100x100 cells in Flextable from database.

At the risk of repeating myself: if you know in advance the size of
the table and you do not use colspan/rowspan, use a Grid instead of
FlexTable for slightly better perfs.

> Its taking 10 mins in IE to display the table, but only less than 10
> secs in Firefox.
>
> I am wondering why such extreme difference exists between these two
> browsers?

table-layout might be part of the answer. See:
http://blogs.msdn.com/ie/archive/2005/02/10/370721.aspx
http://msdn.microsoft.com/en-us/library/ms533020.aspx#Use_Fixed-Size_Tables

> I cannot stick with Firefox also in this case, becase blank cells
> borders are not displayed properly in firefox.

Hmm, empty-cells to the rescue?
http://www.w3.org/TR/CSS21/tables.html#propdef-empty-cells

Magius

unread,
Apr 2, 2009, 9:51:55 AM4/2/09
to Google Web Toolkit
I'm not a fanatic of paginated tables but I think this is the easiest
way.
I receive all the data in the GWT-client and show the information in a
paginated way.
Each time the user press "next" you anly have to replace the table
data with the next N records.


On Apr 2, 3:09 pm, Thomas Broyer <t.bro...@gmail.com> wrote:
> On 2 avr, 09:36, Suren <nsurendi...@gmail.com> wrote:
>
>
>
> > I am populating 100x100 cells in Flextable from database.
>
> At the risk of repeating myself: if you know in advance the size of
> the table and you do not use colspan/rowspan, use a Grid instead of
> FlexTable for slightly better perfs.
>
> > Its taking 10 mins in IE to display the table, but only less than 10
> > secs in Firefox.
>
> > I am wondering why such extreme difference exists between these two
> > browsers?
>
> table-layout might be part of the answer. See:http://blogs.msdn.com/ie/archive/2005/02/10/370721.aspxhttp://msdn.microsoft.com/en-us/library/ms533020.aspx#Use_Fixed-Size_...
Reply all
Reply to author
Forward
0 new messages