Как работает браузер вопрос на собеседовании
Обновлено: 11.07.2024
От автора: неважно, ищете вы работу или нет, веб-разработчик должен знать как базовые, так и продвинутые темы. Они необходимы для разработки продуктов высокого качества с хорошей производительностью и правильными технологиями. В этой статье я расскажу про свой опыт поиска работы, а также про возможные вопросы для собеседования разработчика, которые необходимо изучить, чтобы подготовить себя и максимально повысить свои шансы на получение работы мечты.
Прежде чем начнем
Ищите вы работу сейчас или искали ранее, у вас точно были эти периоды. Много страхов, эмоций, желаний, надежд и дилемм. Нравится вам или нет, но вам нужно обратить внимание на некоторые проблемы и быть готовыми к поиску работы.
В моей прошлой статье мы говорили о том, что важно для соискателя, получили советы о том, как максимально повысить свои шансы, а также узнали, как подготовиться к процессу получения работы мечты. Если вы не читали эту статью, рекомендую сначала ее прочесть.
Вернемся к основам
Сложность подготовки зависит от того, сколько времени вы уделяете на данный момент HTML, CSS и JS, а также от требований должности. Очень важно понять основы и внутренности. В большинстве случаев короткого разговора достаточно, чтобы понять, что вы чего-то не понимаете. Когда что-то не работает, CSS может быть очень странным. JS может быть странным, даже когда все работает. Задача того, кто вас собеседует – увидеть, как вы рассуждаете, как справляетесь с трудными вопросами, а также понять, насколько ваши знания технологий соответствуют требованиям.
Разберем пример. Часто на собеседованиях спрашивают про замыкания – что вернет код ниже:
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Код вернет 5 5 5 5 5, а не 0 1 2 3 4. Если использовать let вместо var или использовать ((j) => < return () =>console.log(j); >)(i) – значение I будет сохранено с помощью IIFE в аргумент j в область видимости новой функции. Этот небольшой вопрос так важен, потому что он собирает в себе важные концепции языка – замыкания, контекст, область видимости, IIFE, а также let и var.
Может быть еще такой вопрос «как решить эту проблему». Может, вы знаете решение, но опрашивающий может попросить более сложные решения. Например, проблему можно решить с помощью функции bind, но также есть apply и call. В чем разница? К внутренностям JS можно двигаться разными путями.
Принцип работы
Хороший разработчик должен знать принцип работы языка/технологии. Это влияет на принятие решений, поддержание производительности и другие параметры. Вы должны знать, почему необходимо использовать эту технологию, а также какие варианты еще есть. Вы должны обладать этими практическими знаниями – они того стоят.
Принцип работы веба
Что будет делать браузер после того, как HTML возвращается в него? Проходит большой процесс парсинга и рендера ресурсов, среди которых элементы, внешние и внутренние скрипты и стили. То где вы расположите теги и скрипты на внешние ресурсы повлияет на производительность и время взаимодействия. Существуют приоритеты, и браузер проделывает очень много работы.
JavaScript работает в один поток
Цикл событий, стек вызовов, очередь, куча
Что еще очень часто задают на собеседовании – область видимости, контекст, поднятие, как реализовать энкапсуляцию в ES5 и прототип. Если у вас спросили это, не сомневайтесь, вы под полным контролем.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Асинхронные колбек-функции, Promises, Async\Await и генераторы
ES6/7/8
JS находится в продакшене, но он постоянно обновляется. Процесс принятия новых функций в спецификацию крайне упорядоченный и сбалансированный. ECMAScript – это спецификация, формирующая основы JS. ECMAScript стандартизирован организацией по стандартам International в спецификациях ECMA-262 и ECMA-402.
TC39 официально выпустили ECMAScript 2017 в середине 2017. За последний год мы часто упоминали ECMAScript и не зря. ES6 – одна из свежих функций в мире JS. Он везде. ES6 сейчас так популярен из-за своих улучшений, которые сделали разработку удобнее (новый синтаксис и инновации). В ES появились такие вещи, как async\await, стрелочные функции, оператор расширения, структура классов и т.д.
Семантический HTML
Вы не видите визуальной разницы между div, footer, main and article, но она огромна. Семантический HTML очень важен, по многим причинам. Люди с ограниченными способностями используют скрин ридеры, а семантика влияет на порядок чтения и выполнения операций. Для вас, как разработчика, это должен быть стандарт. Легко можно сделать семантический HTML блок, а не просто div внутри div. Так вы приводите разметку к единообразию, а пользователь получает хороший UX – например, h2 на всех страницах будет выглядеть одинаково.
Иногда у вас могут возникать следующие вопросы:
Можно ли помещать div в параграф?
Когда использовать тег article?
Можно ли помещать main внутрь main?
Что лучше подходит к ссылке назад и вперед – тег a или тег button?
Ответы на множество подобных вопросов и рекомендации можно найти в спецификации HTML или на сайте W3C.
Куки, локальное хранилище или хранилище сессии
Куки, локальное хранилище и хранилище сессии широко используются. Часть из них используется почти на всех сайтах, которые вы посещаете. С их помощью можно хранить локальные настройки типа размера колонок таблицы, порядка и любимых элементов. Локальные данные (локальное хранилище или хранилище сессии) влияют на конкретный браузер, на котором они сохранены. Если необходимо влиять на все браузеры и машины пользователя, то данные нужно хранить на сервере.
С помощью кук можно проходить авторизацию и проверять надежность источника запроса. Куки автоматически добавятся в запросы, если не передать время жизни. Локальное хранилище и хранилище сессии не добавятся к запросам на сервер, к ним обращаются только на стороне клиента. Хранилище сессии доступно до тех пор, пока не закрыта вкладка в браузере. Локальное хранилище доступно и при последующих сессиях в браузере.
Локальное хранилище может сохранять толкьо строковые ключи и значения, а куки может хранить сложные объекты. Эти 3 хранилища ограничены размерами. Локальное хранилище и хранилище сессии могут содержать до 5Мб, а куки до 4Кб. Есть и другие ограничения и различия. Это частая тема на собеседовании, она может быть решением на другие вопросы.
Заключение
К собеседованию можно подготовиться. Подготовка делает вас увереннее и помогает вспомнить темы, которые вы редко используете. На подготовку рекомендуется отводить определенное время, но нужно быть внимательным. В следующей части мы продолжим разбирать подходящие и важные темы, такие как архитектура. Я расскажу вам про некоторые действия и источники, которые помогут упростить подготовку.
Автор: Dor Moshe
Редакция: Команда webformyself.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Простыми словами объясняем, как браузер подключается и общается с сервером.
Поэтому первым делом браузеру нужно понять, какой IP-адрес у сервера, на котором находится сайт.
Такая информация хранится в распределенной системе серверов — DNS (Domain Name System). Система работает как общая «контактная книга», хранящаяся на распределенных серверах и устройствах в интернете.
Однако перед тем, как обращаться к DNS, браузер пытается найти запись об IP-адресе сайта в ближайших местах, чтобы сэкономить время:
- Сначала в своей истории подключений . Если пользователь уже посещал сайт, то в браузере могла сохраниться информация c IP-адресом сервера.
- В операционной системе . Не обнаружив информации у себя, браузер обращается к операционной системе, которая также могла сохранить у себя DNS-запись. Например, если подключение с сайтом устанавливалось через одно из установленных на компьютере приложений.
- В кэше роутера , который сохраняет информацию о последних соединениях, совершенных из локальной сети.
Не обнаружив подходящих записей в кэше, браузер формирует запрос к DNS-серверам, расположенным в интернете.
Как только браузер узнал IP-адрес нужного сервера, он пытается установить с ним соединение. В большинстве случаев для этого используется специальный протокол — TCP.
TCP — это набор правил, который описывает способы соединения между устройствами, форматы отправки запросов, действия в случае потери данных и так далее.
Например, для установки соединения между браузером и сервером в стандарте TCP используется система «трёх рукопожатий». Работает она так:
- Устройство пользователя отправляет специальный запрос на установку соединения с сервером — называется SYN -пакет.
- Сервер в ответ отправляет запрос с подтверждением получения SYN-пакета — называется SYN/ACK -пакет.
- В конце устройство пользователя при получении SYN/ACK-пакета отправляет пакет с подтверждением — ACK -пакет. В этот момент соединение считается установленным.
Задача браузера — как можно подробнее объяснить серверу, какая именно информация ему нужна .
Сервер получил запрос от браузера с подробным описанием того, что ему требуется. Теперь ему нужно обработать этот запрос. Этой задачей занимается специальное серверное программное обеспечение — например, nginx или Apache. Чаще всего такие программы принято называть веб-серверами.
Когда ответ сформирован, он отправляется веб-сервером обратно браузеру. В ответе как правило содержится контент для отображения веб-страницы, информация о типе сжатия данных, способах кэширования, файлы cookie, которые нужно записать и так далее.
👉 Чтобы обмен данными был быстрым, браузер и сервер обмениваются сразу множеством небольших пакетов данных — как правило, в пределах 8 КБ. Все пакеты имеют специальные номера, которые помогают отслеживать последовательность отправки и получения данных. 8. Браузер обрабатывает полученный ответ и «рисует» веб-страницуБраузер распаковывает полученный ответ и постепенно начинает отображать полученный контент на экране пользователя — этот процесс называется рендерингом .
Сначала браузер загружает только основную структуру HTML-страницы. Затем последовательно проверяет все теги и отправляет дополнительные GET-запросы для получения с сервера различных элементов — картинки, файлы, скрипты, таблицы стилей и так далее. Поэтому по мере загрузки страницы браузер и сервер продолжают обмениваться между собой информацией.
Параллельно с этим на компьютер как правило сохраняются статичные файлы пользователя — чтобы при следующем посещении не загружать их заново и быстрее отобразить пользователю содержимое страницы.
Как только рендеринг завершен — пользователю отобразится полностью загруженная страница сайта.
Наём новых сотрудников может оказаться настоящим кошмаром. Иногда, чтобы найти подходящего кандидата, приходится пройти долгий и трудный путь. Если вы ищете веб-разработчика, техническая сторона этой профессии значительно усложняет процесс поиска.
Адаптировали статью команды блога Codementor о том, что важно спросить у веб-разработчика перед тем, как его нанять.
Полина Кабирова
Коммерческий автор и переводчик
Подготовьтесь заранее
Есть такая поговорка: кто не планирует свою победу, тот планирует чужую. И она будет к месту, если вы ищете разработчика, особенно на удалёнку.
Вот главные советы.
Определите требования
Опытные веб-разработчики всегда очень заняты. Нужно определиться с вашими ожиданиями и объёмом работы кандидата. Чётко сформулируйте должностную инструкцию и особенности работы в компании. Соискатель должен ясно понимать рабочие обязанности и предлагаемые условия труда.
Выделите оптимальный бюджет
Помните, вы получите ровно столько, сколько заплатили.
Обязанности и уровень самоотдачи разработчика зависят от зарплаты, которую вы предлагаете. По статистике, ведущий разработчик в США в среднем получает $85 000 в год. Для удалённых сотрудников зарплаты разнятся от $60 до $120 в час и выше.
Сумма зависит от местоположения и требований к специалисту. Проанализируйте зарплаты перед тем, как определить окончательную цифру.
В России на первое полугодие 2018 года средняя зарплата ИТ-специалистов составляет около 100 тыс. рублей в месяц. При этом диапазон зарплат достаточно большой — от 14 до 350 тыс. рублей.
В целом зарплата по миру в сфере разработки может достигать 89 000 $ в год.
Установите реалистичные дедлайны
Разработчику может потребоваться время, прежде чем приступить к работе в вашей компании. Учитывайте это при отборе кандидатов, тем более вам тоже нужно время для поиска подходящего человека.
На срочный проект можно рассмотреть фрилансера. Он начнёт работу, а у вас появится время для поиска кандидата в штат. Убедитесь, что у выбранного фрилансера или подрядчика достаточно времени на ваш проект.
Подготовьтесь к собеседованию
У хорошего разработчика во время и после собеседования появятся вопросы. Будьте готовы объяснять, что именно вы ищете в кандидате и какую работу ему предлагаете.
Профессия
Веб-разработчик
Узнать больше
- Научитесь программировать на JavaScript и PHP
- 11 готовых проектов в портфолио по итогам обучения
Вопросы для собеседования с разработчиком
Процесс поиска разработчика зависит от его роли в команде и особенностей компании в целом. Вот несколько вещей, на которые стоит обратить внимание при поиске.
- Первое собеседование — по телефону или видеозвонку.
- Оценка компетентности специалиста или тестирование на профпригодность, если это одобряется культурой вашей компании.
- Тестовое задание. Практические вопросы и задачи, связанные с разработкой, которые помогут определить технические знания кандидата.
- Итоговое собеседование. Очное интервью. Если личное присутствие на собеседовании невозможно, проведите видеозвонок.
Основные вопросы для собеседования с разработчиком и ответы, которые следует от него ждать. Не забывайте делать заметки во время собеседования — это поможет точнее оценить кандидатов.
Вопросы об опыте
1. Расскажите о проекте, которым по-настоящему гордитесь. Что вы сделали для его успешной реализации?
Начните собеседование аккуратно, чтобы уменьшить волнение кандидата. Ответ на этот вопрос даст представление об амбициях специалиста, покажет его взгляд на успех и рабочий процесс. Обратите внимание, упомянул ли разработчик других членов команды или сосредоточился на своих стараниях.
2. Расскажите о проекте, который вас разочаровал. Что бы вы сейчас изменили при работе над ним?
Разработчик должен постоянно анализировать свою работу. Вы не захотите нанимать человека, который всё время повторяет ошибки.
3. Что в программировании для вас самое сложное?
Другими словами, какие слабые стороны видит разработчик в своих технических навыках.
4. Как проводите тестирование? И что вообще о нём думаете?
Хороший код — это минимум багов в работе приложения и мало ошибок в коде. Хороший разработчик уделяет много внимания тестированию качества. Так можно сократить количество бессонных ночей в поисках ошибок на ранних этапах работы.
5. Как следите за последними тенденциями в веб-разработке?
Другими словами, прикладывает ли кандидат усилия, чтобы оставаться востребованным специалистом. Например, спросите, какие технические издания он читает, какими авторами и личностями ИТ-сообщества восхищается и почему.
Сфера веб-разработки постоянно меняется, поэтому для специалиста важно интересоваться последними тенденциями и формировать своё мнение о них.
6. Какую среду разработки предпочитаете?
Не важно, где работает кандидат — вам необходимо найти человека, который может адаптироваться под разные технологии и делиться своим мнением. Ответ на вопрос также покажет его опыт работы с разными фреймворками, системами контроля версий, юнит-тестированием и так далее.
Курсы Нетологии
Soft Skills
Узнать больше
- Soft skills — это надпрофессиональные навыки, которые помогают любым специалистам в любой отрасли быть востребованными
- Сможете прокачать навыки, чтобы быстро решать задачи, убедительно аргументировать свою позицию, грамотно выстраивать коммуникацию — без лишних эмоций и стресса 💪
Вопросы о коммуникативных и управленческих навыках
7. Расскажите, какие качества помогают вам в работе
Возможно, вы ищете человека, который быстро решает проблемы, отлично ведёт переговоры или любит учиться. Попросите кандидата привести примеры, как он применяет эти навыки.
В зависимости от вакансии, одни навыки будут приоритетнее других. Например, тайм-менеджмент и коммуникативные навыки будут более важны для удалённого сотрудника, чем для штатного разработчика.
8. Расскажите о проблеме, которую вы решили вне программирования
Проблема может быть какой угодно. Например, кандидат починил кофемашину или помог коллеге отремонтировать велосипед. Неважно, что именно он сделал. Главное — вы увидите его способность решать проблемы и взаимодействовать с людьми.
9. Как бы описали вас другие разработчики / менеджеры проектов, с которыми вы работали?
Это отличный способ понять, как кандидат оценивает себя и свои навыки, какую роль играет в команде и как проявлял себя на прошлых должностях.
10. Представьте, что не можете решить проблему, связанную с программированием. Что сделаете, чтобы найти решение?
Читать также
11. Что вы думаете о парном программировании? Был ли у вас такой опыт?
Такой метод программирования не всегда подходит для повседневной разработки, но будет интересно узнать, готов ли кандидат сесть рядом с коллегой и разбираться в его коде.
12. Работали ли вы когда-нибудь напрямую с заказчиком или как-то взаимодействовали с ним? Если нет, хотели бы попробовать?
Ответ на этот вопрос даст представление, как кандидат реагирует на мнения других людей о его работе. Если вы ищете человека для разработки приложения или способного в будущем расти внутри компании, он неизбежно будет сталкиваться с критикой пользователей и коллег.
Вопросы для проверки технических навыков разработчика
13. Опишите, пожалуйста, процесс создания веб-страницы или приложения.
Это отличный способ оценить, как кандидат справляется с базовыми задачами. Он используют фрагменты кода для быстрого создания базовой HTML-страницы, добавляет jQuery и начинает программировать или использует вспомогательные инструменты для разработки, типа Bower или Yeoman?
14. Какие инструменты используете для поиска багов?
Ответ на этот вопрос будет зависеть от среды разработки, которую использует кандидат. Разные языки программирования используют разные профилировщики, а некоторые фреймворки имеют встроенные инструменты для устранения багов. Важно узнать не инструмент, а подход к решению проблемы.
15. Что знаете о CORS?
CORS (Cross-Origin Resource Sharing, с англ. — «совместное использование ресурсов между разными источниками») — основной элемент HTML5, который должен быть знаком большинству фронтенд-разработчиков. Технология позволяет запрашивать доступ к различным ресурсам другого домена (jQuery, библиотекам шрифтов).
Знает ли ваш кандидат разницу между запросом GET и POST? Не забыл ли он упомянуть запросы PATCH и CONNECT? Это серьёзный вопрос для оценки базового понимания HTML.
17. У вас есть пять разных таблиц стилей, как лучше всего интегрировать их в сайт?
Этот вопрос проверяет понимание CSS. Объединит ли кандидат стили в один CSS-файл или объединит только стили для конкретного приложения? И как он использует библиотеки стилей, например, Bootstrap?
18. Как вы организуете JavaScript-код?
Ответ на этот вопрос покажет, как кандидат систематизирует свой код. Он разделяет JavaScript и HTML? JS разбит на логические блоки и хранится в отдельных файлах? Он использует скрипт для объединения этих файлов в один пакет? А пространство имён в JavaScript, чтобы не захламлять глобальное пространство имён?
19. Как вы учитываете SEO, производительность, безопасность и UX при создании приложения?
Это очень важный вопрос. Способность понимать и сочетать эти факторы в работе является ключевым навыком для любого веб-разработчика. Из ответа также будет понятно, чему кандидат отдаёт приоритет при программировании. Например, если вы — крупная финансовая компания, безопасность для вас будет важнее SEO. Если вы — интернет-издание, на первом месте производительность сайта и SEO.
Ваше собеседование не ограничивается перечисленными вопросами.
Узнавайте больше о техническом опыте кандидата, стеке технологий, который встретится ему на новой работе. Если вы сами не разработчик, лучше попросить опытного специалиста провести техническую часть собеседования.
Примеры вопросов для технической части собеседования и ответы специалистов:
После собеседования
Из-за нехватки специалистов веб-разработчики очень востребованы. Если вы ищите разработчика, действуйте быстро: оцените всех кандидатов и сразу же свяжитесь с теми, кто вам подходит. Хороший кандидат быстро найдёт работу.
Нет единой правильной схемы для поиска разработчика — важны детали. Чтобы найти идеальный вариант, ясно определите собственные ожидания и требования для разработчика. На Github есть целый список вопросов для интервью.
Читать также
Перевод статьи «Prepare Your Skill Set for Web Developer Interviews».
Есть некоторые вещи, как базовые, так и более сложные, которые должен знать каждый веб-разработчик вне зависимости от того, занимается ли он поисками работы в данное время или нет. Без знания этих вещей вы не создадите высококачественные продукты с хорошей производительностью.
В этой статье я обозначу самые важные темы, которые нужно изучить, чтобы подготовиться к собеседованию и увеличить свои шансы на получение работы. Список составлен на основе личного опыта.
Прежде чем начать
Даже если вы в данное время не в поисках работы, но уже имеете такой опыт, вы наверняка хорошо запомнили тот жизненный этап. Опасения, переживания, желания и надежды… Нравится вам все это или нет, но рано или поздно все оказываются в таком положении, поэтому стоит подготовиться.
Сложность подготовительного процесса зависит от того, насколько интенсивно вы в данное время используете JavaScript, HTML и CSS, а также от требований конкретной вакансии.
Очень важно понимать основы и внутреннее устройство этих языков. Чаще всего недостаток понимания легко выявляется в коротком разговоре. CSS может быть весьма странным и непонятным, когда что-то не работает. JavaScript тоже может быть странным и непонятным даже когда работает. Цель интервьюера – увидеть ваш образ мышления, то, как вы справляетесь со сложными вопросами и понять, насколько ваши знания технологий совпадают с требованиями вакансии.
Давайте рассмотрим пример. На многих собеседованиях задают вопрос о замыканиях, например, каким будет output этого кода:
В данном случае output это 5 5 5 5 5, а не 0 1 2 3 4. Если мы используем let вместо var или используем ((j) => < return () => console.log(j); >)(i), то значение i будет сохранено IIFE в аргументе новой области видимости функции. Этот маленький пример очень показателен, поскольку включает некоторые важные концепции языка – замыкания, контекст, область видимости, IIFE и let / var.
Этот вопрос довольно широко применяется, поэтому к нему задаются дополнительные уточняющие вопросы, например, о причинах такого поведения. В объяснении вы можете упомянуть цикл событий, а это благодатная почва для углубления в то, «как работает JavaScript».
Также вам могут предложить решить какую-нибудь проблему. Возможно, вы знаете, как она решается, но интервьюер может попросить вас привести и другие варианты решения. Например, одним из решений может быть функция bind, но есть также функции apply и call. Какова разница между ними? И таким образом мы приходим к обсуждению внутреннего устройства JavaScript.
Как это работает
Хороший разработчик должен знать, как работает язык или технология. Это имеет значение по многим причинам, например, для принятия решений с учетом наилучшей производительности и других показателей. Вы должны знать, почему стоит использовать определенную технологию, и каковы возможные альтернативы. Это практический навык, который должен быть в вашем арсенале.
Как работает веб
Загрузка и рендеринг веб-страниц происходит не по мановению волшебной палочки. Если вы веб-разработчик, то вы должны знать, как это работает.
Что будет делать браузер после возвращения HTML? Парсинг и рендеринг ресурсов, включая различные элементы, внешние и внутренние скрипты и стили, – это большой процесс. В этом процессе есть блокирующие операции и служебные слова вроде defer и async. Т
о, где вы разместите внешние источники и скрипты, имеет значение для производительности и временных показателей time to an interaction (TTI). Есть определенные приоритеты, и браузер производит много работы для их учета.
JavaScript однопоточен
Ну ладно, и что это значит? Вы можете подумать над этим и постараться понять, почему наличие только одного потока является таким важным фактором. Каковы преимущества и недостатки однопоточности?
NodeJS подходит для разработки со многими вводами/выводами и асинхронными событиями. Он событийно-ориентированный. Поэтому NodeJS, вероятно, не сильно подходит для сложных синхронных вычислений, как при машинном обучении.
Цикл событий, стек вызовов, очередь, куча
Еще одна часть того, «как это работает», – внутренние течения и процессы языка, его механизм. Каков порядок выполнения, где сохраняется каждая переменная, в чем разница между стеком вызовов и очередью и что происходит при использовании setTimeout? Каков механизм лидирующего в мире языка и как все это устроено? Ответив на эти вопросы, вы поймете рабочий процесс JavaScript. Без понимания этого механизма не нужно ходить на собеседования на позиции, связанные с использованием JavaScript. Это критически важный момент.
JavaScript Event Loop Visual Representation — photo credit for Gaurav Pandvia
Кроме того, на собеседовании часто спрашивают о значениях таких навязших на зубах слов как область видимости, контекст, поднятие. Также часто спрашивают о реализации инкапсуляции в ES5 и прототипах. Когда кто-нибудь заговорит с вами о таких вещах, обдумывайте свои ответы.
Асинхронность – Callbacks, Promises, Async\Await и генераторы
Последние разработки нового функционала и его развитие просто поражают. От callbacks (c callback hell) к promises (с promise hell) и затем к генераторам и механизму async\await – вы должны знать о подобной эволюции и уметь ее объяснять.
ES6/7/8
JavaScript постоянно обновляется. Процесс включения новых вещей в спецификацию очень упорядоченный и сбалансированный. ECMAScript это стандарт, формирующий основы JavaScript. Сам ECMAScript стандартизирован организацией ECMA International в спецификациях ECMA-262 и ECMA-402.
ES6 Features — Compatibility & Browser Support
TC39 (Ecma International Technical Committee 39) официально выпустил ECMAScript 2017 в середине 2017 года. За последний год мы много говорили об ECMAScript. И ведь было о чем поговорить.
ES6 это одна из самых свежих вещей в мире JavaScript. Он везде. Своей сегодняшней популярностью ES6 обязан новому синтаксису и инновациям, которые существенно улучшают работу разработчиков. Из последних изменений стоит назвать async\await, стрелочные функции, оператор spread, классовую структуру.
Семантический HTML
Даже если вы не видите визуальной разницы между div, footer, main и article, за ними стоит целый babel. Семантический HTML это важно, причем по многим причинам. Например, люди с ограниченными возможностями используют считыватели экрана, а семантика влияет на порядок чтения и операции, которые могут выполняться.
Для вас как разработчика это часть стандарта. Работать с семантическим HTML-блоком проще, чем с div внутри другого div. Это способствует унификации и влияет на ощущения посетителя сайта/приложения. Например, h2 на каждой странице будет выглядеть одинаково.
Порой вы можете задаваться вопросами:
- Можно ли помещать div в параграф?
- Когда стоит использовать тег article?
- Нормально ли вкладывать тег main внутрь другого тега main?
- Что выбрать для ссылок на следующую и предыдущую страницу – тег a или button?
Ответы на эти и другие вопросы, а также рекомендации можно найти в официальной спецификации HTML или на сайте W3C.
Cookies vs локальное хранилище vs сессионное хранилище
Cookies, локальные и сессионные хранилища используются повсеместно. Практически каждый посещаемый вами сайт пользуется чем-то из этого. Например, для хранения локальных настроек, таких как размер столбцов и порядок элементов.
Локальные данные (локальное и сессионное хранилище) воздействуют на конкретный браузер, в котором сохраняются. Если вы хотите сохранить это воздействие на всех машинах и всех браузерах, используемых юзером, нужно сохранить данные на сервере.
Cookies используют для аутентификации и проверки надежности источника запроса. Cookies могут добавляться к запросам автоматически, пока не истечет срок их действия.
При локальном и сессионном хранении данные не добавляются к запросам на сервере и действуют только на стороне клиента. Сессионное хранилище сохраняется, пока не закроется вкладка браузера с открытым в ней сайтом. Локальное хранилище сохраняется в браузере на следующие несколько раз.
Данная тема является распространенной на собеседованиях и может «всплывать» в качестве решения некоторых вопросов или как самостоятельный вопрос.
Заключение
Собеседование это такая вещь, к которой можно подготовиться. Это поможет вам быть более уверенным в себе и освежить в памяти темы, с которыми редко имеете дело. Подготовке к собеседованию стоит уделить и время, и внимание. В следующей части мы разберем другие важные темы, такие как архитектура, и дадим ссылки на ресурсы, которые могут облегчить подготовку.
В отличие от типичного собеседования с разработчиками ПО, на собеседованиях фронтенд-разработчиков меньше внимания уделяется алгоритмам. Большая часть вопросов касается специфичных знаний и компетенций в таких областях, как HTML, CSS, JavaScript.
Несмотря на то, что существуют ресурсы, призванные помочь в подготовке к собеседованию, они сильно отличаются по полноте материалов от тех же ресурсов для разработчиков ПО. Среди того, что существует на сегодняшний день, наиболее полезным может быть сборник вопросов Front-end Developer Interview Questions. К сожалению, на многие вопросы я не смог найти в сети полные и удовлетворяющие ответы. Поэтому в документе ниже я постарался самостоятельно ответить на них. Будучи открытым репозиторием, этот проект может жить и развиваться благодаря сообществу, поскольку интернет эволюционирует.
Вас может заинтересовать Tech Interview Handbook, в котором содержится информация для прохождения общих технических интервью, в частности описаны алгоритмы, даны ответы на вопросы по софт-скиллс. Также есть Interview Cheatsheet!
Ответы на вопросы из списка Front-end Job Interview Questions — HTML Questions. Комментарии с предложениями по улучшению и дополнению приветствуются!
Что делает DOCTYPE?
<!DOCTYPE> — это сокращение от «document type» (тип документа). Он объявляется в HTML для того, чтобы различать стандартный режим или режим совместимости (quirks mode). Его наличие говорит браузеру работать со страницей в стандартном режиме.
Мораль истории — просто добавляй <!DOCTYPE html> в начало страницы.
Ссылки
Как поддерживать страницу на нескольких языках?
Вопрос немного расплывчатый. Полагаю, что речь о наиболее частом случае: как поддерживать страницу с содержимым на нескольких языках, где одновременно должен отображаться только один язык.
На бэкенде HTML-разметка будет содержать плейсхолдер i18n , а контент для конкретного языка будет хранится в YML- или JSON-формате. Сервер динамически формирует HTML-страницу с контентом на конкретном языке, чаще всего при помощи бэкенд-фреймворка.
Ссылки
На что обратить внимание при разработке мультиязычных сайтов?
- Используй атрибутlangв HTML.
- Перенаправляй пользователей на версию сайта на их языке. Позволяйте быстро и без проблем изменить страну и язык.
- Текст на картинках плохо поддается адаптации. Многие до сих пор помещают текст на картинки чтобы получить хорошо выглядящий несистемный шрифт на любом компьютере. Однако чтобы перевести текст картинкой, нужно иметь подготовленную картинку с каждой строкой текста для каждого языка. При большом количестве текста это быстро выйдет из под контроля.
- Ограничение длины слов и предложений. Некоторый контент может быть длиннее при написании на другом языке. Будьте внимательны к макету и проверяйте поведение блоков при переполнении. Количество символов важно в таких элементах, как заголовки, лейблы и кнопки. Но не так важно в основном тексте или в блоке комментария.
- Помните о восприятии цветов. В разных языках и культурах цвета имеют разное значение. Дизайн должен учитывать эти особенности.
- Форматируете даты и валюты. Календарные даты иногда пишутся по-разному. Например, «Май 31, 2012» в Америке или «31 мая 2012» в большинстве стран Европы.
- Не склеивайте переведенные строки. Не пишите что-то вроде "Сегодняшняя дата " + date . Эта фраза будет выглядеть коряво на языках с другим порядком слов. Вместо этого используйте параметры шаблона.
- Разные направления чтения. В русском мы читаем слева направо, сверху вниз. В традиционном японском языке текст читается сверху вниз, справа налево.
Ссылки
Для чего отлично подойдут data-атрибуты?
До того, как JavaScript-фреймворки стали популярны, фронтенд-разработчики использовали data -атрибуты чтобы хранить дополнительные данные прямо в DOM без хаков вроде нестандартных атрибутов или дополнительных свойств в DOM. Атрибуты этого семейства предназначены для хранения частных данных пользователя, для которых не существует более подходящих атрибутов или элементов, на странице или в приложении.
На сегодняшний день использование data -атрибутов не поощряется. Одной из причин является то, что пользователь может модифицировать данные в атрибуте, используя инспектор кода в браузере. Данные лучше хранить в самом JavaScript и обновлять DOM при помощи связывания данных через библиотеку или фреймворк.
Ссылки
Представьте HTML5 как открытую веб-платформу. Из каких блоков состоит HTML5?
- Семантика. Позволяет более точно описать из чего состоит контент.
- Связанность. Позволяет общаться с сервером новыми и инновационными способами.
- Офлайн и хранилище. Позволяют страницам хранить данные локально на клиентской стороне и более эффективно работать в офлайне.
- Мультимедиа. Ставит создание видео и аудио на первое место в вебе.
- 2D- и 3D-графика и эффекты. Позволяет расширить возможности презентации.
- Производительность и интеграция. Обеспечивает большую скорость оптимизации и лучшее использование аппаратных средств.
- Доступ к устройствам. Позволяет взаимодействовать с различными устройствами ввода и вывода.
- Стилизация. Позволяет создавать более сложные темы оформления.
Ссылки
Объясните разницу между cookie, sessionStorage и localStorage.
Все вышеупомянутые технологии являются механизмами хранения типа ключ-значение на клиентской стороне. Они могут хранить данные только как строки.
Cookie
Local Storage
Session Storage
Ссылки
Разница между <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 и это только некоторые из них. По моему мнению, все они более или менее одинаковые и предоставляют одинаковые возможности экранирования контента и полезных фильтров для работы с отображаемыми данными. Большинство движков позволяют вводить собственные фильтры, если вам требуется дополнительная обработка контента перед его отображением.
Читайте также: