Chrome пометил существующую анимацию как недействительную при запуске новой анимации. ⇐ CSS

[Anonymous]

Я обнаружил, что Chrome выполняет огромный пересчет стиля и предварительную раскраску для существующих анимаций, когда я запускаю новую анимацию в любом месте страницы. Это задумано или ошибка Chromium? Представьте, что моя реальная веб-страница имеет тысячи узлов DOM и сотни существующих анимаций, и такое аннулирование анимации вызовет огромную нагрузку на процессор. Есть ли способы избежать этого?
PS:

[*]обычно инструменты разработчика Chrome не отображают сведения о недействительности, перейдите к Настройки инструментов разработчика > Эксперименты > проверьте панель «Производительность: отслеживание недействительности», и все готово.
[*]Я намеренно замедлил процессор в 20 раз, чтобы ясно показать проблему, потому что в репродукции гораздо меньше Узлы DOM, чем реальный сценарий.


Воспроизводимый код довольно прост. Я определил пять плавающих элементов, запускающих анимацию при запуске страницы. Я также определил пять резервных элементов, у которых уже есть содержимое и имена классов. Затем нажмите кнопку, чтобы периодически запускать новую анимацию. Чтобы не вводить другие факторы, вызывающие перекомпоновку или ретрансляцию, я использую API веб-анимации вместо переключения className для запуска новой анимации.

Код: Выделить всё

const keyframes = [{
transform: "initial",
willChange: "transform"
},
{
transform: "translateX(0)",
offset: 0.01,
willChange: "transform"
},
{
transform: "translateX(-100vw)",
willChange: "initial"
}
];
const timing = {
duration: 3000,
iterations: Infinity,
easing: "linear"
};

const startButton = document.querySelector('#start');
startButton.onclick = start;

function start() {
const backupList = Array.from(document.querySelectorAll(".backup"));
let index = 0;
setInterval(() => {
if (index >= backupList.length) return;
const div = backupList[index];
div.animate(keyframes, timing);
index++;
}, 1000);
}

Код: Выделить всё

.container {
width: 100vw;
height: 100px;
background-color: red;
position: relative;
}

.floating,
.backup {
position: absolute;
will-change: transform;
color: black;
top: 0;
left: 100vw;
}

.floating {
animation: float linear 3s infinite;
}

@keyframes float {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100vw);
}
}

Код: Выделить всё

floating
floating
floating
floating
floating
backup
backup
backup
backup
backup

Start

Подробнее здесь: https://stackoverflow.com/questions/787 ... -animation