Общие вопросы:
- Кого из мировых 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
Достойный список как для собеседующего так и для собеседуемого. Убрал идиотские вопросы. Убрал идиотское обращение “Вы” с большой буквы.
Список не полный? Напиши в комментарии какой твой любимый вопрос для собеседования.