1

In my project I am drawing plenty of things to the stage and in firefox I am getting the infamous "Warning: Unresponsive script" message from the stage.update() function.

I have tried to break my script into multiple asynchronous cycles using setTimer, drawing only 100 elements in loop before briefly giving control back to the browser. I thought the stage.update() will redraw only newly added elements but apparently it does not work that way. Even if I create and add to stage only 1 new element, if there already is 1000 elements on the stage the update will take same amount of time as if I added all 1001 elements in one go. Which obviously leads to the "Warning: Unresponsive script" message.

I need to be able to update only the newly added elements or make the update function somehow asynchronous.

Community
  • 1
  • 1
daniel.sedlacek
  • 8,129
  • 9
  • 46
  • 77
  • Have you tried to cache some of the stuff to work around your problem? Repaint regions are, as far as I know, currently not supported in EaselJS. I also noticed some performance improvements if you manually set visible to false, if the objects aren't visible anymore (http://www.createjs.com/docs/easeljs/files/easeljs_display_DisplayObject.js.html#l294). Also FF is damn slow in rendering Gradients and Shadows (but it doesn't look like its the case in your example). – derz Jun 04 '15 at 15:13
  • If you are drawing graphics, it might make sense to cache them as @derz suggests. Additionally, take care to clear graphics before you redraw them. If you are only _adding_ content, you could try caching your view, and then using `updateCache` to only append new children. If content is changing, you are stuck with updating everything. – Lanny Jun 04 '15 at 19:56
  • I wil try caching but I need to update them on every zoom. my problem is with the initial draw which takes way more time than any redraw on zoom or anything. – daniel.sedlacek Jun 04 '15 at 21:06
  • I'm curious if perhaps your first call to `stage.update()` is at a really high zoom? When it errors out in FF, the canvas has what looks like really huge vector elements on it. After the first update, it seems to render at a decent framerate, and I can't think of anything inherent in EaselJS that would cause the first `update()` to be slower than subsequent ones. We don't cache any data for subsequent updates or anything. Perhaps FF doesn't optimize as well for huge vectors being clipped to a small canvas? – gskinner Jun 05 '15 at 06:21
  • The only other thing I can think of is the initial cost of constructing your display objects, but it doesn't look like there's enough of them to cause an issue, and you mentioned you've already tried making that iterative. – gskinner Jun 05 '15 at 06:21
  • You should also take a look at the other parts of your Code - based on the Chrome Timeline it doesn't look like the pure painting of the Canvas is the (only) problem - but its hard to "debug" the minified code. :-) – derz Jun 05 '15 at 07:46

1 Answers1

0

I had had to break the constructing of the stage to more asynchronous cycles, that helped.

daniel.sedlacek
  • 8,129
  • 9
  • 46
  • 77