EaselJS: Почему кеширование делает мой рендеринг медленнее?

Question

Я пытаюсь улучшить производительность на нашем холсте, так как все (несколько областей) перерисовывается на каждом stage.update(), что и работает. Я хотел бы рисовать/добавлять только одну область. Я могу заставить это работать, но затем все предыдущие области удаляются из-за update. Я обнаружил, что кэширование может быть улучшением производительности, но оно фактически замедляет рендеринг.

Пример код:

self.areaMask = new createjs.Shape(); 
self.areaMask.graphics.beginFill("#000").drawRect(0, 0, 50, 50); 
self.areaMask.cache(0, 0, 50, 50); 

Странная часть является то, что момент, когда я включить это кэширование, он на самом деле делает рендеринг медленнее. Только когда я уменьшаю необязательный четвертый параметр scale до 0.1, производительность, немного, лучше.

Я хотел бы понять, как это возможно, что я могу делать неправильно?

Есть ли другой лучший способ добиться желаемого поведения? (Только нарисовать/добавить указанные зоны, не перерисовывать все районы)

Answer 1

Кэширование улучшит вещи в большинстве браузеров, при условии:

1. Браузер может поместить содержимое на GPU. Если он не может, то ЦП используется для рисования изображений, что может быть медленнее. Большинство браузеров будут работать нормально в большинстве случаев, но иногда вы видите противоположный эффект. Например, EaselJS cache demo иногда хуже работает в Safari, несмотря на то, что лучше работает везде. Какие браузеры/устройства вы тестируете?

2. Кэширование закончено. Если вы кэшируете тонну мелких вещей по отдельности, вы создаете много мелких изображений в фоновом режиме. Лучший подход - использовать что-то вроде SpriteSheetBuilder в этих случаях, так как уменьшение количества текстур у вас улучшает шансы, что графический процессор будет играть хорошо.

3. Ваше кеширование выполняется один раз, а не много. Если вы кешируете что-то в каждом кадре (например, в тике), кеширование не будет эффективным. Это связано с тем, что он должен нарисовать векторное/групповое содержимое каждого кадра в экранном холсте, а затем нарисовать этот холст на основную сцену. Это больше, чем просто рисование векторов.

В настоящее время нет поддержки в EaselJS для рисования конкретных областей сцены. Существуют такие методы, как обновление кэша вне экрана и рисование этого момента на этапе - но это все.

Мне было бы любопытно увидеть ваш код в действии, и он сможет рассказать вам, почему он не работает.