Виртуальный 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 - Упрощение синтаксиса
Скрытый контент
Комментарии (6)
Yevhenii Lykholai
2020-08-26 20:21

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

Ответить
Григорий
2020-08-31 08:06

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

Ответить
Александр Кулик
2020-09-03 08:16

Огонь

Ответить
Arunas
2020-09-04 18:49

Спасибо :)

Ответить
Максим
2020-09-08 08:26

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

Ответить
<CatCode/>
2020-09-15 13:48

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

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