Front End Developer Interview Questions

Въпроси за интервю за front-end разработчици

Това репозитори съдържа въпроси от интервюта на front-end разработчици, които могат да бъдат използвани за отсяване на потенциални кандидати. Не препоръчваме използването на всеки въпрос за всеки кандидат (това би отнело часове). Избирането на няколко въпроса от списъка би могло да помогне да се проверят търсените умения у кандидатите.

Статията Baseline For Front-End Developers на Rebecca Murphey също е чудесен ресурс за четене преди провеждането на интервю.

Бележка: Имайте предвид, че много от тези въпроси могат да породят интересни дискусии и да ви помогнат по-добре да проверите познанията и начина на мислене на кандидата, отколкото ако получавате директен отговор.

<a name='toc'>Съдържание</a>

  1. Участници в проекта
  2. Общи въпроси
  3. HTML въпроси
  4. CSS въпроси
  5. JS въпроси
  6. jQuery въпроси
  7. Въпроси, свързани с програмиране
  8. Забавни въпроси
  9. Допълнителни ресурси

####[⬆] <a name='contributors'>Участници в проекта:</a>

Мнозинството от въпроси са взети от oksoclap измислени от Paul Irish (@paul_irish) и благодарение на:

####[⬆] <a name='general'>Общи въпроси:</a>

  • Какво научихте вчера / тази седмица?
  • Какво ви привлича в писането на код?
  • Какви неща свързани с потребителския интерфейс, сигурността, бързодействието, SEO, поддръжката или технологиите взимате предвид, когато създавате уеб приложения или сайтове?
  • Разкажете за предпочитаната среда за разработка. (операционна система, редактор, браузър, инструменти и т.н.)
  • Можете ли да обясните последователността от действия, които извършвате, когато създавате уеб страници?
  • Можете ли да обясните разликите между progressive enhancement и graceful degradation?
    • Бонус точки за обяснението на feature detection (определяне на това, какво поддържа браузъра и какво не)
  • Обяснете какво означава "Semantic HTML".
  • Как бихте оптимизирали зареждането на ресурси за дадена уеб страница?
    • Има различни техники, които решават този проблем. Сред тях са:
      • Събиране на няколко файла заедно
      • Минифициране на файловете (премахване на празни места, махане на коментари и т.н.)
      • Използване на CDN за доставяне на ресурсите
      • Кеширане
      • и т.н.
  • Защо е добра идея да сайтовете да свалят ресурсите от няколко различни домейна?
    • По колко ресурса едновременно свалят браузърите от даден домейн?
  • Назовете 3 начина да намалите скоростта на зареждане на дадена страница. (забележимата или реалната скорост на зареждане)
  • Ако се присъедините към проект, който използва табулации, а вие използвате разстояния за отстъп, какво ще направите?
    • Предложете EditorConfig (http://editorconfig.org) или подобен проект
    • Използвайте конвенцията на проекта
    • Използвайте :retab! командата
  • Реализирайте примерно слайд-шоу
    • Бонус точки, ако не използвате JS.
  • Какви инструменти използвате за да тествате бързодействието на вашия код?
    • Profiler, JSPerf, Dromaeo
  • Ако можете да научите много добре 1 технология тази година, каква ще е тя?
  • Каква е разликата между Long-Polling, Websockets и SSE?
  • Обяснете важността на стандартите и организациите за стандартизация.
  • Какво е FOUC? Как се справяте с FOUC?

####[⬆] <a name='html'>HTML въпроси:</a>

  • Какво прави doctype?
  • Каква е разликата между standards mode и quirks mode?
  • Какви са ограниченията при XHTML страниците?
    • Има ли проблеми при обработката на страници с application/xhtml+xml?
  • Как връщате страници със съдържание на няколко езика?
    • Какви неща трябва да се имат предвид, когато правите дизайн или разработвате многоезични страници?
  • За какво служат HTML атрибутите, които започват с data-?
  • Представете си HTML5 като отворена уеб платформа. Кои са градивните елементи на HTML5?
  • Обяснете разликата между бисквитки, sessionStorage и localStorage.

####[⬆] <a name='css'>CSS въпроси:</a>

  • Обяснете както е "reset" CSS файл и за какво е необходим.
  • Обяснете плаващите елементи (floats) и как работят.
  • Кои са различните clearing техники и кои в какъв контекст се използват?
  • Обяснете CSS sprite-овете, и как можете да ги вкарате на уеб страница или сайт.
  • Кои са любимите ви техники, които заменят картинките и в кои случаи кои от тях използвате?
  • Коя техника предпочитате: CSS свойства за всеки браузър, условно включени .css файлове, или... нещо друго?
  • Как показвате страниците си на браузъри, които не поддържат част от възможностите на HTML5?
    • Какви техники/процеси използвате?
  • Какви са различните начини визуално да скриете съдържание от уеб страницата (и да го направите видимо само за екранните четци)?
  • Използвали ли сте грид система и ако да, коя предпочитате?
  • Използвали ли сте media queries или специфичен за мобилните платформи layouts или CSS?
  • Запознати ли сте със стилизирането на SVG?
  • Как оптимизирате вашите уеб страници за принтиране?
  • Кои са някои от "триковете" за писане на ефективен CSS?
  • Какви са предимствата/недостатъците при използване на SASS, Compass, Stylus, LESS и подобни?
    • Опишете какво ви харесва и не ви харесва при използването им.
  • Как реализирате уеб дизайни, които използват нестандартни фонтове?
    • Уеб фонтове (фонт сървиси като: Google Webfonts, Typekit и т.н.)
  • Обяснете как уеб браузърите разбират кои елементи отговарят на даден CSS селектор.
  • Как разбирате box модела и как казвате на уеб браузъра чрез CSS да рендира вашия лейаут с различен box модел.

####[⬆] <a name='js'>JS въпроси:</a>

  • Обяснете делегатите на събития
  • Обяснете как работи this в JavaScript
  • Обяснете как работят прототипните интерфейси
  • Как тествате вашия JavaScript?
  • AMD или CommonJS?
  • Какво е хеш-таблица?
  • Обяснете защо този код не работи като IIFE: function foo(){ }();.
    • Какво е нужно да се промени, за да може кодът да работи като IIFE?
  • Каква е разликата между променлива, която е: null, undefined или недекларирана?
    • Как проверявате всяко от тези състояния на променливите?
  • Какво е closure? Как и защо се използва?
  • Какви са типичните употреби на анонимните функции?
  • Обяснете "JavaScript модул патърна" и кога се използва.
    • Бонус точки за споменаване на "замърсяване на глобалния scope".
    • Какво ще стане ако модулите нямат namespace?
  • Как организирате своя код? (модул патърн, класическо наследяване?)
  • Каква е разликата между host обекти и native обекти?
  • Каква е разликата между: function Person(){}, var person = Person() и var person = new Person()?
  • Каква е разликата между .call и .apply?
  • Обяснете Function.prototype.bind?
  • Кога оптимизирате кода си?
  • Можете ли да обясните как работи наследяването в JavaScript?
  • В какви случаи бихте използвали document.write()?
    • Повечето генерирани реклами все още използват document.write()
  • Каква е разликата между feature detection, feature inference, и използването на информация, кой е браузъра?
  • Обяснете AJAX във възможно най-много детайли.
  • Обяснете как работи JSONP (и защо не е точно AJAX)
  • Използвали ли сте JavaScript темплейти?
    • Ако да, коя библиотека сте използвали? (Mustache.js, Handlebars и т.н.)
  • Обяснете "hoisting".
  • Обяснете event bubbling-а.
  • Каква е разликата между "атрибут" и "свойство"?
  • Защо extending built в JavaScript обктите не е добра идея?
  • Защо extending built е добра идея?
  • Каква е разликата между събитията "document load" и "document ready"?
  • Каква е разликата между == и ===?
  • Обяснете как да вземете query string параметъра от адреса в браузъра.
  • Обяснете same-origin policy-то от гледна точка на JavaScript.
  • Опишете патърните за наследяване в JavaScript.
  • Оправете кода, така че да работи:
javascriptCopy to clipboard
[1,2,3,4,5].duplicate(); // [1,2,3,4,5,1,2,3,4,5]
  • Опишете стратегия за memoization (избягване на повторните изчисления) в JavaScript.
  • Защо тернарният оператор се нарича така? Какво означава думата "тернарен"?
  • Какво е arity на функция?
  • Какво е "use strict";? Какви са предимствата и недостатъците от слагането му в кода?

####[⬆] <a name='jquery'>jQuery въпроси:</a>

  • Обяснете "chaining".
  • Обяснете "deferreds".
  • Какви специфични за jQuery оптимизации, можете да направите?
  • Какво прави .end()?
  • Как и защо бихте сложили bound event handler в namespace?
  • Назовете 4 различни типа стойности, които можете да подадете на jQuery метод.
    • Selector (string), HTML (string), Callback (function), HTMLElement, object, array, element array, jQuery Object etc.
  • Какво е effects (или fx) queue?
  • Каква е разликата между .get(), [], и .eq()?
  • Каква е разликата между .bind(), .live(), и .delegate()?
  • Каква е разликата между $ и $.fn? Или просто: Какво е $.fn?
  • Оптимизирайте този селектор:
javascriptCopy to clipboard
$(".foo div#bar:eq(0)")

####[⬆] <a name='jscode'>Въпроси, свързани с програмиране:</a>

javascriptCopy to clipboard
modulo(12, 5) // 2

Въпрос: Имплементирайте функция за намиране на остатък от деление която отговаря на горното условие (да връща 2 при аргументи 12 и 5)

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

Въпрос: Каква стойност ще върне горният израз?

Отговор: "goh angasal a m'i"

javascriptCopy to clipboard
( window.foo || ( window.foo = "bar" ) );

Въпрос: Каква е стойността на window.foo?

Отговор: "bar", ако window.foo има стойност false, иначе стойността на window.foo)

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

Въпрос: Какво ще изкарат двете alert функции от горния код?

Отговор: "Hello World" и ReferenceError: bar is not defined

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

Въпрос: Каква е стойността на foo.length?

Отговор: 2

####[⬆] <a name='fun'>Забавни въпроси:</a>

  • Кое е най-якото нещо, което сте писали и от което сте най-горд?
  • Кое най-много ви допада в инструментите за разработчици, които използвате?
  • Разработвате ли някакви проекти като хоби? Какви?
  • Какво най-много ви харесва в Internet Explorer?

####[⬆] <a name='references'>Допълнителни ресурси:</a>

  • http://programmers.stackexchange.com/questions/46716/what-technical-details-should-a-programmer-of-a-web-application-consider-before
  • http://www.nczonline.net/blog/2010/01/05/interviewing-the-front-end-engineer/
  • http://css-tricks.com/interview-questions-css/