Ниже представлено 10 вопросов по теме HTML (источник), которые часто задают на собеседовании. Прочитав вопрос, постарайтесь ответить на него так, как бы вы это делали во время своего интервью. Под вопросом вы найдете ответ и ссылку на источники раскрывающие тему подробнее.
1) Почему, как правило, лучше разместить подключение CSS между тэгами <head></head>, а JS <script>-ы , перед тэгом </body>, соответственно? Знаете ли вы какие-либо исключения, приведите примеры ?
Стили рекомендуется подключать в head для того, чтобы страница как можно быстрее приняла свой внешний вид. Скрипты подключенные
в head могут затормозить этот процесс, в связи с этим их рекомендуется подключать перед закрывающим тегом body. Исключением являются скрипты
аналитики, для определения количества посетителей, которые не дождались загрузки страницы. В этом случае скрипт должен быть подключен в head
2) Как обеспечить корректное отображение текста на странице на нескольких языках (речь о кодировке)?
Кодировка HTML-страницы должна быть указана для того, чтобы браузер смог корректно отрисовать текст на странице. В противном случае вместо
необходимых символов появятся малопонятные иероглифы.
3) Какую функцию выполняет элемент doctype?
С помощью этого элемента указывается тип текущего документа. Т.е. элемент необходим для правильного отображения и работы страницы в браузере.
4) На что нужно обратить внимание при разработке мультиязычных сайтов?
На объем кода, его читабельность и масштабируемость. А также, на быстродействие и производительность в процессе перерисовки контента, если
перевод осуществляется «на лету». Если для каждой страницы сайта, существует ее локализованная версия, необходимо обратить внимание на то,
идентифицируют ли ее поисковые системы.
5) Для чего нужны data — атрибуты ?
Для хранения дополнительно информации, ассоциированной с каким-либо элементом.
6) Опишите разницу между cookies, sessionstorage и localstorage.
sessionstorage
— хранит информацию в браузере, пока не закрыта вкладка, после ее закрытия — информация удаляется.
localstorage — хранит информацию в
браузере даже после того, как вкладка закрыта, не имеет срока жизни.
cookies — хранят информацию, имеют срок жизни (expires),
отправляются на сервер с запросом.
7) Опишите разницу между <script> , <script async> и <script defer>
script — начнет загружать файл JS, как только встретит его, при этом загрузка браузером оставшейся части HTML страницы, продолжится после того, как будет выполнен js скрипт.
script-async — браузер не остановит обработку HTML страницы, а будет читать ее дальше. После того как скрипт загрузится — он выполнится, не дожидаясь загрузки всей HTML страницы. Если скриптов несколько — первым отработает тот, который быстрее загрузится. При использовании
script-defer — также будет асинхронное выполнение скрипта, но в отличие от script-async — первым сработает тот скрипт, который встретился раньше. Еще одно отличие от async — это то, что script-defer сработает, когда вся страница HTML будет обработана браузером.
8) Что такое прогрессивный рендеринг ?
Это процесс отрисовки контента страницы по мере его прогрузки (прогрессивно). Например, сначала рисуется текст, потом изображения, таблицы и
т.п.
9) За что отвечает атрибут srcset в тэге <img> ? Объясните, каким образом браузер обрабатывает значение этого атрибута.
Список из одного или нескольких значений, указывающих набор возможных изображений для отображения в браузере. Каждое значение атрибута может
иметь дескрипторы ширины или плотности пикселей, на основании которых браузер понимает какою картинку из списка необходимо загрузить.
10) Использовали ли вы когда-то HTML-препроцессоры? Расскажите о недостатках/преимуществах любого из них.
Препроцессоры дают дополнительный функционал по отрисовке коллекций, а также использованию условных конструкций непосредственно в HTML файле и
т.д. Также дают более короткий синтаксис, PUG, например. Вышеупомянутый PUG обрабатывает вложенности с помощью отступов, что при копи-пасте кода
часто ломает все верстку и ее сборку.