Web Animations API, вызывающий отдельные элементы в панели памяти Chrome Devtools ⇐ Html

[Anonymous]

API веб -анимации, вызывая отдельные элементы в панели памяти Chrome Devtools < /h1>
проблема < /h2>
Когда я использую API веб -анимации, я замечаю несколько Отдельные объекты на панели памяти Chrome Devtools. Я не уверен, что вызывает это. /strong>

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

  Detached 

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

  Detached CSSStyleDeclaration

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

  Detached DOMTokenList

шаги для воспроизведения

• Откройте страницу с помощью тестового примера. >, затем принять куче снимок .
  • Нажмите start в тестовом примере,
  • Подождите 1 секунду, пока красный элемент не исчезнет, ​​
  • Перейти к devtools → memory , щелкните collect , затем принять кучу снижения .
    < li> Теперь у нас есть два снимка . Выберите сравнение режим и фильтр «Отдельный» .
  • ожидается: без отдельных элементов. < /ul>
    < /li>
  • Удалить снимки и страницы перезагрузки, повторить 1 и 2 элементы, запустите тест с анимацией < /strong>:
    
    В пункте 3 измените тестовый режим на animate < /strong> и повторить шаги для создания и сравнительных снимков. < /li>
    На двух Различные компьютеры, я постоянно вижу отдельные элементы , появляющиеся в снимках.

Пример кода: < /p>


const moveRight = [
[{ transform: 'translateX(0)' }, { transform: 'translateX(100%)' }],
{
id: 'moveRight',
duration: 1000,
easing: 'linear',
fill: 'forwards',
},
];
const box = document.querySelector(".box")
let line = null
let animation = null

const cleanHandler = () => {
line.style.display = "none"
if (animation) {
animation.removeEventListener('finish', cleanHandler);
animation.cancel();
animation = null;
}
let localLine = line;
line = null
setTimeout(() => {
if (localLine) {
localLine.remove()
localLine = null;
}
})

};

document.querySelector("button.start").addEventListener("click", () => {
if (line) return
line = document.createElement("div")
line.classList.add("line")
const animated = document.getElementById("animate").checked
box.appendChild(line)
if (animated) {
animation = line.animate(...moveRight)
animation.addEventListener('finish', cleanHandler);
} else {
setTimeout(() => cleanHandler(), 1000)
}
})< /code>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}

.box {
display: flex;
overflow: hidden;
}

.line {
background-color: red;
flex: 1;
height: 100px;
}< /code>
Start

Timeout

Animate

< /code>
< /div>
< /div>
< /p>
Есть идеи о том, почему это происходит?


Подробнее здесь: https://stackoverflow.com/questions/794 ... mory-panel