В этом посте мы обсудим, что такое виртуальный DOM, и как он помог ReactJS в повышении эффективности манипуляций с DOM.

ReactJS не обновляет реальную DOM напрямую, но обновляет виртуальную DOM. DOM означает объектную модель документа. Согласно w3.org DOM определяет логическую структуру документов и способ доступа к документу и управления им.

Это дает большой выигрыш в производительности ReactJS. Здесь мы попытаемся понять, почему обновление реального DOM происходит медленно и как обновление Virtual DOM увеличивает производительность?

Почему обновление Real DOM происходит медленно:

Обновление DOM не медленное, это похоже на обновление любого объекта JavaScript; тогда что именно замедляет обновление реального DOM?

Давайте посмотрим на изображение ниже из html5Rocks, чтобы увидеть, как именно браузер отображает веб-страницу.

Механизмы рендеринга, которые отвечают за отображение или рендеринг веб-страницы на экране браузера, анализируют HTML-страницу для создания DOM. Он также анализирует CSS и применяет CSS к HTML, создавая таким образом дерево рендеринга, этот процесс называется вложением.

Процесс компоновки дает точные координаты для каждого узла дерева рендеринга, где этот узел окрашивается и отображается.

Итак, когда мы это сделаем,

document.getElementById('elementId').innerHTML = "New Value"

Происходит следующее:

  1. Браузер должен проанализировать HTML
  2. Удаляет дочерний элемент elementId
  3. Обновляет DOM с «новым значением»
  4. Пересчитайте CSS для родительского и дочернего
  5. Обновите макет, т.е. точные координаты каждого элемента на экране
  6. Пройдите по дереву рендеринга и раскрасьте его на дисплее браузера.

При пересчете CSS и изменении макетов используются сложные алгоритмы, которые влияют на производительность.

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

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

Как Virtual DOM решает эту проблему?

Что такое виртуальный DOM?

Виртуальная модель DOM - это представление реальной модели DOM в памяти. Это легкий объект JavaScript, который является копией Real DOM.

Обновление виртуального DOM в ReactJS происходит быстрее, потому что ReactJS использует

  1. Эффективный алгоритм сравнения
  2. Операции пакетного обновления
  3. Эффективное обновление только поддерева
  4. Использует наблюдаемую вместо грязной проверки для обнаружения изменения

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

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

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

ReactJS с использованием алгоритма diff сравнивает виртуальную DOM, чтобы найти минимальное количество шагов для обновления Real DOM.

Нахождение минимального количества модификаций между двумя деревьями имеет сложность порядка O (n ^ 3). Но React использует эвристический подход с некоторыми предположениями, что делает проблемы сложными в порядке O (n).

ReactJS использует следующие шаги, чтобы найти разницу в виртуальных DOM.

  1. Выполните повторную визуализацию всех дочерних элементов, если родительское состояние изменилось. Если состояние компонента изменилось, ReactJS повторно визуализирует все дочерние компоненты, даже если дочерние компоненты не были изменены. Чтобы предотвратить нежелательную повторную визуализацию дочерних компонентов, мы можем использовать метод жизненного цикла компонента shouldComponentUpdate (). Это еще больше поможет повысить производительность.
  2. Поиск в ширину. ReactJS просматривает дерево с помощью BFS. Рассмотрим дерево ниже. Состояния элементов B и H изменились. Таким образом, при использовании BFS ReactJS с достигнутым элементом B он по умолчанию повторно отобразит элемент H. Это причина использовать BFS для обхода дерева

3. Примирение. Это процесс определения того, какие части реального DOM необходимо обновить. Это следует из следующих шагов:

  1. Два элемента разных типов будут давать разные деревья.
  2. Разработчик может намекнуть, какие дочерние элементы могут быть стабильными при разных рендерингах с помощью key prop.

Подробное согласование можно прочитать в официальном документе React

Пакетное обновление

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

Как только все шаги будут выполнены, React перекрасит Real DOM. Это означает, что во время цикла обработки событий реальный DOM отрисовывается ровно один раз. Таким образом, весь процесс макета будет выполняться только вовремя для обновления реальной DOM.

Если вам понравилась статья и вы хотите получать обновления о моей новой статье, подпишитесь на меня в среде и в твиттере @ happyrupesh123

Другие статьи:

  1. Внутреннее устройство JavaScript: движок JavaScript, среда выполнения и веб-API setTimeout
  2. Руководство по ReactJS для начинающих
  3. Путешествие JavaScript: от загрузки сценария к выполнению
  4. Чем хороши прогрессивные веб-приложения и как их создать
  5. Давай получим это« это раз и навсегда»
  6. Работники сферы обслуживания
  7. Внедрение Service Workers
  8. Контекст выполнения в JavaScript
  9. Виртуальный DOM в ReactJS
  10. Прототипы в JavaScript
  11. ‘ This ’в JavaScript
  12. Object.create в JavaScript
  13. Наследование в JavaScript
  14. Создавать объекты на JavaScript
  15. Объекты в JavaScript
  16. Zip в Python
  17. Декораторы в Python
  18. Объединение двух списков в Python
  19. Лямбда, карта и фильтр в Python
  20. Составление списков в Python

Использованная литература:

  1. Https://calendar.perfplanet.com/2013/diff/
  2. Https://facebook.github.io/react/docs/reconciliation.html
  3. Https://hashnode.com/post/the-one-thing-that-no-one-properly-explains-about-react-why-virtual-dom-cisczhfj41bmssp53mvfwmgrq
  4. Http://stackoverflow.com/questions/21109361/why-is-reacts-concept-of-virtual-dom-said-to-be-more-performant-than-dirty-mode