Я экспериментировал с рендерингом сложных сцен на холсте HTML5. Идея состоит в том, чтобы разделить рендеринг на несколько партий, причем каждая партия принимает максимум, скажем, 12 мс, так что выполняемые одновременно анимации (очень дешевые для выполнения) не прерываются.requestAnimationFrame, вызываемый прямо перед концом кадра?
Концептуальна пакетный рендеринг реализован следующим образом:
function draw(ctx) {
var deadline = window.performance.now() + 12; // inaccurate, but enough for the example
var i = 0;
requestAnimationFrame(function drawWithDeadline() {
for (; i < itemsToRender.length; i++) {
if (window.performance.now() >= deadline) {
requestAnimationFrame(drawWithDeadline);
return;
}
var item = itemsToDraw[i];
// Draw item
}
});
}
Полный код в этом JSFiddle: https://jsfiddle.net/fkfnjrc2/5/. Код выполняет следующие действия:
- На каждом кадре измените свойство преобразования CSS на холсте (которое является примером одновременно выполняемой анимации быстрого запуска).
- Время от времени инициируйте повторное рендеринг холста в пакетном порядке, как показано выше.
К сожалению, я вижу ужасные janks точно в то время, когда содержимое холста повторно отображается. То, что я, кажется, не в состоянии объяснить, что Chrome Developer Tools график выглядит следующим образом:
выброшенных кадров, кажется, вызвано тем, что requestAnimationFrame не называется прямо на старте кадра, но к концу идеального 16 мс периода. Если обратный вызов начался сразу после завершения предыдущего кадра, код, скорее всего, завершится во времени.
Оказание на экранном холсте (https://jsfiddle.net/fkfnjrc2/6/), а затем копирование полного изображения на экранное полотно помогает немного, но ямы все еще существуют с точно такими же характеристиками (отсроченное выполнение обратного вызова rAF).
Что не так с этим кодом? Или что-то не так с моим браузером/машиной? Я наблюдаю то же поведение в Chrome (49.0.2623.112) в Windows 10 и Mac OS.