Что из перечисленного наиболее точно описывает reflow в контексте браузерного рендеринга?
Anonymous Quiz
19%
Пересчёт и повторный рендеринг только CSS-стилей
20%
Обновление DOM-элементов после сетевого запроса
48%
Пересчёт геометрии и позиций элементов в layout-дереве
13%
Изменение структуры DOM без визуального эффекта
This media is not supported in your browser
VIEW IN TELEGRAM
Single Keyframe Tricks
Большой набор анимированных кнопок
Большой набор анимированных кнопок
❓ Зачем используется метод
Метод
✅ Пример:
📌 В этом примере
includes()
в JavaScript и когда его применять?Метод
includes()
проверяет, содержит ли массив или строка заданное значение. Это простой способ определить наличие элемента без явного цикла или сложных проверок.✅ Пример:
const fruits = ["apple", "banana", "orange"];
const hasBanana = fruits.includes("banana");
console.log(hasBanana); // true
📌 В этом примере
includes()
возвращает true
, потому что значение "banana"
присутствует в массиве.includes() удобно использовать при валидации, фильтрации, поиске совпадений, а также при условной отрисовке в UI. Он делает код короче и читаемее по сравнению с indexOf и другими устаревшими подходами.
❤3
Что из перечисленного наиболее точно описывает микрозадачи в JavaScript?
Anonymous Quiz
19%
Это асинхронные задачи, выполняемые после всех событий
9%
Это задачи, выполняемые после каждой отрисовки кадра
71%
Это задачи, которые ставятся в очередь и выполняются сразу после текущего стека вызовов
2%
Это задачи, которые браузер исполняет только при простое
This media is not supported in your browser
VIEW IN TELEGRAM
Toggle Pill
Набор переключателей с разными стилями анимаций
Набор переключателей с разными стилями анимаций
Что из перечисленного наиболее точно описывает поведение requestAnimationFrame?
Anonymous Quiz
14%
Вызывает функцию каждые 16 мс независимо от загрузки страницы
57%
Гарантирует выполнение функции до следующего кадра браузера
18%
Работает только при наличии CSS-анимаций
11%
Блокирует основной поток до завершения рендеринга
This media is not supported in your browser
VIEW IN TELEGRAM
3D wave animation
Анимированная галерея с эффектом волны
Анимированная галерея с эффектом волны
Что из перечисленного наиболее точно описывает критический путь рендеринга (CRP) в браузере?
Anonymous Quiz
6%
Процесс сборки и упаковки JS-файлов для продакшена
57%
Последовательность шагов от загрузки HTML до отображения пикселя на экране
13%
Время между загрузкой JS и началом выполнения
24%
Обход всего DOM-дерева для инициализации всех событий
Какое из утверждений наиболее точно описывает проблему layout thrashing?
Anonymous Quiz
12%
Избыточное применение CSS-классов к элементам
12%
Повторный рендер компонента без изменения состояния
62%
Частые чередующиеся чтения и записи layout-свойств, вызывающие множественные reflow
14%
Утечка памяти при использовании большого количества DOM-элементов
This media is not supported in your browser
VIEW IN TELEGRAM
CSS-only Custom range slider
Интересный слайдер с динамичным отображением
Интересный слайдер с динамичным отображением
❓ Зачем используется метод
Метод
✅ Пример:
📌 В этом примере
some()
в JavaScript и когда его применять?Метод
some()
проверяет, удовлетворяет ли хотя бы один элемент массива заданному условию. Это удобно, когда нужно быстро узнать, есть ли подходящий элемент, не перебирая весь массив вручную.✅ Пример:
const users = [
{ name: "Alice", isAdmin: false },
{ name: "Bob", isAdmin: true },
{ name: "Charlie", isAdmin: false }
];
const hasAdmin = users.some(user => user.isAdmin);
console.log(hasAdmin); // true
📌 В этом примере
some()
вернёт true
, потому что в массиве есть хотя бы один пользователь с isAdmin: true
.some() удобно использовать для валидации, проверки доступа, поиска флагов или условий в списках. Это делает код чище, короче и более декларативным, особенно при работе с массивами объектов.
👍3
Что из перечисленного наиболее точно описывает событийную делегацию (event delegation) в JavaScript?
Anonymous Quiz
5%
Механизм, при котором обработчик событий создаётся с помощью setTimeout
74%
Приём, когда один обработчик используется на родителе для обработки событий от потомков
15%
Автоматическая передача события между двумя независимыми DOM-элементами
5%
Метод прямой подписки на события всех дочерних элементов вручную
This media is not supported in your browser
VIEW IN TELEGRAM
Hover Glyph Button
Кнопка с анимированным эффектом при наведении
Кнопка с анимированным эффектом при наведении
Какое утверждение наиболее точно описывает цель использования Shadow DOM в веб-разработке?
Anonymous Quiz
11%
Это механизм кэширования компонентов в браузере
60%
Это способ изоляции стилей и структуры компонента от остального DOM
6%
Это система глобальных событий внутри веб-компонентов
23%
Это часть виртуального DOM в React