Вопросы кандидату на должность front-end разработчика

Вопросы кандидату на должность фронтенд-разработчика

Замечание: Этот репозиторий содержит подборку вопросов, которые могут быть использованы на собеседованиях на должность фронтенд-разработчика. Здесь предлагаются лишь идеи, не нужно задавать все вопросы сразу (иначе в один час точно не уложитесь).

Также имейте в виду, что многие вопросы не требуют однозначного короткого ответа, а лишь помогают завести беседу на ту или иную тему (предоставляя кандидату возможность показать себя во всей красе).

Содержание

  1. Авторы
  2. Общие вопросы
  3. Вопросы по HTML
  4. Вопросы по CSS
  5. Вопросы по JavaScript
  6. Вопросы по тестированию
  7. Вопросы по производительности
  8. Вопросы по сетям
  9. Примеры кода на JavaScript
  10. “Светская беседа”

[⬆] Авторы

Этот проект был запущен в 2009 году в сотрудничестве с @paul_irish @bentruyman @cowboy @ajpiano @SlexAxton @boazsender @miketaylr @vladikoff @gf3 @jon_neal @sambreed и @iansym.

В настоящее время этот проект поддерживают:

С тех пор он был активным благодаря этим замечательным людям.

[⬆] Общие вопросы:

  • Что вы изучили вчера/на этой неделе?
  • Что вас привлекает в программировании?
  • С какой технической сложностью вы недавно столкнулись и как с ней справились?
  • Какие методы для повышения производительности вы использовали при создании или обслуживании сайта?
  • Можете ли вы описать некоторые методы SEO, которые вы использовали в последнее время?
  • Можете ли вы объяснить общие принципы относительно фронтенд-безопасности или недавние проблемы, которые вы решили?
  • Какие действия вы лично предприняли в недавних проектах для повышения удобства использования вашего кода?
  • Расскажите о предпочитаемой среде разработки.
  • С какими системами контроля версий вы знакомы?
  • Можете ли вы описать порядок действий при создании новой веб-страницы?
  • Если у вас есть 5 разных файлов со стилями, какой лучший способ интегрировать их в сайт?
  • Можете ли вы описать разницу между прогрессивным улучшением и изящной деградацией?
  • Как можно оптимизировать загрузку внешних ресурсов на странице?
  • Сколько ресурсов браузер может одновременно загружать с одного домена?
    • Какие есть исключения?
  • Назовите три способа уменьшения времени загрузки страницы (воспринимаемого или реального).
  • Если вы присоединились к проекту, где для форматирования используются табы, а вы привыкли использовать пробелы, как вы поступите?
  • Опишите, как бы вы реализовали примитивное слайд-шоу.
  • Если бы у вас была возможность освоить новую технологию в этом году, что бы это было?
  • Объясните важность стандартов и комитетов по стандартам.
  • Что такое FOUC (Flash Of Unstyled Content)? Как его избежать?
  • Объясните, что такое ARIA и скринридеры, а также как сделать сайт доступным.
  • Какие преимущества и недостатки у CSS и JavaScript анимаций?
  • Что означает CORS и какую проблему решает?

[⬆] Вопросы по HTML:

  • Для чего нужен doctype?
  • Как следует оформлять страницу, содержимое которой может быть на разных языках?
  • На что необходимо обратить внимание при разработке мультиязычных сайтов?
  • Для чего нужны атрибуты, начинающиеся с data-?
  • Представьте HTML5 как открытую веб-платформу. Из каких блоков состоит HTML5?
  • Объясните разницу между cookie, sessionStorage и localStorage.
  • Объясните разницу между <script>, <script async> и <script defer>.
  • Почему хорошей практикой считается располагать <link> для подключения CSS между <head></head>, а <script> для подключения JS ставить перед </body>? Знаете ли вы исключения?
  • Что такое прогрессивная отрисовка?
  • Для чего используется атрибут srcset в теге изображения? Опишите процесс, который использует браузер при оценке содержимого этого атрибута.
  • Приходилось ли вам работать с языками HTML-шаблонизации?
  • Объясните разницу в поведении между тегами <button> и <input type="button"> внутри формы?
  • Объясните разницу между тегами <strong> и <b>?
  • Приведи примеры использования тега <label>?
  • Чем тег <a> отличается от тега <button> с точки зрения функциональности и использования?

[⬆] Вопросы по CSS:

  • Что такое специфичность CSS-селекторов и как она работает?

  • В чем разница между «сбросом» и «нормализацией» CSS? Что бы вы выбрали и почему?

  • Объясните, что такое плавающие элементы (floats) и как они работают.

  • Объясните, что такое z-index и как формируется контекст наложения.

  • Объясните, что такое блочный контекст форматирования и как он работает.

  • Какие вы знаете методы запрета обтекания (clearing) и в каких случаях они применяются?

  • Как вы решаете стилевые проблемы, связанные с особенностями браузеров?

  • Как вы обеспечиваете отображение страниц в браузерах с ограниченными возможностями?

    • Какие приёмы/процессы вы при этом используете?

  • Какими способами можно визуально скрыть элемент (оставив его доступным только для скринридера)?

  • Использовали ли вы систему сеток, и если да, то какую вы предпочитаете?

  • Приходилось ли вам использовать или реализовывать медиазапросы или вёрстку под мобильные устройства?

  • Вы знакомы со стилизацией SVG?

  • Можете ли вы привести пример свойства @media, отличного от screen?

  • На что нужно обратить внимание при написании эффективного CSS?

  • Какие преимущества/недостатки в использовании CSS препроцессоров?

    • Опишите, что вам нравится и не нравится в CSS препроцессорах, которыми вы пользовались.

  • Как вы реализуете макет, который использует нестандартные шрифты?

  • Объясните, как браузер определяет, на какие элементы накладывать CSS стили?

  • Объясните, что такое псевдоэлементы и для чего они нужны.

  • Объясните своими словами, что такое блочная модель.

  • Что делает * { box-sizing: border-box; }? В чем его преимущества?

  • Что означает свойство display и можете ли вы привести несколько примеров его использования?

  • В чем разница между строчным и блочно-строчным элементом?

  • В чем разница между относительным, фиксированным, абсолютным и статически позиционированным элементом?

  • Какими CSS-фреймворками вы пользовались? Что бы вы хотели в них изменить/улучшить?

  • Пользовались ли вы Flexbox или Grid?

  • Можете ли вы объяснить разницу между отзывчивым (responsive) сайтом и сайтом, сделанным по принципу mobile-first?

  • Вы имеете опыт работы с ретиновой графикой? Если да, то какие методы вы использовали?

  • В каком случае вы предпочтёте использовать translate() вместо абсолютного позиционирования и наоборот? И почему?

  • Можете ли вы привести пример псевдокласса?

    • Какие новые псевдоклассы появились за последние год-два?

  • В чем отличие между em и rem? Как они рассчитываются?

  • Какие проблемы появляются при попытке переопределить стили компонента их UI-библиотеки? Какие способы решения существуют?

    • Что такое @layer и как это могло бы помочь решить проблему переопределения стилей?

  • Объясните, что такое vh и vw?

    • Какие проблемы возникают на мобильных устройствах при использовании vh? Как их можно решить?

  • Что такое пользовательские css свойства?

    • Как ограничить их область видимости?

  • Какой цвет применится и почему?

.red {
  color: red;
}
.blue {
  color: blue
}
<div class="blue red">Hello world</div>
  • Как можно оптимизировать данный код? (Возможно несколько решений)
main h1 {
  color: red;
}
main p {
  color: red;
}
main a {
  color: red;
}

[⬆] Вопросы по JavaScript:

  • Объясните делегирование событий.
  • Объясните, как this работает в JavaScript.
  • Расскажите, как работает прототипное наследование.
  • Что вы думаете о AMD против CommonJS?
  • Объясните, почему это не является IIFE: function foo(){ }();.
    • Что необходимо изменить, чтобы это стало IIFE?
  • В чём различие между переменными, значение которых: null, undefined и не объявлено?
    • Как бы вы проверили их на каждое из этих значений?
  • Что такое замыкание и как/для чего его используют?
  • Можете ли вы описать основное различие между циклом forEach и циклом .map()? И в каких случаях каждый из них используется?
    • Расскажите про другие популярные методы итерации массивов.
  • В каких случаях обычно используются анонимные функции?
  • Как вы организуете свой код? (module pattern, classical inheritance)
  • В чем разница между host-объектами и нативными объектами?
  • В чем разница между: function Person(){}, var person = Person(), и var person = new Person()?
  • В чем разница между .call и .apply?
  • Что делает и для чего нужна функция Function.prototype.bind?
  • В чем разница между feature detection (определение возможностей браузера), feature inference (предположение возможностей) и анализом строки user-agent?
  • Расскажите об Ajax как можно более подробно.
  • Какие преимущества и недостатки в использовании Ajax?
  • Объясните, как работает JSONP (и почему это не совсем AJAX).
  • Вы когда-нибудь использовали шаблонизацию на JavaScript?
    • Если да, то какие библиотеки вы использовали?
  • Расскажите, что такое поднятие (hoisting).
  • Объясните, что такое всплытие событий (event bubbling).
  • В чём разница между «атрибутом» (attribute) и «свойством« (property)?
  • Почему не следует расширять нативные JavaScript-объекты?
  • В чём разница между событием document load и событием document DOMContentLoaded?
  • В чём разница между == и ===?
  • Объясните same-origin policy в контексте JavaScript.
  • Сделайте так, чтобы этот код работал:
duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]
  • Почему тернарный оператор так называется?
  • Что делает строчка "use strict";? Какие достоинства и недостатки от ее использования?
  • Напишите цикл, который перебирает числа до 100, возвращая “fizz” на числа кратные 3, “buzz” на числа кратные 5 и “fizzbuzz” на числа кратные 3 и 5
  • Почему считается хорошим тоном оставить глобальную область видимости (global scope) в нетронутом состоянии?
  • Для чего используют событие load? Есть ли у этого события недостатки? Знаете ли вы какие-либо альтернативы, и в каких случаях бы стали их использовать?
  • Расскажите, что такое одностраничное приложение, и как сделать его SEO-оптимизированным.
  • Насколько вы опытны в работе с промисами (promises) и/или их полифилами?
  • Какие преимущества и недостатки при использовании промисов вместо колбэков (callbacks)?
  • Каковы преимущества и недостатки написания JavaScript-кода на языке, который компилируется в JavaScript?
  • Какие инструменты и методы вы используете при отладке кода?
  • Какие языковые конструкции вы используете для итерации по свойствам объекта и элементам массива?
  • Объясните разницу между изменяемыми (mutable) и неизменяемыми (immutable) объектами.
    • Приведите пример неизменяемого объекта в JavaScript.
    • Какие преимущества и недостатки у неизменяемости?
    • Как вы можете достигнуть неизменяемости в вашем коде?
  • Объясните разницу между синхронными и асинхронными функциями.
  • Что такое цикл событий (event loop)?
    • В чём разница между стеком вызовов (call stack) и очередью событий (task queue)?
  • Объясните разницу при использовании foo в function foo() {} и var foo = function() {}
  • В чём различие между переменными, созданными при помощи let, var и const?
    • Можем ли мы менять свойства объекта объявленного через const? Как мы можем изменить это поведение?
  • В чём разница между классом в ES6 и функцией-конструктором в ES5?
  • Можете ли вы привести пример использования стрелочных функции =>? Чем они отличаются от других функций?
  • Дайте определение функции высшего порядка.
  • Можете ли вы привести пример деструктуризации объекта или массива?
  • Шаблонные строки в ES6 намного упрощают создание строк, можете ли вы привести пример их использования?
  • Можете ли вы привести пример каррированной функции (curry function) и в чём их преимущество?
  • В чём преимущества использования spread оператора и чем он отличается от rest оператора?
  • Каким образом можно обмениваться кодом между файлами?
  • Для чего используются статические члены класса?
  • Объясните разницу между event.target и event.currentTarget?
  • Объясните разницу между event.preventDefault() и event.stopPropagation()?

[⬆] Вопросы по тестированию:

  • Какие преимущества/недостатки в тестировании собственного кода?
  • Какие инструменты вы будете использовать для тестирования работоспособности своего кода?
  • В чём различие между юнит-тестами и функциональными/интеграционными тестами?
  • Для чего предназначены линтеры (code style linting tool)?

[⬆] Вопросы по производительности:

  • Какие инструменты вы используете, чтобы найти недостатки в производительности вашего кода?
  • Какие вы знаете способы улучшения производительности при скроллинге на вебсайте?
  • Объясните разницу между раскладкой (layout), painting и композитингом (compositing).

[⬆] Вопросы по сетям:

  • Почему лучше загружать ресурсы для сайта с нескольких доменов?
  • Опишите весь процесс, начиная с ввода адреса сайта в адресную строку до окончания его загрузки на экране.
  • В чём различия между Long-Polling, Websockets и Server-Sent Events?
  • Опишите следующие заголовки HTTP-запросов и ответов:
    • Разницу между Expires, Date, Age и If-Modified-…
    • Do Not Track
    • Cache-Control
    • Transfer-Encoding
    • ETag
    • X-Frame-Options
  • Что такое HTTP-методы? Перечислите все HTTP-методы, которые вы знаете, и объясните их.

[⬆] Примеры кода на JavaScript

Вопрос: Чему равно foo?

var foo = 10 + '20';

Вопрос: Что выводит код ниже?

console.log(0.1 + 0.2 == 0.3);

Вопрос: Как сделать, чтобы это выражение работало?

add(2, 5); // 7
add(2)(5); // 7

Вопрос: Какое значение возвращает данное выражение?

"i'm a lasagna hog".split("").reverse().join("");

Вопрос: Чему равно window.foo?

( window.foo || ( window.foo = "bar" ) );

Вопрос: Что покажут эти два alert?

var foo = "Hello";
(function() {
  var bar = " World";
  alert(foo + bar);
})();
alert(foo + bar);

Вопрос: Чему равно foo.length?

var foo = [];
foo.push(1);
foo.push(2);

Вопрос: Чему равно foo.x?

var foo = {n: 1};
var bar = foo;
foo.x = foo = {n: 2};

Вопрос: Что выводит код ниже?

console.log('one');
setTimeout(function() {
  console.log('two');
}, 0);
console.log('three');

Вопрос: В чем разница между этими четырьмя промисами (promises)?

doSomething().then(function () {
  return doSomethingElse();
});

doSomething().then(function () {
  doSomethingElse();
});

doSomething().then(doSomethingElse());

doSomething().then(doSomethingElse);

[⬆] «Светская беседа»:

  • Самое крутое, что вы когда-либо делали и чем гордитесь?
  • Что вы больше всего любите в ваших инструментах разработки?
  • Кто из фронтенд-сообщества вас вдохновляет?
  • У вас есть какие-нибудь личные проекты? Какого рода?
  • Какая ваша любимая “фишка” Internet Explorer?
  • Какой кофе вы предпочитаете?
Edit this page