Вопросы на собеседование фронтендщика (javascript, html, css)

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

  • Кого из мировых front-end разработчиков вы знаете?
  • У вас есть аккаунт на GitHub?
    • Если да, то за какими интересными проектами вы следите?
  • Какие блоги вы читаете?
  • Какие системы управления версиями Вам приходилось использовать?
  • Расскажите о своей среде разработки (ОС, редактор, браузер(ы), прочие инструменты)
  • Опишите последовательность ваших действий, когда вы создаете новую Web-страницу
  • Можете ли пояснить разницу между progressive enhancement и graceful degradation?
    • Бонус, если также расскажете про feature detection (определение возможностей браузера)
  • Объясните, что означает “Семантическая разметка”
  • Какой ваш основной браузер для разработки и какими инструментами вы в нем пользуетесь?
  • Как можно оптимизировать загрузку внешних ресурсов на странице?
    • Комбинация из потенциальных решений:
      • Конкатенация
      • Минификация
      • Использование CDN
      • Кеширования
      • и т.д.
  • Каково преимущество в подгрузке внешних ресурсов с нескольких доменов?
    • Сколько ресурсов браузер может одновременно качать с одного домена?
  • Назовите три способа уменьшения времени загрузки страницы (воспринимаемого или реального)
  • Если вы присоединились к проекту, где для форматирования используются табы, а вы привыкли использовать пробелы, как вы поступите?
  • Используете ли приёмы для ускорения написания кода (сниппеты, Emmet)?
  • Знакомы ли с шаблонизаторами (Smarty, HAML etc.)
  • Реализуйте примитивное слайд-шоу
  • Какие инструменты вы используете для тестирования производительности кода?
  • Если бы у вас была возможность освоить новую технологию в этом году, что бы это было?
  • Объясните важность стандартов и комитетов по стандартам

Вопросы по HTML:

  • Для чего нужен doctype и сколько разновидностей вы можете назвать?
  • В чем разница между standards mode и quirks mode?
  • Как следует оформлять страницу, в которой контент может быть на разных языках?
  • Что нужно иметь в виду при разработке многоязычных сайтов?
  • Можно ли использовать синтаксис XHTML в HTML5?
  • Как использовать XML в HTML5?
  • Чем полезны data- атрибуты?
  • Какие box-модели есть в HTML4 и есть ли отличия в HTML5?
  • Если рассматривать HTML5 как открытую web-платформу, на чем она строится, из каких компонентов состоит?
  • Объясните разницу между cookies, sessionStorage и localStorage.
  • Знакомы ли с подводными камнями вёрстки почтовых шаблонов?
  • Какая разница между GET и POST?

Вопросы по JavaScript:

  • Какими js-библиотеками вы пользовались?
  • вы когда-нибудь заглядывали в исходный код библиотек/фреймворков, которыми пользовались?
  • Что-такое хэш-таблица?
  • Что такое неопределенные (undefined) и необъявленные (undeclared) переменные?
  • Что такое замыкание и как/для чего его используют?
  • Где обычно используются анонимные функции?
  • Объясните “JavaScript module pattern” и где он (паттерн) применяется
  • Как вы организуете свой код? (module pattern, наследование)
  • В чем разница между host-объектами и нативными объектами?
  • В чем разница между последними двумя строчками:
function Person(){}

var person = Person()
var person = new Person()
  • В чем разница между .call и .apply?
  • Что делает и для чего нужна функци Function.prototype.bind?
  • Когда вы оптимизируете свой код?
  • Объясните, как работает наследование в JavaScript?
  • Где до сих пор используется document.write()?
  • В чем разница между feature detection (определение возможностей браузера), feature inference (предположение возможностей) и анализом строки user-agent?
  • Расскажите об AJAX как можно более подробно
  • Объясните, как работает JSONP
  • Вы когда-нибудь использовали шаблонизацию на JavaScript?
    • Если да, какие библиотеки использовали? (Mustache.js, Handlebars etc.)
  • Объясните, что такое “hoisting”
  • Объясните event bubbling
  • В чем разница между “атрибутом” (attribute) и “свойством” (property)?
  • Когда не следует расширять нативные JavaScript объекты?
  • Когда следует расширять нативные JavaScript объекты?
  • В чем разница между событиями document load и document ready?
  • В чем разница между == и ===?
  • Как получить параметры из URL’а текущего окна?
  • Объясните same-origin policy в контексте JavaScript
  • Объясните event delegation
  • Какие вы знаете паттерны организации наследования в JavaScript?
  • Сделайте так, чтобы этот код работал:
[1,2,3,4,5].duplicator(); // [1,2,3,4,5,1,2,3,4,5]
  • Опишите принцип мемоизации (избежание повторных вычислений) в JavaScript
  • Что делает строчка "use strict";? Какие достоинства и недостатки от ее использования?

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

~~3.14

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

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

Вопрос: Какое значение возвращает данное предложение?
Ответ: "goh angasal a m’i"

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

Вопрос: Чему равно window.foo?
Ответ: “bar”,
только если выражение window.foo было ложным, иначе переменная сохранит своё изначальное значение

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

Вопрос: Что покажут эти два alert?
Ответ: “Hello World” и ReferenceError: bar is not defined

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

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

var foo = {};
foo.bar = 'hello';

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

Вопросы по jQuery:

  • Объясните “chaining”.
  • Объясните “deferreds”.
  • Какие вы знаете приемы оптимизации кода, использующего jQuery?
  • Что делает .end()?
  • Как добавить пространство имён к обработчику событий? Для чего это нужно?
  • Назовите 4 разных вида аргументов, которые принимает функция jQuery()?
  • Что такое очередь эффектов (fx queue)?
  • В чем разница между .get(), [], и .eq()?
  • В чем разница между .bind(), .live(), и .delegate()?
  • В чем разница между $ и $.fn? Что вообще такое $.fn?
  • Оптимизируйте данный селектор:
$(".foo div#bar:eq(0)")

Вопросы по CSS:

  • Что такое “reset” CSS и для чего они нужены?
  • Объясните, что такое плавающие элементы (floats) и как они работают?
  • Какие вы знаете методы запрета обтекания (clearing) и какие где применяются?
  • Что такое CSS спрайты? Как они реализуются на странице или сайте?
  • Как вы обеспечиваете отображение страниц в старых/ограниченных браузерах?
    • Какие приёмы/процессы вы при этом используете?
  • Какими способами можно визуально скрыть элемент (оставив его доступным для экранного диктора, screen reader)?
  • Вы когда-нибудь использовали сеточную верстку (grid system, grid design)? Если да, какая Ваша любимая?
  • Приходилось ли Вам использовать или реализовывать media queries или верстку под мобильные устройства?
  • Приходилось ли Вам стилизовать SVG?
  • Как оптимизировать страницы для печати?
  • Какие есть подводные камни в оптимизации производительности CSS?
  • Вы используете CSS препроцессоры? (SASS, Compass, Bourbon, Stylus, LESS)
    • Если да, расскажите, что Вам в них нравится и не нравится?
  • Как вы сверстаете макет, который использует нестандартные шрифты?
    • Webfonts (сервисы вроде Google Webfonts, Typekit, Fontsquirrel etc.)
  • Объясните, как браузер определяет, на какие элементы накладывать CSS стили?
  • Слышали ли о системе БЭМ (Блок-Элемент-Модификатор)?
    • Если да, то в чем её суть? Расскажите о системе нотификации селекторов.

“Светская беседа”:

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

Источник https://github.com/h5bp/Front-end-Developer-Interview-Questions/tree/master/Translations


Достойный список как для собеседующего так и для собеседуемого. Убрал идиотские вопросы. Убрал идиотское обращение “Вы” с большой буквы.

Список не полный? Напиши в комментарии какой твой любимый вопрос для собеседования.

6 лайков

“любимый” это кейсы, годта тебе озвучивают гипотетические ситуации, и смотрять как ты себя поведешь. Любимый в кавичках, вы поняли что далеко не любимый).
И, как правило, ситуации всегда такие дурацкие, не всегда понимаешь как правильно ответить…

P.S. Кому интиресно можете прочитать статью от Славы Сергеенко интервью для джуниоров

1 лайк

Годная статья, пишет по делу. Единственное что очень редко встречал глубокий подход к анализу мыслей кандидата. Это очень энергозатратный процесс, а кандидатов проходит так много, то отбор сводится или к процессам и чеклистам в случае большой организации, или к опытному суждению рекрутера в случае мелкой.