Как я уже упоминал, в последнее время я работаю в React/Redux, и я постоянно в восторге от того, как быстро все рендерится. Это из-за использования виртуального DOM, что очень удобно.
Прежде всего, давайте объясним DOM. Объектная модель документа — это стандартный интерфейс W3C для доступа к документам (HTML или XML). Он определяет способ представления, хранения и доступа к различным структурам на странице. Без какой-либо модели/API Javascript не знал бы, как работать с различными элементами веб-страницы. Поскольку существует стандарт, существует множество встроенных методов для доступа к DOM API, например, document.getElementsbyTagName() или document.getElementbyId(). Однако каждый раз, когда DOM изменяется, ваш браузер думает, что ему нужно перерисовать всю страницу и пересчитать макет/CSS.
Так что же отличает виртуальный DOM? Виртуальный DOM — это, по сути, локальный и упрощенный клон всей информации в полном DOM. Однако когда вы меняете что-то в элементе Virtual DOM, это не сразу меняет то, что находится на веб-странице. Вместо этого React сравнивает обновленный виртуальный DOM с моментальным снимком виртуального DOM непосредственно перед тем, как вы внесли эти изменения (это называется сравнение). Затем React интеллектуально обновляет только те объекты в Actual DOM, которые были отмечены как измененные во время сравнения.
