браузер достаточно умен чтобы не делать пересчет лейаута когда не надо

а свелту достаточно строчку style текущую с предыдущей сравнить, чтобы не тригерить пересчет стилей

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

не уверен, я думаю что при изменении el.setAttribute('style', ...) будет считаться все

если у тебя изменилось хоть одно свойство которое перетрясет лейаут, то он перетрясется хоть ты его через поле поставь хоть всей строкой стайл

я только что проверил

Если переменная лежащая в строке стилей изменяется от позиции курсора, и в это время делается множество вычислений(например getBoundingClientRect для пары тегов) и у двух-трех тегов меняет transform(x/y) то каждое дополнительное свойство может забрать лишние фпсы и сделать анимацию НЕ гладкой

бл*

Собсно и может испортить анимацию.

это и ежу понятно. а что будет если у тебя изменилось свойство которое НЕ перетрясет лейаут?

<div id="target" style="background: red; height: 100px; width: 100px;">

</div>
<script>
setInterval(() => {
  const element= document.getElementById('target');
  element.style = "background: red; height: 100px; width: 100px;";
}, 10);
</script>

смотри профайл, там только пересчет стилей

щас сделаю чтобы хоть что-то менялось что не трясет лэйаут

<div id="target" style="background: red; height: 100px; width: 100px;">

</div>
<script>
setInterval(() => {
  const element= document.getElementById('target');
  element.style = "background: red; height: 100px; width: 100px;";
}, 10);
</script>

И старые браузеры настолько же умные чтобы все не пересчитывать?

🤔

<div id="target" style="background: red; height: 100px; width: 100px;">

</div>
<script>
setInterval(() => {
  const element= document.getElementById('target');
  element.style = `background: red; height: 100px; width: 100px; opacity: ${Math.random()}`;
}, 10);
</script>

Вот с изменением какого-то свойства, не трясущего лэйаут. Все тоже самое.

Достаточно сравнить две строки на равенство перед установкой всего style

кто тебе сказал что старые браузеры настолько умные чтобы не пересчитывать все даже когда ты изменил только одно поле style.opacity?

Вот собственно мне и интересно, пересчитывается ли все в старых браузерах.

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

не знаю почему тебе важен перформанс в старых браузерах. Старые браузеры поддерживают так чтобы там "просто работало", если хочется лучше есть решение установить браузер поновее

По крайней мере у меня есть несколько живых примеров когда юзеры/друзья заказчиков сидящие на 60-ой версии хрома (когда он был ~75) жаловались на просадки, хотя в новой версии все было пучком.

С тех пор по пол часа на быстрый осмотр в старых браузерах трачу...

И оказывается это неплохая практика - если фризит на старом браузере, то может оказаться, что в новой версии фризы близко и надо немного потратить времени на оптимизацию =)