This media is not supported in your browser
VIEW IN TELEGRAM
Text-Animation-test
Простая сцена с анимированным текстом
Простая сцена с анимированным текстом
Что происходит при использовании фазы перехвата (capturing) в обработке событий?
Anonymous Quiz
20%
Событие сначала обрабатывается на целевом элементе
24%
Событие обрабатывается от самого вложенного элемента к родителю
42%
Событие обрабатывается от родителя к целевому элементу до фазы всплытия
14%
Событие обрабатывается только один раз независимо от фазы
Что из перечисленного наиболее точно описывает reflow в контексте браузерного рендеринга?
Anonymous Quiz
21%
Пересчёт и повторный рендеринг только CSS-стилей
19%
Обновление DOM-элементов после сетевого запроса
48%
Пересчёт геометрии и позиций элементов в layout-дереве
12%
Изменение структуры DOM без визуального эффекта
This media is not supported in your browser
VIEW IN TELEGRAM
Single Keyframe Tricks
Большой набор анимированных кнопок
Большой набор анимированных кнопок
Что из перечисленного наиболее точно описывает микрозадачи в JavaScript?
Anonymous Quiz
19%
Это асинхронные задачи, выполняемые после всех событий
9%
Это задачи, выполняемые после каждой отрисовки кадра
70%
Это задачи, которые ставятся в очередь и выполняются сразу после текущего стека вызовов
2%
Это задачи, которые браузер исполняет только при простое
This media is not supported in your browser
VIEW IN TELEGRAM
Toggle Pill
Набор переключателей с разными стилями анимаций
Набор переключателей с разными стилями анимаций
Что из перечисленного наиболее точно описывает поведение requestAnimationFrame?
Anonymous Quiz
14%
Вызывает функцию каждые 16 мс независимо от загрузки страницы
58%
Гарантирует выполнение функции до следующего кадра браузера
16%
Работает только при наличии CSS-анимаций
13%
Блокирует основной поток до завершения рендеринга
This media is not supported in your browser
VIEW IN TELEGRAM
3D wave animation
Анимированная галерея с эффектом волны
Анимированная галерея с эффектом волны
Что из перечисленного наиболее точно описывает критический путь рендеринга (CRP) в браузере?
Anonymous Quiz
6%
Процесс сборки и упаковки JS-файлов для продакшена
60%
Последовательность шагов от загрузки HTML до отображения пикселя на экране
15%
Время между загрузкой JS и началом выполнения
19%
Обход всего DOM-дерева для инициализации всех событий
Какое из утверждений наиболее точно описывает проблему layout thrashing?
Anonymous Quiz
11%
Избыточное применение CSS-классов к элементам
14%
Повторный рендер компонента без изменения состояния
59%
Частые чередующиеся чтения и записи layout-свойств, вызывающие множественные reflow
16%
Утечка памяти при использовании большого количества DOM-элементов
This media is not supported in your browser
VIEW IN TELEGRAM
CSS-only Custom range slider
Интересный слайдер с динамичным отображением
Интересный слайдер с динамичным отображением