Влияние производительности на установку встроенного стиля на то же значение?

Question

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

То, что я спрашиваю, - это:

function updateStyle (value) {
  document.body.style.marginTop = value + 'px'
}

setInterval(function () {
  updateStyle(15)
}, 1)

... выполнить хуже, чем это:

var current = null

function updateStyle (value) {
  if (current !== value) {
    document.body.style.marginTop = value + 'px'
    current = value
  }
}

setInterval(function () {
  updateStyle(15)
}, 1)

С одной стороны, я устанавливаю свойство style.С другой стороны, я на самом деле не меняю значение.Я думаю, что движки рендеринга достаточно умны, чтобы заметить это, но все же - они?

Answer 1

Можно рассчитать два влияния на производительность браузеров.

1.Перекрасить: Изменения видимости DOM (менее дорогой)

2.Reflow: Изменения макета DOM (более дорогие)

Так что, как ваши изменения повлияют на DOM, будет определять вашу производительность.В вашем случае вы добавляете маржу, и если макет меняется, из-за этого произойдет перекомпоновка DOM, что дорого, но также учитывайте, на какой большой DOM вы влияете.



Hope this explanation helps you :)