Виртуальный DOM и синхронизация UI

Ранее мы упростили разработку за счёт использования иммутабельных компонентов, но получили проблемы производительности. И для решения этих проблем нам было бы неплохо сделать рендер более умным.

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

  • 00:00:53 Проблема сброса страницы
  • 00:01:46 Проблемы производительности
  • 00:02:34 Подходы put и sync
  • 00:03:35 Концепция Virtual DOM
  • 00:04:45 Задача синхронизации
  • 00:06:30 Копирование контейнера
  • 00:07:57 Синхронизация атрибутов тегов
  • 00:10:38 Синхронизация текста
  • 00:12:51 Работа с текстом в DOM
  • 00:18:24 Синхронизация вложенных элементов
  • 00:23:57 Полноценная синхронизация
  • 00:30:10 Просмотр результата
  • 00:30:59 Проблема сравнения списков
  • 00:35:20 Указание уникальных ключей
  • 00:37:36 Анализ шагов
  • 00:39:11 Упрощение синтаксиса
Скрытый контент (код, слайды, ...) для подписчиков. Открыть →
Дмитрий Елисеев
elisdn.ru
Комментарии (17)
Yevhenii Lykholai

Спасибо. Мне "зашёл" этот скринкаст. Особенно интересно про сдвиг при синхронизации виртуального дом с реальным. Теперь понятно почему тот vue в цикле for просит уникальный key.

Ответить
Григорий

Дмитрий, спасибо! Скринкаст великолепный, всё больше проясняется работа с фронтендом! На основе информации с предыдущего видео удалось упростить несколько задач, но оказалось что можно сделать ещё проще и интереснее! Переделывать в ближайшее время не буду, оставлю на память, очень наглядно видно хронологию развития мысли!

Ответить
Александр Кулик

Огонь

Ответить
Arunas

Спасибо :)

Ответить
Максим

Ну когда же новое видео? Нет сил ждать))))

Ответить
Aёct'ann

Супер! Самое главное - это понимание принципов, а после таких скринкастов, где все разложено по полочкам, понимание 100%-е

Ответить
Sergei

Согласен, имеено круто, что Дмитрий полностью наизнанку показывает как работают инструменты, а не тупо пересказывает документацию :)

Ответить
Артём

Великолепно!

Ответить
rodigy

Для большого и вложенного по глубине dom, оптимально ли использовать рекурсию? Или браузер примерно так же поступает когда собирает дом?

Ответить
Дмитрий Елисеев

Да, браузер всё равно всё парсит и собирает рекурсивно. Для обхода дерева рекурсия подходит идеально. А если рассматривать настоящий ReactDOM, то он для производительности практически везде оптимизирован кэшированием и ленивой загрузкой.

Ответить
Александр

Интересно было бы понять ещё как работает Fiber и хуки в самом ядре, но такого материала практически нигде нет, а когда в исходники лезешь, мало, что понятно.

Ответить
Дмитрий Елисеев

Про хуки посмотрим в одиннадцатом эпизоде.

А для понимания Fiber да, надо смотреть всё касаемое рендера из 25 тысяч строк react-dom.js.

Ответить
Дмитрий

Классное пояснение. Мне понравилось.

Ответить
kashamamina

А что если при переборе атрибутов в процедуре sync использовать код ниже?

realNode.setAttribute(attribute.name, attribute.value)

И зачем в этой же процедуре при синхронизации атрибутов мы отдельно присваиваем класс и айди с помощью свойств id и className, если потом мы все равно перебираем коллекцию атрибутов, в которой они хранятся?

Ответить
Дмитрий Елисеев

Да, потом можно убрать лишние строки и оставить универсальные attributes и setAttribute.

Ответить
Сергей

Крутой курс! жаль до майских не наткнулся на него))

Ответить
Tema Ovchinnikov

Не знаю почему, но эта штука работает Сodepen.

function renderDom(realDom, virtualDom) {
  let newVirtualDom = new DOMParser().parseFromString(virtualDom, 'text/html');
  newVirtualDom = newVirtualDom.children[0].children[1].children[0];

  const virtualDomRoot = document.createElement(realDom.tagName);
  virtualDomRoot.id = realDom.id;
  virtualDomRoot.append(newVirtualDom);

  synchronization(realDom, virtualDomRoot);
}
Ответить
Зарегистрируйтесь или войдите чтобы оставить комментарий

Или войти через:

Yandex
MailRu
GitHub
Google