Всегда ли Javascript, изменяющий DOM, вызывает обновление пользовательского интерфейса?

Question

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

Существует ли спецификация для браузеров для реализации такого поведения, которое при изменении html dom для обновления пользовательского интерфейса?

Answer 1

Нет, вы можете очень хорошо изменить DOM, не вызывая перекрас .

Возьмем, к примеру, элемент, отображение которого установлено на none. Он все еще находится в DOM, но отбрасывается CSSOM и не вызывает перерисовки при изменении:

setTimeout(() => {
  content_div.textContent = 'I got modified';
  console.log(content_div.outerHTML) // "<div id="content">I got modified</div>"
}, 1000);

#hidden {
  display: none;
}

<div id="wrapper">
some hidden content below
<div id="hidden">
  <div id="content_div">I will get modified</div>
</div>
<div>

Теперь, я чувствую, что вам нужно понять основы предмета, так что смотрите этот Q / A , который объясняет три фазы операции redraw браузера:

• Обновление DOM (синхронизация)
• Reflow (обычно асинхронный, но может быть принудительно установлен синхронно)
• Перекрасить (асинхронно, не более 60 кадров в секунду)

А для спецификации это здесь.