Оптимизация небольшого скрипта, постоянно добавляющего/удаляющего элементы в DOM?

Question

[Денис Букреев]

Такие дела.
Есть скрипт, который в цикле выполняет функцию по созданию и дальнейшему удалению элемента.

setInterval(() => {
  do();
}, 1000;

const do = () => {
  let element = $('<div/>', {});

  setTimeout(() => {
    element.remove();
  }, 7500)
}

Это примерная схема.
На самом деле создается SVG и через animate еще увеличивается размер этого SVG и только потом удаляется.

Насколько этом может быть напряжно для браузера?
Возможно ли этот скрипт оптимизировать?

Answer 1

[Stalker_RED]

Создать один элемент в секунду? Для большинства клиентов это не проблема, если конечно страница не слишком тяжелая и не происходит полный reflow и/или repaint. А чтобы понять сколько нагрузки добавит анимация, проще сделать и протестировать.

Оптимизация - рисовать всю красоту внутри одного холста, а не создавать новые каждую секунду.

Comments

[Денис Букреев]

все рисуется в одном svg, рисуются circle через Snap
спасибо

Answer 2

[GreatRash]

Внутри SVG норм. Потому что там все элементы позиционируются абсолютно и понятие reflow там неприменимо. Repaint же будет происходить только для того элемента позиция которого поменялась. Можно в этом убедиться если в отладчике Хрома врубить опцию paint flashing. Короче, SVG хорошо оптимизирован.