FrontendQuiz - задачи с собеседований по фронтенду
1.76K subscribers
245 photos
2 videos
2 files
162 links
Задачки для фронтендщиков:
алгоритмы, регулярные выражения, вопросы с интервью, задачи для Junior Frontend и разбор их решения.

Сотрудничество: @cyberJohnny
Download Telegram
🤔 Почему React лучше, чем jQuery?

1. Модульность: React позволяет разделять интерфейс на компоненты, что улучшает читаемость и переиспользуемость кода.
2. Virtual DOM: React обновляет только изменённые части DOM, повышая производительность.
3. Однонаправленный поток данных: Упрощает управление состоянием по сравнению с jQuery, где часто возникает путаница в изменениях.
4. Совместимость: React лучше подходит для сложных приложений, благодаря поддержке современных технологий и инструментов, таких как Redux и Context API.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚
🤔 Какой метод JavaScript применяется для создания глубокой копии объекта, включая все вложенные объекты и массивы?
Anonymous Poll
51%
JSON.parse(JSON.stringify())
14%
Object.clone()
40%
Object.deepCopy()
0%
Array.from()
🤔 Какой метод JavaScript используется для создания функции, которая, когда вызвана, имеет её this связанное с указанным значением?
Anonymous Poll
29%
call()
11%
apply()
60%
bind()
0%
attach()
🤔 Как можно вставить svg в HTML-документ?

- Через
- Через
- Через
- Прямо в разметке — inline SVG

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚
🤔 Какое CSS свойство позволяет элементу частично или полностью исчезать, создавая эффект прозрачности на уровне отдельных частей элемента?
Anonymous Poll
89%
opacity
8%
visibility
3%
fade
0%
alpha
🤔 Что известно про систему сборки проектов?

Система сборки отвечает за автоматизацию подготовки проекта к запуску, включая:
- компиляцию и минификацию;
- сборку модулей;
- транспиляцию кода (например, Babel);
- упаковку стилей и скриптов;
- копирование ассетов;
- запуск тестов.
Примеры: Webpack, Vite, Parcel, Rollup.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚
🤔 Какое значение будет у переменной z после выполнения выражения: let z = "3" * "3";?
Anonymous Poll
15%
"33"
55%
9
23%
NaN
8%
"9"
🤔 Как будет выглядеть API?

API — это интерфейс взаимодействия между клиентом и сервером. Он представлен маршрутами, методами, форматами входных и выходных данных. Обычно описан в виде эндпоинтов с параметрами и ответами.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚
🤔 Какое CSS свойство используется для создания многоколоночного макета текста?
Anonymous Poll
48%
column-count
13%
text-flow
13%
multi-column
26%
text-columns
🤔 Какое значение свойства CSS scroll-behavior задает плавную прокрутку?
Anonymous Poll
0%
auto
80%
smooth
9%
linear
11%
ease
🤔 Что известно про оптимизацию?

- Минификация CSS, JS, изображений;
- Использование кеширования;
- Lazy loading компонентов и ресурсов;
- Уменьшение reflow/repain DOM;
- Оптимизация рендеринга (например, will-change);
- Анализ Lighthouse/DevTools.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚
🤔 Какое значение будет в переменной g после выполнения следующего кода?
let g = new Map([[1, 'a'], [2, 'b']]);
let h = Array.from(g.keys());
Anonymous Poll
48%
[1, 2]
28%
['a', 'b']
12%
[['a'], ['b']]
12%
[1, 2, 'a', 'b']
🤔 Как задать свои свойства массиву?

Массив — это объект, можно добавлять свойства как обычному объекту.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚
🤔 Какое значение CSS свойства position позволяет элементу быть позиционированным в контексте ближайшего позиционированного предка, вместо исходного контейнера?
Anonymous Poll
55%
absolute
32%
relative
6%
fixed
13%
sticky
🤔 Какое значение свойства CSS mask-border-width задает ширину границы маски?
Anonymous Poll
21%
auto
21%
length
11%
percentage
47%
Все вышеперечисленные значения
🤔 Что такое this?

this в JavaScript — это ключевое слово, которое указывает на текущий контекст исполнения функции или объекта. Значение this зависит от того, как вызывается функция: в методе объекта this ссылается на объект, в функции вне объекта — на глобальный объект или undefined в строгом режиме. В стрелочных функциях this не определяется локально, а наследуется от родительской области видимости. Использование this позволяет работать с динамическими контекстами.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚
👍1
🤔 Какое CSS свойство и значение нужно использовать для отображения границы только с левой стороны элемента?
Anonymous Poll
0%
border: 1px solid;
91%
border-left: 1px solid;
9%
border-style: solid left;
0%
border-side: left;
🤔 Какой атрибут элемента <form> определяет метод отправки данных формы?
Anonymous Poll
30%
method
30%
action
0%
enctype
41%
submit
🤔 В чём разница в работе режимов async, defer и type у тега ?

- async — загрузка параллельно, исполнение сразу после загрузки, может нарушить порядок.
- defer — загрузка параллельно, исполнение после загрузки всей страницы, сохраняет порядок.
- type — указывает тип скрипта (например, module для ES-модулей).

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚
🤔 Какое свойство CSS используется для установки расстояния между строками текста?
Anonymous Poll
30%
letter-spacing
13%
text-spacing
3%
word-spacing
53%
line-height