Ру­ко­вод­ство для про­хож­де­ния ин­тер­вью по фрон­тен­ду

Перевод «Front-end interview handbook»

Редактировать статью на Гитхабе

Юн Хен Тай

Перевод Алёна Батицкая

Редактура Вадим Макеев

Часть 1. HTML Скопировать ссылку

Картинка yangheng

Что это такое? Скопировать ссылку

В отличие от типичного собеседования с разработчиками ПО, на собеседованиях фронтенд-разработчиков меньше внимания уделяется алгоритмам. Большая часть вопросов касается специфичных знаний и компетенций в таких областях, как HTML, CSS, JavaScript.

Несмотря на то, что существуют ресурсы, призванные помочь в подготовке к собеседованию, они сильно отличаются по полноте материалов от тех же ресурсов для разработчиков ПО. Среди того, что существует на сегодняшний день, наиболее полезным может быть сборник вопросов Front-end Developer Interview Questions. К сожалению, на многие вопросы я не смог найти в сети полные и удовлетворяющие ответы. Поэтому в документе ниже я постарался самостоятельно ответить на них. Будучи открытым репозиторием, этот проект может жить и развиваться благодаря сообществу, поскольку интернет эволюционирует.

Нужна более общая подготовка? Скопировать ссылку

Вас может заинтересовать Tech Interview Handbook, в котором содержится информация для прохождения общих технических интервью, в частности описаны алгоритмы, даны ответы на вопросы по софт-скиллс. Также есть Interview Cheatsheet!

Вопросы по HTML Скопировать ссылку

Ответы на вопросы из списка Front-end Job Interview Questions — HTML Questions. Комментарии с предложениями по улучшению и дополнению приветствуются!

Что делает DOCTYPE? Скопировать ссылку

<!DOCTYPE> — это сокращение от «document type» (тип документа). Он объявляется в HTML для того, чтобы различать стандартный режим или режим совместимости (quirks mode). Его наличие говорит браузеру работать со страницей в стандартном режиме.

Мораль истории — просто добавляй <!DOCTYPE html> в начало страницы.

Ссылки Скопировать ссылку

Как поддерживать страницу на нескольких языках? Скопировать ссылку

Вопрос немного расплывчатый. Полагаю, что речь о наиболее частом случае: как поддерживать страницу с содержимым на нескольких языках, где одновременно должен отображаться только один язык.

Когда к серверу делается HTTP-запрос, то браузер пользователя обычно отсылает информацию о предпочитаемом языке в заголовке Accept-Language. Сервер может использовать эту информацию, чтобы вернуть версию документа на подходящем языке, если такая возможность есть. В возвращенном HTML-документе обязательно должен быть указан атрибут lang у тега <html>, к примеру <html lang="en">.

На бэкенде HTML-разметка будет содержать плейсхолдер i18n, а контент для конкретного языка будет хранится в YML- или JSON-формате. Сервер динамически формирует HTML-страницу с контентом на конкретном языке, чаще всего при помощи бэкенд-фреймворка.

Ссылки Скопировать ссылку

На что обратить внимание при разработке мультиязычных сайтов? Скопировать ссылку

  • Используй атрибут lang в HTML.
  • Перенаправляй пользователей на версию сайта на их языке. Позволяйте быстро и без проблем изменить страну и язык.
  • Текст на картинках плохо поддается адаптации. Многие до сих пор помещают текст на картинки чтобы получить хорошо выглядящий несистемный шрифт на любом компьютере. Однако чтобы перевести текст картинкой, нужно иметь подготовленную картинку с каждой строкой текста для каждого языка. При большом количестве текста это быстро выйдет из под контроля.
  • Ограничение длины слов и предложений. Некоторый контент может быть длиннее при написании на другом языке. Будьте внимательны к макету и проверяйте поведение блоков при переполнении. Количество символов важно в таких элементах, как заголовки, лейблы и кнопки. Но не так важно в основном тексте или в блоке комментария.
  • Помните о восприятии цветов. В разных языках и культурах цвета имеют разное значение. Дизайн должен учитывать эти особенности.
  • Форматируете даты и валюты. Календарные даты иногда пишутся по-разному. Например, «Май 31, 2012» в Америке или «31 мая 2012» в большинстве стран Европы.
  • Не склеивайте переведенные строки. Не пишите что-то вроде "Сегодняшняя дата " + date. Эта фраза будет выглядеть коряво на языках с другим порядком слов. Вместо этого используйте параметры шаблона.
  • Разные направления чтения. В русском мы читаем слева направо, сверху вниз. В традиционном японском языке текст читается сверху вниз, справа налево.

Ссылки Скопировать ссылку

Для чего отлично подойдут data-атрибуты? Скопировать ссылку

До того, как JavaScript-фреймворки стали популярны, фронтенд-разработчики использовали data-атрибуты чтобы хранить дополнительные данные прямо в DOM без хаков вроде нестандартных атрибутов или дополнительных свойств в DOM. Атрибуты этого семейства предназначены для хранения частных данных пользователя, для которых не существует более подходящих атрибутов или элементов, на странице или в приложении.

На сегодняшний день использование data-атрибутов не поощряется. Одной из причин является то, что пользователь может модифицировать данные в атрибуте, используя инспектор кода в браузере. Данные лучше хранить в самом JavaScript и обновлять DOM при помощи связывания данных через библиотеку или фреймворк.

Ссылки Скопировать ссылку

Представьте HTML5 как открытую веб-платформу. Из каких блоков состоит HTML5? Скопировать ссылку

  1. Семантика. Позволяет более точно описать из чего состоит контент.
  2. Связанность. Позволяет общаться с сервером новыми и инновационными способами.
  3. Офлайн и хранилище. Позволяют страницам хранить данные локально на клиентской стороне и более эффективно работать в офлайне.
  4. Мультимедиа. Ставит создание видео и аудио на первое место в вебе.
  5. 2D- и 3D-графика и эффекты. Позволяет расширить возможности презентации.
  6. Производительность и интеграция. Обеспечивает большую скорость оптимизации и лучшее использование аппаратных средств.
  7. Доступ к устройствам. Позволяет взаимодействовать с различными устройствами ввода и вывода.
  8. Стилизация. Позволяет создавать более сложные темы оформления.

Ссылки Скопировать ссылку

Объясните разницу между cookie, sessionStorage и localStorage. Скопировать ссылку

Все вышеупомянутые технологии являются механизмами хранения типа ключ-значение на клиентской стороне. Они могут хранить данные только как строки.

Cookie Скопировать ссылку

  • Инициатор: клиент или сервер. Сервер может использовать заголовок Set-Cookie.
  • Срок хранения: устанавливается вручную.
  • Хранение между сессиями: зависит от установки срока хранения.
  • Связь с доменом: да.
  • Отправка на сервер с каждым HTTP-запросом: автоматически, с помощью заголовка Cookie.
  • Емкость, на один домен: 4 КБ.
  • Доступность: в любом окне.

Local Storage Скопировать ссылку

  • Инициатор: клиент.
  • Срок хранения: всегда.
  • Хранение между сессиями: да.
  • Связь с доменом: нет.
  • Отправка на сервер с каждым HTTP-запросом: нет.
  • Емкость, на один домен: 5 МБ.
  • Доступность: в любом окне.

Session Storage Скопировать ссылку

  • Инициатор: клиент.
  • Срок хранения: до закрытия вкладки.
  • Хранение между сессиями: нет.
  • Связь с доменом: нет.
  • Отправка на сервер с каждым HTTP-запросом: нет.
  • Емкость, на один домен: 5 МБ.
  • Доступность: в той же вкладке.

Ссылки Скопировать ссылку

Разница между <script>, <script async> и <script defer> Скопировать ссылку

  • <script> — отрисовка HTML блокируется, скрипт извлекается и выполняется немедленно, отрисовка HTML возобновляется после окончания выполнения скрипта.
  • <script async> — скрипт будет извлечен и обработан параллельно с отрисовкой HTML, его выполнение закончится как только это будет возможно (обычно до того, как закончилась отрисовка HTML). Используйте async тогда, когда скрипт не зависит от других скриптов на странице, например для аналитики.
  • <script defer> — скрипт будет извлечен параллельно с отрисовкой HTML, его выполнение произойдет после того, как вся страница будет загружена. Если таких скриптов несколько, то каждый из них будет исполнятся в том порядке, в котором они расположены в документе. Если скрипту нужен полностью распарсеный DOM, то атрибут defer обеспечит уверенность в том, что на момент отработки скрипта весь HTML отрисован. Нет особой разницы со скриптами, расположенными перед тегом <body>. Отложенный скрипт не должен содержать document.write.

Примечание: Атрибуты async и defer игнорируются, если у тега <script> нет атрибута src.

Ссылки

Почему хорошей практикой считается располагать <link> для подключения CSS между <head></head>, а <script> для подключения JS ставить перед </body>? Знаете ли вы исключения? Скопировать ссылку

Размещение <link> внутри <head> Скопировать ссылку

Необходимость помещать теги <link> внутри шапки сайта описана в спецификации. Кроме того, размещение в верхней части разметки позволяет загружать страницу постепенно, что хорошо отражается на опыте использования. Проблема, возникающая при размещении таблиц стилей в нижней части страницы, заключается в том, что этот порядок препятствует прогрессивной загрузке страницы во многих браузерах. В том числе в Internet Explorer. Некоторые браузеры блокируют загрузку страницы, чтобы избежать перерисовки элемента, если его стили изменятся. Все это время пользователь будет пялиться на белый экран. Такое поведение браузеров предотвращает мерцание или отрисовку нестилизованых элементов.

Размещение <script> прямо перед </body> Скопировать ссылку

Теги <script> блокируют отрисовку HTML на то время, пока они скачиваются и исполняются. Скачивание скриптов в конце позволяет сперва распарсить и показать пользователю весь HTML.

Исключением является случай, когда в вашем скрипте содержится document.write(). Но на сегодняшний день его использование не считается хорошей практикой. К тому же, расположение скриптов внизу разметки означает, что браузер не может начать их скачивать до тех пор, пока не отрисован весь документ. Единственным рабочим способом, при котором <script> будет расположен внутри <head>, является добавление атрибута defer.

Ссылки Скопировать ссылку

Что такое прогрессивный рендеринг? Скопировать ссылку

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

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

Примеры технологий:

  • Ленивая загрузка картинок. Картинки на странице не загружаются все разом. JavaScript подгрузит картинки тогда, когда пользователь доскроллит до той части страницы, на которой они расположены.
  • Приоритизация видимого контента. Только минимум CSS, контента, скриптов, необходимых для отрисовки той части страницы, которую пользователь увидит первой. Вы можете использовать отложенные скрипты или слушать события DOMContentLoaded или load, чтобы загрузить остальные ресурсы и контент.
  • Асинхронные фрагменты HTML. Отправка в браузер частей HTML-страницы, созданной на бэкенде. Более подробно про эту технологию можно почитать в этой статье.

Ссылки Скопировать ссылку

Приходилось ли вам работать с языками HTML-шаблонизации? Скопировать ссылку

Да, Pug (ранее известный как Jade), ERB, Slim, Handlebars, Jinja, Liquid и это только некоторые из них. По моему мнению, все они более или менее одинаковые и предоставляют одинаковые возможности экранирования контента и полезных фильтров для работы с отображаемыми данными. Большинство движков позволяют вводить собственные фильтры, если вам требуется дополнительная обработка контента перед его отображением.

Другие ответы Скопировать ссылку

Ещё