Какова концепция компиляции Svelte?

Question

Я просмотрел вашу статью https://svelte.dev/blog/virtual-dom-is-pure-overhead и несколько других блогов, но они объясняют, насколько лучше svelte по сравнению с виртуальным домом.В то время как я хотел понять, что он работает без сравнения с другими структурами / концепциями.

Причина, по которой я спрашиваю, заключается в том, что svelte демонстрирует прирост производительности по сравнению с dom-diffing.Тогда DOM-diffring Framework продемонстрировал прирост производительности по сравнению с кодом, управляемым DOM.

Где я могу документировать / графическое представление просто стройной компиляции?

Я пытался искать в сложных вопросах / вопросах,средние статьи и не нашли то, что я искал.

Я также посмотрел на https://github.com/sveltejs/svelte/issues/1011#issuecomment-351262252, но не нашел то, что искал, потому что он объясняет детали в нем, как это было технически реализовано.

Answer 1

Самый простой способ понять это - посмотреть на код, который он генерирует. Посетите REPL и нажмите на вкладку «JS Output».Обратите внимание, что код обновления (метод p, возвращаемый из create_fragment) выглядит следующим образом:

if (changed.count) {
  set_data(t1, ctx.count);
}

set_data - это просто оболочка для textNode.data = ....Другими словами, Svelte генерирует код, который обновляет DOM непосредственно при изменении состояния в зависимости от того, какие значения были изменены.Он не должен проверять или восстанавливать все, в отличие от платформ, которые используют виртуальный DOM.