Чем Glimmer VM отличается от виртуального дома?
Поэтому недавно я начал изучать ember js, особенно его движок рендеринга с мерцанием, и пытался понять, как он работает.
Таким образом, я понимаю, что Glimmer VM - это виртуальная машина, которая эмулирует фактическую модель DOM и выполняет функции для ее обновления. В то время как vdom поддерживает внутреннее представление состояний DOM, у glimmer VM такого состояния нет, вместо этого он выполняет два набора линейных инструкций - один для первоначального рендеринга шаблона, а второй - для обновления элементов. Основным преимуществом этого подхода является то, что таким образом мы можем полностью обойти узкое место синтаксического анализа / компиляции JS и просто отправить двоичный файл клиенту, который затем выполняется из glimmer vm. Я правильно понял?
1 ответ
Glimmer не обходит загрузку / синтаксический анализ / компиляцию, если просто изменить язык шаблона с JS или текста на двоичный байт-код, поэтому его загрузка намного меньше и быстрее, а анализ / компиляция выполняется виртуальной машиной Glimmer вместо Виртуальная машина JS с простой грамматикой, которая действительно быстро анализируется и выполняется, также в будущем виртуальная машина может быть перемещена в WebAssembly, чтобы сделать ее еще быстрее.
Glimmer VM - это просто виртуальная машина, которая выполняет байт-код, но именно Glimmer обрабатывает состояние, поэтому, когда он хочет визуализировать компонент, он принимает этот шаблон компонента и выполняет байт-код шаблона в виртуальной машине. Визуализация шаблонной программы, а также генерация байт-кода программы обновления, и она сохраняется связанной с компонентом, поэтому, когда компонентам требуется повторное рендеринг, в ВМ выполняется только программа обновления. В среде Virtual Dom обновления вызывают функции, которые изменяют виртуальный дом, а затем, мгновенно или когда тянет система рисования (для пакетных обновлений), она будет отличать виртуальный дом от предыдущего и обновлять узлы, которые необходимо обновить.
Виртуальный DOM имеет большой смысл в реакции, поскольку он не использует шаблоны, компоненты JSX переносятся в код JS, который использует реагирующий API для взаимодействия с DOM (проверьте это).
Angular Ivy (новый движок представления Angular), похоже, похож на Glimmer в том, что он создает некоторый код Ivy вместо полноценного JS, но не создает программу обновления как Glimmer. (Не совсем уверен, что это то, что я получаю из статей Айви, которые я нашел вокруг).
Glimmer и Angular делают что-то похожее на Virtual DOM, но на уровне компонентов они контролируют изменения и воспроизводят только те компоненты, которые изменили свои данные. Основное отличие состоит в том, что Glimmer уже знает, что было нарисовано, и исполняет байт-код шаблона обновления, сгенерированный предварительно, вместо разборки и полного рендеринга.