Saturday, October 30, 2010

Performance issues with large number of divs

Hi All

I have this application where I need to display lines of related text
one under the other. For e.g., the English text would be on top, and
then the Greek would be below. The text is split into phrases, so for
example, the Greek is not necessarily in the right word order. All
that matters is that the meaning of the greek word matches the meaning
of the english word.

How would you go about displaying this. I decided to go for a div
containing child divs for each word. Each parent div then floats to
the left, so that the wrapping of the text at the end of the page is

The problem I have is 2 fold. For even small texts (~600 words), it
takes a while to generate the correct DOM (600 parent divs at the
minimum + for 2 lines 1200 child divs!). Are there ways of speeding
this up? At the moment, I take each word-set as it comes in and render
the div into the DOM tree. Would it be faster to do everything off the
DOM and then attach the whole lot at the end? I believe I tried that
months ago and it didn't seem to help much.

Secondly, I get the impression it takes a while to deserialise the
response from the server. For e.g. I have a response that is roughly
41Kb from the server, and it seems to take approximately 20 seconds to

All this is in DEV mode. In normal mode things are faster, but still
not fast enough...
Any ideas? I have a few thoughts, but I think that fundamentally this
might just not have a nice solution.

You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To post to this group, send email to
To unsubscribe from this group, send email to
For more options, visit this group at

No comments:

Post a Comment