Виртуальный 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 - Упрощение синтаксиса
Скрытый контент
Комментарии (16)
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.

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

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

Ответить
Зарегистрируйтесь или войдите чтобы оставить комментарий

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

Google
GitHub
Yandex
MailRu