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

Сотрудничество: @cyberJohnny
Download Telegram
🤔 Как можно ускорить загрузку сайта?

1. Оптимизировать изображения (сжать и использовать современные форматы, например, WebP).
2. Использовать кэширование данных (например, через CDN).
3. Минифицировать CSS, JS и HTML.
4. Асинхронно загружать сторонние скрипты и шрифты.
5. Использовать lazy loading для изображений и компонентов.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚
🤔 Какое свойство CSS позволяет элементу читать и поддерживать его размеры, даже если окно браузера изменяется?
Anonymous Poll
31%
resize
13%
adaptation
44%
fit-content
13%
flex-grow
🤔 Какой атрибут HTML используется для определения стилей, написанных прямо в элементе?
Anonymous Poll
79%
style
3%
class
9%
styles
12%
stylesheet
🤔 Что такое margin collapse и для чего?

Margin collapse — это схлопывание внешних отступов между вертикально соседствующими элементами.
Если один элемент имеет margin-bottom, а следующий — margin-top, будет применён наибольший из них, а не сумма. Это упрощает вертикальные отступы.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚
🤔 Какой метод JavaScript используется для определения наличия и доступности определенных функций в браузере пользователя, например, API для работы с геолокацией?
Anonymous Poll
60%
navigator.exists()
4%
feature.detect()
0%
Modernizr.check()
40%
navigator.permissions.query()
🤔 Как в JavaScript сделать так, чтобы функция выполнялась каждые 2 секунды?
Anonymous Poll
83%
setInterval(myFunction, 2000);
11%
setTimeout(myFunction, 2000);
3%
repeat(myFunction, 2000);
3%
loop(myFunction, 2000);
🤔 Какие есть типы функций?

Есть обычные именованные функции, анонимные, стрелочные, методы объектов, функции-конструкторы, рекурсивные и колбэки. Каждая из них имеет своё назначение и особенности поведения.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚
🤔 Какое значение атрибута target в <a> открывает ссылку в новом окне браузера?
Anonymous Poll
98%
_blank
0%
_self
2%
_top
0%
_parent
🤔 Какое значение будет в переменной n после выполнения следующего кода?
let n = new Set([1, 2, 3, 2, 1]).size;
Anonymous Poll
0%
2
54%
3
15%
4
31%
5
🤔 В чём заключаются недостатки SSR?

- Задержка при первом рендеринге;
- Нагрузка на сервер;
- Сложность интеграции с клиентским SPA-приложением;
- Повышенные требования к инфраструктуре.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚
🤔 Какое значение будет в переменной h после выполнения следующего кода?
let h = "JavaScript"; h = h.substring(0, 4);
Anonymous Poll
3%
JavaScript
76%
Java
9%
Script
12%
JavaS
🤔 Как оптимизировать загрузку картинок на странице?

- Использовать современные форматы: WebP, AVIF;
- Применять lazy loading (loading="lazy");
- Использовать srcset и sizes для адаптивных изображений;
- Минимизировать размер изображений без потери качества;
- Хранить изображения в CDN для быстрой доставки;
- Использовать кэширование и оптимизацию по размеру экрана.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚
🤔 Какой тип CSS-свойства background-clip определяет, что фон будет ограничен контентом элемента?
Anonymous Poll
22%
border-box
4%
padding-box
70%
content-box
4%
margin-box
🤔 Какой атрибут тега <meta> задаёт описание страницы, которое обычно отображается в результатах поиска?
Anonymous Poll
33%
name="description"
11%
name="keywords"
33%
content="description"
22%
type="description"
🤔 Что такое элемент в HTML5?

— элемент для отображения результата вычислений, например, итогов формул или изменения значения range. Может обновляться с помощью JS.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚
🤔 Какое свойство CSS используется для установки внешних отступов элемента?
Anonymous Poll
3%
padding
6%
border
91%
margin
3%
spacing
🤔 Какой метод JavaScript используется для асинхронной загрузки скрипта, который затем можно выполнить?
Anonymous Poll
22%
loadScript()
44%
import()
22%
require()
11%
getScript()
🤔 Из чего состоит Vuex?

Vuex состоит из:
- State — единый источник данных;
- Getters — вычисляемые свойства на основе state;
- Mutations — синхронные изменения состояния;
- Actions — асинхронные операции, вызывающие мутации;
- Modules — логическое разделение стора на части.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚
🤔 Что вернёт следующий код: console.log(0 || "default");?
Anonymous Poll
21%
0
59%
"default"
15%
true
6%
false
🤔 Как работают свойства flex-grow и flex-shrink?

- flex-grow: насколько элемент увеличивается, если доступно дополнительное пространство;
- flex-shrink: насколько элемент уменьшается, если пространство ограничено.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚
🤔 Какой метод JavaScript позволяет выполнить функцию после завершения всех макрозадач, но перед следующей итерацией цикла событий?
Anonymous Poll
45%
setTimeout()
19%
setImmediate()
23%
nextTick()
19%
queueMicrotask()