• Что такое Virtual DOM?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    Ну вот есть DOM. Он медленный, и дергать его просто так не стоит. А есть виртуальный DOM, что-то типа прослойки между вашим кодом и реальным DOM. Вы можете дергать виртуальный DOM сколько вам душе угодно, а прослойка эта соберет всю инфу о том как вы чего делали, и попробует оптимизировать взаимодействие с реальным DOM что бы вышло как можно меньше действий.

    Пример - задача простая, у вас есть таблица и нужно постоянно обновлять ячейки новым значением. Значение приходят из апишки раз в пару десятков милисекунд (какая-то реалтайм статистика к примеру). Значения эти - просто массив данных.

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

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

    Если же прослойку эту сделать со своим интерфейсом, можно получить слой абстракции для работы с UI. Именно это предлагает тот же React. Слой абстракции над UI. Вы можете работать с реактом, но UI будет отрисовываться не через DOM а скажем... это может быть нативный интерфейс мобильной платформы (гуглить native-react). Ну и т.д.
    Ответ написан
    Комментировать