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

Сотрудничество: @cyberJohnny
Download Telegram
🤔 Какое свойство CSS используется для задания внутренних теней элементу?
Anonymous Poll
75%
box-shadow: inset 0 0 10px #000000;
17%
inner-shadow: 10px 10px 5px #000000;
8%
shadow-inside: 0 0 10px #000000;
0%
inset-shadow: 0 0 5px #000000;
🤔 Какой тип данных у массива и функции?

- Массив — это объект с числовыми ключами.
- Функция — это объект, имеющий специальное внутреннее свойство [[Call]], позволяющее её вызывать.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚
🤔 Какой JavaScript метод позволяет динамически загружать данные в виде Blob или File без необходимости отправки данных на сервер?
Anonymous Poll
67%
FileReader.readAsDataURL()
🤔 Какие существуют способы реализации роутинга?

- На клиенте (SPA) — с помощью библиотек (react-router, vue-router, angular-router);
- На сервере — через фреймворки (Express, Fastify, NestJS, Koa, Hapi);
- Файл-базированный роутинг — Next.js, Nuxt (роуты = структура папок);
- Hash-based routing — используется в браузерах без серверной поддержки (через #);
- History API — с помощью pushState, replaceState (без перезагрузки страницы);
- Middleware-based routing — используется в архитектуре middleware (например, Express).

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚
🤔 Какое свойство CSS предназначено для создания сложных анимационных последовательностей, основываясь на временных ключевых точках, а не только на процентах выполнения?
Anonymous Poll
79%
keyframes with timepoints
14%
animation-timeline
7%
steps()
0%
motion-path
🤔 Какое свойство CSS устанавливает, как должен происходить перенос текста на новую строку внутри элемента?
Anonymous Poll
71%
text-wrap
19%
white-space
10%
text-break
5%
line-break
🤔 Чем отличаются между собой Shadow DOM, Virtual DOM и Regular DOM?

- Shadow DOM — изолированный мини-DOM внутри компонента;
- Virtual DOM — абстрактная копия DOM в памяти (используется React, Vue);
- Regular DOM — основной объект модели документа браузера.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚
🤔 Какое значение будет в переменной h после выполнения следующего кода?
let h = [1, 2, 3, 4, 5];
h = h.slice(1, 4);
Anonymous Poll
13%
[1, 2, 3, 4]
48%
[2, 3, 4]
39%
[2, 3, 4, 5]
0%
[1, 2, 3, 5]
🤔 Какое значение свойства display в CSS используется для скрытия элемента, но сохранения его в потоке документа?
Anonymous Poll
29%
none
46%
hidden
0%
block
29%
visibility
🤔 Что такое критический путь рендеринга веб-страниц?

Это процесс от получения HTML до отображения первого содержимого на экране, включая:
- получение HTML, CSS, JS;
- построение DOM и CSSOM;
- объединение в render tree;
- layout и paint.
Оптимизация критического пути позволяет ускорить первую отрисовку страницы.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚
🤔 Какое свойство CSS используется для создания границы вокруг элементов?
Anonymous Poll
27%
margin
70%
border
6%
outline
0%
frame
🤔 Какой метод JavaScript позволяет создать WeakSet с инициализацией от массива объектов?
Anonymous Poll
65%
new WeakSet()
15%
WeakSet.create()
20%
WeakSet.from()
0%
Set.createWeak()
🤔 Что делать, если один и тот же отчёт запросили много раз?

- Кешировать результат — на уровне БД, бэкенда, Redis или в браузере.
- Использовать идемпотентные API — чтобы повторные запросы не перегружали систему.
- Реализовать сигнатуры или токены запроса, чтобы одинаковые запросы возвращали закешированный ответ.
- Для тяжёлых отчётов — сохранять в хранилище и отдавать ссылку.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚
🤔 Какой метод JavaScript позволяет создать объект с доступом к приватным методам другого объекта?
Anonymous Poll
26%
Object.create()
52%
Object.defineProperties()
17%
WeakMap()
4%
Reflect.construct()
🤔 Какое значение свойства CSS background-origin определяет, где начинается фон элемента?
Anonymous Poll
13%
padding-box
47%
content-box
40%
border-box
13%
margin-box
🤔 Что такое GraphQL?

GraphQL — это язык запросов к API, разработанный Facebook. Позволяет клиенту точно указать, какие данные ему нужны. Это альтернатива REST, с преимуществами:
- меньше перегрузки;
- один запрос на множество сущностей;
- гибкость на стороне клиента.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚
🔥1
🤔 Какой метод JavaScript используется для добавления одного или нескольких элементов в конец массива?
Anonymous Poll
89%
push
8%
append
0%
attach
3%
insert
🤔 Почему нельзя напрямую использовать браузерный DOM?

Потому что:
- Работа с DOM медленная;
- Частые манипуляции вручную могут привести к низкой производительности;
- Нарушается декларативный подход и целостность UI;
- React должен контролировать рендер, иначе появляются баги при повторной отрисовке.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚
🤔 Какой JavaScript API позволяет веб-приложениям отправлять обновленные данные на сервер в реальном времени без перезагрузки страницы?
Anonymous Poll
47%
WebSocket
3%
Server-Sent Events
23%
AJAX
40%
Fetch API
🤔 Что известно о своих знаниях в JS?

Можно указать знание:
- основ синтаксиса и работы с DOM;
- работы с событиями и асинхронностью (Promise, async/await);
- массивов и объектов, перебирающих методов;
- замыканий, областей видимости, this;
- опыт с инструментами разработки и отладки.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚