Какие вопросы задают на фронтенд-интервью ведущие мировые компании?

оригинал:Дэвид riff.com/blog/pre par…

Дэвид Шариф (руководитель группы инфраструктуры пользовательского интерфейса Amazon)

Перевод: сумасшедший технический ботаник

За последние несколько лет я брал интервью у многих фронтенд-инженеров в Amazon и Yahoo. В этом посте я хочу поделиться некоторыми советами, которые помогут вам подготовиться.

Отказ от ответственности: Цель этой статьи не в том, чтобы перечислить вопросы, которые вам могут задать на фронтенд-интервью, но ее можно считать запасом знаний.

Интервью — это сложно. Как кандидату, вам обычно дается 45 минут, чтобы продемонстрировать свои навыки. Интервьюеру также сложно оценить пригодность человека для работы за такой короткий период времени. Когда дело доходит до интервьюирования, не существует единого шаблона для всех, интервьюеры обычно охватывают определенную область, но помимо этого они сами решают, какие вопросы следует задавать.

Независимо от того, с какой стороны стола для собеседования вы сидите, в этой статье мы постараемся охватить наиболее важные области фронтенд-разработки.

распространенные заблуждения

Одна из самых больших ошибок, которые, как я вижу, делают интервьюеры, — это подготовка тривиальных вопросов, таких как «Что такое блочная модель?» или «Расскажите мне, в чем разница между == и === в JavaScript?» и т. д.Знать ответы на эти вопросы — это здорово, но это не говорит интервьюеру, насколько вы хороши на самом деле.

Вместо этого вы должны провести очень практическую подготовку к собеседованию и действительно продемонстрировать свои навыки программирования на JavaScript, CSS и HTML. Подготовка к собеседованию включает в себя реализацию пользовательского интерфейса, создание виджетов или реализацию функций, обычно встречающихся в таких библиотеках, как Lodash и Underscore.js, таких как:

Создавайте макеты и взаимодействия для распространенных веб-приложений, таких как веб-сайт браузера Netflix.
Внедрите виджеты, такие как средства выбора даты, карусели или корзины для покупок в электронной коммерции.
Напишите такие функции, как debounce или объекты глубокого клонирования.

Когда дело доходит до библиотек, еще одна распространенная ошибка заключается в том, что людям нравится полностью полагаться на новейшие фреймворки для решения задач на собеседовании. Вы можете подумать: зачем изобретать велосипед, если я могу использовать jQuery, React, Angular и т. д. в разработке, и почему я не могу использовать его на собеседованиях? Хороший вопрос, технологии, фреймворки и библиотеки со временем всегда будут меняться - меня больше интересует:Вам нужно понимать основы фронтенд-разработки вместо того, чтобы полагаться на абстракции более высокого уровня.. Если вы не можете ответить на вопросы интервью, не полагаясь на эти библиотеки, я надеюсь, вы сможете хотя бы подробно объяснить и высказать предположения о том, что библиотеки делают за кулисами.

В целом, вы должны ожидать, что большинство собеседований будут очень практичными.

JavaScript

Вам нужно знать JavaScript, и глубоко.На собеседованиях чем выше уровень, тем выше ожидание глубины знания языка.Как минимум, вот то, с чем вы должны быть знакомы в JavaScript:

Контекст выполнения, особенно лексическая область видимости и замыкания.
Механизмы подъема, область видимости функций и блоков, а также выражения и объявления функций.
Привязки - в частности вызов, привязка, применение и эти ключевые слова.
Прототипы объектов, конструкторы и миксины.
Комбинаторные функции и функции высшего порядка.
Делегирование времени и барботирование.
typeof, instanceof и Object.prototype.toString.
Обрабатывайте асинхронные вызовы с обратными вызовами, промисами, ожиданием и асинхронностью.
Когда использовать объявления функций и выражения.

DOM

То, как он проходит и манипулирует DOM, имеет значение, и если они полагаются на jQuery или пишут много приложений типа React и Angular, это то, с чем большинство интервьюируемых должны бороться. Вы, вероятно, не делаете это каждый день, потому что большинство из нас использует абстрактные сортировки. Но не полагаясь на сторонние библиотеки, вы должны знать, как сделать следующее:

Выберите или найдите узлы, используя document.querySelector и document.getElementsByTagName в старых браузерах.
Перемещайтесь вверх и вниз: Node.parentNode, Node.firstChild, Node.lastChild и Node.childNodes.
Обход слева и справа: Node.previousSibling и Node.nextSibling.
Действия: Добавляйте, удаляйте, копируйте и создавайте узлы в дереве DOM. Вы должны знать, как изменять текстовое содержимое узлов, а также переключать, удалять или добавлять имена классов CSS.
Производительность. Манипулирование DOM может быть дорогостоящим, если у вас много узлов, поэтому вы должны, по крайней мере, знать о фрагментах документа и кэшировании узлов.

CSS

По крайней мере, вы должны знать, как размещать элементы на странице, как находить элементы с помощью дочерних элементов или непосредственно с помощью селекторов потомков, а также когда использовать классы и идентификаторы.

Макет: размещение элементов рядом друг с другом и как размещать элементы в две или три колонки.
Адаптивный дизайн: изменение размеров элементов в зависимости от ширины браузера.
Адаптивный дизайн: изменение размеров элементов на основе определенных контрольных точек.
Специфичность: как рассчитать специфичность селектора и как каскад влияет на свойства.
Используйте соответствующие пространства имен и имена классов.

HTML

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

Семантическая разметка.
Отметьте такие атрибуты, как отключено, асинхронно, отложенно и когда использовать data-*.
Знайте, как объявить свой тип документа (многие люди забывают об этом, потому что они не пишут новые страницы каждый день) и какие метатеги использовать.
Проблемы доступности, например, убедитесь, что флажок ввода имеет большую область отклика (используя метку «для»). Также есть role="button", role="presentation" и т.д.

Системный дизайн

Собеседования по проектированию серверной системы обычно предполагают знание MapReduce, проектирование распределенных хранилищ ключей и значений или знание теоремы CAP.Хотя ваша работа с интерфейсом не требует глубокого понимания того, как устроены такие системы, не удивляйтесь, когда вас попросят разработать интерфейсную архитектуру для обычных приложений.. Часто эти вопросы будут задавать расплывчато, например, «создайте сайты, такие как Pinterest» или «Скажите мне, как создать сервис оплаты покупок?». Ниже приведены области, которые следует учитывать:

Рендеринг: рендеринг на стороне клиента (CSR), рендеринг на стороне сервера (SSR) и универсальный рендеринг.
Макет: если вы проектируете систему, которая используется несколькими командами разработчиков, вам необходимо подумать о создании компонентов и необходимости того, чтобы команды следовали согласованной спецификации для использования этих компонентов.
Управление состоянием: например, выбор между односторонним потоком данных или двусторонней привязкой данных. Вы также должны учитывать, соответствует ли ваш дизайн модели реактивного или реактивного программирования, и как компоненты должны соотноситься друг с другом.
Асинхронные потоки: вашим компонентам может потребоваться связь с сервером в режиме реального времени. Ваш проект должен учитывать XHR и двунаправленные вызовы. Если интервьюер просит вас поддерживать старые браузеры, ваш дизайн должен выбирать между скрытыми iFrames, тегами script или XHR для обмена сообщениями. Если нет, вы можете предложить использовать веб-сокеты или решить, что события, отправленные сервером (SSE), лучше.
Разделение проблем: шаблоны MVC, MVVM и MVP.
Поддержка нескольких устройств. Будет ли в вашем проекте использоваться одна и та же реализация для веб-приложений, мобильных веб-приложений и гибридных приложений или отдельные реализации? Если вы разрабатываете такой сайт, как Pinterest, вы можете предусмотреть три столбца в Интернете, но только один столбец на мобильных устройствах, как ваш дизайн должен справиться с этим?
Доставка: в больших приложениях независимые команды нередко имеют собственную кодовую базу. Эти разные кодовые базы могут зависеть друг от друга, и каждая кодовая база обычно имеет собственный конвейер для выпуска изменений в рабочую среду. Ваш проект должен учитывать, как эти ресурсы создаются с использованием зависимостей (разделение кода), тестов (модульных и интеграционных тестов) и развертывания. Вам также следует подумать о том, как распределять ресурсы через CDN или встраивать их, чтобы уменьшить задержку в сети.

производительность сети

В дополнение к общим методам программирования вы должны ожидать, что интервьюеры будут смотреть на ваш код или дизайн и их влияние на производительность. Раньше было достаточно разместить CSS вверху страницы, а сценарии JS внизу, но Интернет развивается быстро, и вы должны быть знакомы со сложностями в этой области.

критический путь рендеринга.
Работники обслуживания.
Оптимизация изображения.
Ленивая загрузка и разделение пакетов.
Общее значение HTTP/2 и серверной загрузки.
Когда выполнять предварительную выборку и предварительную загрузку ресурсов.
Уменьшите перекомпоновку браузера и время, когда рендеринг элементов должен быть передан графическому процессору.
Различия между макетом браузера, композитингом и рисованием.

Структуры данных и алгоритмы

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

Я не говорю, что вам нужна степень CS, но индустрия больше не занимается написанием простой страницы.. В Интернете есть множество ресурсов, и вы можете быстро освоить основы.

Общие веб-знания

Вам необходимо освоить технологии и парадигмы, из которых состоит Интернет.

HTTP-запросы: GET и POST и связанные заголовки, такие как Cache-Control, ETag, коды состояния и Transfer-Encoding.
ОТДЫХ и RPC.
Безопасность: когда использовать политики JSONP, COR и iFrame.

Суммировать

Чтобы быть веб-разработчиком или инженером, требуется много знаний.Не ограничивайтесь глубиной требуемых знаний, но сохраняйте открытость и изучайте все сложные методы, необходимые для развития.

Помимо технических тем, затронутых в этой статье, на собеседовании вам также нужно будет рассказать о своих прошлых проектах, описать интересные изломы и компромиссы.

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

Оригинальный текст был впервые опубликован в публичном аккаунте Jingcheng Yideng: jingchengyideng

Подпишитесь на общедоступную учетную запись jingchengyideng и ответьте «6», чтобы получить общее представление о системе знаний, упомянутой в этой статье. Узнайте, каких очков навыков вам не хватает из вашей годовой зарплаты в 400 000.