Hello at all,

I have an application written with GWT which looks a little bit like a 
Gantt chart. It works well but sometimes I have some problems with the 
memory usage of the application.. To paint the chart I use one big canvas, 
for example width 10000 px and height 2500 px. When I paint my chart 
initially everything is fine (memory usage JavaScript in Chrome 50 MB, 
memory usage over all in Chrome 150 MB (from Chrome task manager)).
The problem starts with repainting some parts of the chart, for example it 
is possible to select something, that means the clicked rect should get 
another color. In that case I repaint everything new which intersects with 
my rect, for example 5 other rects with a size of 40 x 10 px overall. And 
this is really memory consuming, JavaScript memory usage is nearly fixed 
but the memory usage over all increases by some 100 MB. Why that? If my 
canvas is smaller, for example 1500 x 1000 px and I do th same operation 
the memory usage increases also but only for 50 MB.
That's why I think the problem has nothing to do with my coding in 
JavaScript/GWT, it has something to do how chromes handles the painting on 
the canvas. Is there a possibilty to see, what consumes all the memory? 
With the Chrome dev tools I can only see all the JavaScript stuff. But the 
memory usage of JavaScript is nearly fixed. I read something about the 
trace tool inside chrome. But this is really hard to understand if you have 
no knowledge about the internals of chrome. What else could be the reason 
for the memory usage?
If it is the repainting on the canvas, what should I do? I read something 
about canvas/rendering strategies:

   1. background rendering (create a second canvas of the size of changes, 
   paint all changes on this canvas and place this one in the original, big 
   one)
   2. multi canvas (create a second canvas of the size of changes, paint 
   all changes on this canvas and place this canvas on the right position on 
   top of the orignal, big one as a second canvas in the html page), 
   3. one canvas which fits to the screen size and you paint only a small 
   view of the hole chart and when you "scroll" you have to repaint the 
   missing parts (I think the chrome trace tool works like this, does'nt it?)


1. would be quite easy to implement it in my application, 2. is a little 
bit more complicated and 3. is quite difficult. Would one of the strategies 
solve my problem? If it is strategy c), what is the best way to implement 
it? Is there any support from the GWT framework or HTML5/canvas itself? 
What's about the usage of a scroll panel, because the canvas has a fixed 
size? How the trace tool does it?

Thanks a lot, Philipp

-- 
You received this message because you are subscribed to the Google Groups "GWT 
Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/d/optout.

Reply via email to