NW/Node Webkit - Декодирование изображения, даже если оно уже видно

В настоящее время я работаю над игрой JavaScript(pure js). Игра содержит 5 больших листов спрайтов (например, 2861 и раз 768 и 4096 раз, 4864). Когда игра начинается, все 5 листов спрайтов предварительно загружаются в элементы холста. Три из этих 5 спрайтов представляют вместе одну анимацию, где каждый спрайт содержит 75 кадров. Когда один спрайт заканчивается своей анимацией, я спрячу его и покажу следующий спрайт. Когда второй спрайт завершает анимацию, я скрываю его и показываю третий/последний.

Когда второй или третий спрайт будет отображаться, произойдет небольшая задержка 0,5 с - 1 с. Изображение декодируется.

Это не то, что происходит в первый раз, это всегда происходит всегда. И эта анимация повторяется каждые 5 минут, и небольшая задержка происходит всегда.

Причина, почему я использую элементы canvas для предварительной загрузки, - это то, что я думал, что WebKit просто отбросит декодированные изображения в течение некоторого времени и не будет использоваться, чтобы элемент canvas не удалял WebKit из памяти. Но это не работает.

Я пробовал почти каждую оптимизацию, о которой я знаю. Я даже реорганизовал все мои CSS, удалив селектор потомков и т.д.

Средство рендеринга, которое я использую для рисования этих анимаций, построено мною, и оно работает идеально, так что это не может быть проблемой, поскольку он отлично работает в Firefox.

ИЗМЕНИТЬ [2016/03/04]: Я сделал режим с холстом, и результат еще хуже. Он много лагет. И задержка остается прежней. Только в NW проблема не сохраняется в Chrome ни в Firefox.

Режим холста - Lags:

Режим по умолчанию (HTML) - отлично работает:

Codepen: Мой рендерер http://codepen.io/anon/pen/JXPWXX

Примечание. Если я скрою те другие элементы с opacity:0.2, а не opacity:0, проблема не будет. Но я не могу их скрыть, так как они все еще видны. Они не должны быть видны. Если я добавлю opacity:0.01, это не видно, и проблема не возникает в Chrome, но все еще сохраняется в NW.

В NW, когда я swtich от непрозрачности: от 0,2 до непрозрачности: 1, обрабатывается декодирование изображения. То же самое не происходит в браузере Chrome.

Я использую следующую версию:

nw.js v0.12.3
io.js v1.2.0
Chromium 41.0.2272.76
commit hash: 591068b-b48a69e-27b6800-459755a-2bdc251-1764a45

Три спрайта изображения составляют 14,4 МБ, 14,9 МБ и 15,5 МБ. Каждый спрайт содержит 75 кадров.

Почему это может происходить и как я могу его предотвратить?

Ответ 1

Попробуйте переключиться на google-chrome напрямую, так как новая версия nw, вероятно, выпущена 19.04.2016. После этого NW, надеюсь, будет следить за каждым выпуском Chromium.

У вас не должно быть таких же проблем в Chrome.

Ответ 2

Учитывая, что сохранение Webkit, отображающего изображение, которое все еще отображается, заставляет проблему исчезнуть (как показывает эксперимент с непрозрачностью), я бы переместил ее почти полностью из видимой области, только с одной прозрачной строкой, перекрывающейся с окном просмотра (используя переполнение скрыто).

Обратите внимание, что распакованный лист спрайтов 4000x4000 будет использовать 64 мегабайта оперативной памяти (4 байта (= RGBA) на пиксель), поэтому, возможно, было бы лучше убедиться, что следующее изображение будет "разогрето" немного раньше времени, не сохраняя все их распакованные все время?

Ответ 3

Я бы рекомендовал использовать idata = ctx.getImageData(0, 0, canvas.width, canvas.height) для извлечения массива данных из холстов, затем ctx.putImageData(idata, 0, 0) для переключения между спрайтами, а не для скрытия холстов.