1. Что такое виртуальный DOM
Объяснение 1: Используйте js для моделирования дерева DOM и поместите его в память браузера.Когда его нужно изменить, виртуальный DOM выполняет алгоритм сравнения для сравнения старого и нового виртуального DOM и помещает изменения в очередь. Реагируйте на фактический DOM, уменьшая манипуляции с DOM.
Объяснение 2: виртуальный DOM преобразует DOM в дерево js. Алгоритм diff сравнивает, удаляет и добавляет операции шаг за шагом. Но если есть несколько одинаковых элементов, это может привести к потере производительности, поэтому React и Vue обращаются к значению ключа, чтобы различать их.
2. Почему рендеринг DOM медленный?
Так называемый рендеринг DOM — это процесс, с помощью которого браузер преобразует строку HTML в представление веб-страницы и отображает представление.
- Сначала синтаксический анализатор HTML браузера анализирует строку HTML и преобразует ее в дерево DOM.В то же время синтаксический анализатор CSS также анализирует стили CSS, используемые HTML, для создания ряда правил CSS.
- Затем механизм рендеринга браузера интегрирует дерево DOM с правилами CSS и генерирует дерево рендеринга DOM, которое можно использовать для рендеринга представления.
- Затем определите макет DOM, то есть точное положение каждого узла в браузере.
- Последний шаг — отрисовка, рисование каждого пикселя каждого узла на экране.
Для того, чтобы понять всю сложность этого процесса, мы можем сделать крупный план обработки парсера HTML: в парсере HTML поочередно выполняются две программы: токенизатор и парсер, токенизатор отвечает за разделение HTML преобразует строку в действительные строки тегов DOM и передает их синтаксическому анализатору для обработки, который добавляет их в строящееся дерево DOM; когда токенизатор анализирует все строки, дерево DOM строится.
Вы можете понять, почему рендеринг DOM такой медленный: процесс действительно слишком сложен. Добавление и удаление DOM во взаимодействиях с веб-страницами значительно снизит эффективность рендеринга представлений и взаимодействия.
3. Почему мы используем виртуальный DOM?
- Гарантированная нижняя граница производительности
- Я все еще могу дать вам достойную производительность без ручной оптимизации
- Кроссплатформенность
4. Гарантированная производительность в автономном режиме
Виртуальный DOM фреймворка должен адаптироваться к любым операциям, которые могут быть сгенерированы API верхнего уровня.Реализация некоторых его DOM-операций должна быть универсальной, поэтому его производительность не оптимальна, но она намного лучше, чем грубая. Производительность операции DOM, поэтому виртуальный DOM фреймворка может по крайней мере гарантировать, что вы все еще можете обеспечить хорошую производительность без ручной оптимизации, то есть нижний предел гарантированной производительности;
Например, сравните стоимость производительности перерисовки innerHTML и Virtual DOM:
- innerHTML: отображать строку html O (размер шаблона) + воссоздавать все элементы DOM O (размер DOM)
- Виртуальный DOM: рендеринг Virtual DOM + diff O (размер шаблона) + необходимое обновление DOM O (изменение DOM)
Виртуальный рендеринг DOM + diff явно медленнее, чем рендеринг html-строк, но! Это по-прежнему чистые вычисления на уровне js, которые все еще намного дешевле, чем последующие операции DOM.
Видно, что общий объем вычислений innerHTML, будь то расчет js или операция DOM, связан с размером всего интерфейса, но в объеме вычислений Virtual DOM только расчет js связан с размером интерфейса, и операция DOM связана с объемом изменения данных.
Как упоминалось ранее, вычисления js чрезвычайно дешевы по сравнению с манипулированием DOM. Вот почему Virtual DOM: он гарантирует приемлемую производительность при каждой перерисовке, независимо от того, насколько сильно меняются ваши данные. Гарантированная производительность в дальнейшем.
5. Я все еще могу обеспечить вам достойную производительность без ручной оптимизации
Вот прямой взгляд на объяснение Юды в Чжиху.
6. Кроссплатформенность
Виртуальный DOM по сути является объектом JavaScript, а DOM тесно связан с платформой.Напротив, виртуальный DOM может выполнять более удобные кроссплатформенные операции, такие как серверный рендеринг, разработка weex и т. д.
Ссылаться на:В Интернете говорят, что работа с настоящим DOM медленная, но результаты тестов быстрее, чем у React.Почему?