Что именно обновляется при манипулировании DOM - PullRequest
Новая
       20

Что именно обновляется при манипулировании DOM

0 голосов
/ 11 июня 2018

Я пытаюсь понять, что именно обновляется с помощью обычного DOM после манипуляций с DOM.

Предположим, у нас есть DOM ниже, и я использую javascript для удаления li с классом blue.

Означает ли это, что браузер просматривает родителя класса blue (например, id списка 1) и повторно отображает этот узел DOM, включая все дочерние элементы (за исключением класса blue), а затем перерисовывает всю страницу на основепо каким правилам css?

Я бы подумал, что это будет процесс, но я не был уверен и нигде не могу найти никаких конкретных примеров.

 <div>
   <ul id="list1">
     <li> red </li>
     <li class="blue"> blue </li>
     <li> green </li>
    </ul>
    <ul id="list2">
      <li> orange </li>
      <li> gray </li>
      <li> brown </li>
    </ul>
 </div>

Ответы [ 2 ]

0 голосов
/ 11 июня 2018

Это не так просто, и это потому, что вы, вероятно, не совсем понимаете, как работает Обновление DOM + процесс рендеринга .

DOM - это просто объект javascript, как любойпрочее.

Когда вы выполняете манипуляции с DOM, это действительно похоже на изменение свойств простого объекта (сложного, но все же).

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

Итак, чтобы ответить на вопрос, когда DOM манипулирует, вы изменяете свойства объекта js и, возможно, устанавливаете флаг, сообщая обоиммакет recalc и средство визуализации, которое им придется задействовать при следующем обновлении экрана.

Когда эти layout recalc (он же reflow ) и операции перерисовки фактически запускаются,не привязанный ни к каким спецификациям, и это именно то место, которое большинство браузеров будут пытаться оптимизировать, и, следовательно, трудно точно определить, как они работают везде.(Хотя указано, что в некоторых случаях reflow должен работать синхронно).
Но мы можем предположить, что если ничего не изменилось, то это будет по крайней мере сокращение.

Например, если в вашем примере #list1 его CSS-свойство display установлено на none, то, возможно, будет нечего перерисовывать, то же самое, если вы повторно добавили .blueстихия синхронно.

Проще говоря, 

// js execution
DOM manip => mark layout as dirty
DOM manip => mark layout as dirty
... there may be a lot here

// Before screen refresh
if(layout.isDirty()) 
  layout.recalc() // will itself mark repaint as dirty if needed
if(renderer.isDirty())
  rendered.repaint()
0 голосов
/ 11 июня 2018

Да, потому что это единственный способ удалить элемент, ... через его родительский элемент, то есть .removeChild().В этом случае DOM может или не может пройти то, что называется Reflow, в зависимости от того, какие изменения произошли.

...