👨🏻‍💻 Что такое прогрессивная отрисовка?

Да, некоторые вопросы для фронтенд разработчика могут быть даже такими.

Прогрессивная отрисовка — это метод веб-разработки, который позволяет поэтапно отображать содержимое веб-страницы по мере его загрузки. Сначала отображается минимальное количество информации, а затем дополнительные элементы и детали добавляются по мере загрузки страницы.

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

Кроме того, прогрессивная отрисовка также может быть полезна для оптимизации производительности, поскольку она позволяет снизить объем передаваемых данных и ускорить время отклика сервера.

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

Frontend Головного Мозга

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

При разработке мультиязычных сайтов необходимо обратить внимание на следующие аспекты:

Выбор подходящей системы управления контентом (CMS). Некоторые CMS, такие как WordPress и Drupal, предоставляют встроенную поддержку мультиязычности, что может значительно упростить разработку и управление мультиязычными сайтами.
Кодирование текста и использование правильных языковых символов. Кодировка должна соответствовать требованиям языков, на которых будет отображаться сайт. Например, для языков, использующих кириллицу, должна быть выбрана кодировка UTF-8.
Организация контента на сайте. Необходимо разработать систему, которая позволит организовать контент на сайте таким образом, чтобы пользователи могли легко найти информацию на нужном им языке. Для этого можно использовать разделение контента на языковые версии или использовать переключатели языков.
Локализация. При переводе текста на другой язык необходимо учитывать культурные особенности языка и местные нормы и стандарты. Кроме того, может потребоваться локализация форматов дат, валют и других данных, которые зависят от конкретного региона.
Тестирование и отладка. Необходимо тщательно протестировать все языковые версии сайта, чтобы убедиться, что контент отображается корректно, а функциональность работает правильно на всех языках.
SEO-оптимизация для каждого языка. Для каждой языковой версии сайта необходимо провести SEO-анализ и оптимизировать контент, мета-теги и другие аспекты для местных поисковых систем и языковых запросов пользователей.Например, таким бы было оформление sitemap.xml, будь у Tproger английская версия:

<url>
    <loc>https://tproger.ru</loc>
    <xhtml:link rel="alternate" hreflang="en-ru" href="https://tproger.ru/en/"/>
    <xhtml:link rel="alternate" hreflang="ru-ru" href="https://tproger"/>
</url>

Подробнее о мультиязычной настройке Sitemap можно почитать в документации Google.

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

Frontend Головного Мозга

Что выведет в консоль следующий код?

console.log(false == undefined);
console.log(false == null);
console.log(null == undefined);

Ответ: false false true

Пояснение: == сравнивает на равенство и не проверяет идентичность типов, поэтому в третьей строке кода в консоль будет выведено значение true.

Frontend Головного Мозга

👨🏻‍💻 Написать код для получения текущего URL

В JavaScript можно получить текущий URL страницы, используя свойство window.location.href:

const currentUrl = window.location.href;
console.log(currentUrl); // выведет текущий URL в консоль

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

Итак, это свойство возвращает текущий URL, включая протокол, имя хоста, порт (если он есть), путь и параметры запроса. Если необходимо получить только определенную часть URL (например, только путь), можно использовать другие свойства объекта window.location, такие как pathname или search.

👨🏻‍💻 Разница между <script>, <script async> и <script defer>

Тег <script> используется для загрузки и выполнения JavaScript-кода на веб-странице. Тег <script> может иметь атрибуты async и defer, которые позволяют задать способ загрузки скрипта.

<script> будет загружаться и выполняться синхронно, т.е. парсер HTML-документа остановится на этом теге, выполнит скрипт, и только после этого продолжит загрузку страницы.

<script async> будет загружаться асинхронно, т.е. парсер HTML-документа продолжит загрузку страницы без ожидания загрузки и выполнения скрипта. Как только скрипт будет загружен, он начнет выполняться, даже если страница еще не полностью загружена.

<script defer> также будет загружаться асинхронно, но его выполнение будет отложено до того момента, когда страница будет полностью загружена.

Примеры:

<!-- скрипт будет загружен и выполнен синхронно -->
<script src="script.js"></script>

<!-- скрипт будет загружен асинхронно -->
<script async src="script.js"></script>

<!-- скрипт будет загружен асинхронно и выполнен после полной загрузки страницы -->
<script defer src="script.js"></script>

Важно отметить, что использование атрибутов async и defer может повлиять на порядок выполнения скриптов на странице, поэтому необходимо тщательно планировать их использование. Подобные развёрнутые ответы на вопросы на собеседовании фронтенд разработчика дадут вам значительное преимущество.

Frontend Головного Мозга

Что выведет в консоль следующий код?

const numbers = [1, 2, 3, 4, 5];
const [y] = numbers;
console.log(y);

Ответ: 1

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

Frontend Головного Мозга

В каком порядке исполняются скрипты? Почему?

<script async src="script-1.js"></script> // Время загрузки скрипта 1.5s
<script src="script-2.js"></script> // Время загрузки скрипта 1s
<script defer src="script-3.js"></script> // Время загрузки скрипта 3s
<script defer src="script-4.js"></script> // Время загрузки скрипта 1.5s
<script src="script-5.js"></script> // Время загрузки скрипта 2s
<script async src="script-6.js"></script> // Время загрузки скрипта 1s
<script defer src="script-7.js"></script> // Время загрузки скрипта 0.1s

Ответ:

<script src="script-2.js"></script> // Время загрузки скрипта 1s
<script async src="script-6.js"></script> // Время загрузки скрипта 1s
<script async src="script-1.js"></script> // Время загрузки скрипта 1.5s
<script src="script-5.js"></script> // Время загрузки скрипта 2s
<script defer src="script-3.js"></script> // Время загрузки скрипта 3s
<script defer src="script-4.js"></script> // Время загрузки скрипта 1.5s
<script defer src="script-7.js"></script> // Время загрузки скрипта 0.1s
Пояснение: Когда браузер загружает HTML и доходит до тега <script>...</script>, он не может продолжать строить DOM. Он должен сначала выполнить скрипт. То же самое происходит и с внешними скриптами <script src="..."></script>: браузер должен подождать, пока загрузится скрипт, выполнить его, и только затем обработать остальную страницу.

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

defer: Порядок документа (как расположены в документе). Выполняется после того, как документ загружен и обработан (ждёт), непосредственно перед DOMContentLoaded.

Поэтому сначала исполнится скрипт 1, поскольку он первый в очереди и по скорости загрузки. Далее 2, потому что у него скорость загрузки такая же быстрая — 1 секунда. Загрузка асинхронно — вне очереди, 3 скрипт загружается за 1,5 секунды и выполняется сразу после загрузки, затем 4 скрипт загружается в порядке очереди и по скорости 2 секунды, последние скрипты – 5, 6, 7. Они загружаются в конце и в порядке очереди размещения в DOM.

Frontend Головного Мозга

👨🏻‍💻 Что такое REST и RESTful API?

REST (Representational State Transfer) — это архитектурный стиль, используемый при проектировании распределенных систем. Он был описан в диссертации Роя Филдинга в 2000 году и является основой для создания RESTful API.

RESTful API — это веб-сервис, который использует протокол HTTP для обмена данными. Он предоставляет возможность получать, создавать, обновлять и удалять данные на удаленном сервере, используя стандартные HTTP-методы (GET, POST, PUT, DELETE и т. д.).

RESTful API использует ресурсы (например, товары, пользователи, заказы) и URI (Uniform Resource Identifier) для доступа к этим ресурсам. Клиент отправляет запросы на сервер, указывая URI и метод HTTP, а сервер возвращает ответ, который может содержать данные в различных форматах (например, JSON или XML).

Принципы RESTful API:

Клиент-серверная архитектура: сервер и клиент независимы друг от друга, что позволяет развивать их независимо.
Отсутствие состояния (stateless): каждый запрос клиента должен содержать всю необходимую информацию для его обработки, без сохранения состояния на сервере.
Кэширование: клиенты могут кэшировать ответы сервера, чтобы уменьшить количество запросов.
Единообразие интерфейса: единообразный интерфейс между клиентом и сервером упрощает взаимодействие и увеличивает его надежность.
Слои: клиент не должен знать о слоях на сервере, которые обрабатывают запросы.
RESTful API является широко используемым в веб-разработке и предоставляет удобный и гибкий способ обмена данными между сервером и клиентом.

Frontend Головного Мозга

Что выведет в консоль этот код?

let x = 3;
function fn() {
x = 10;
return;
function x() {}
}

fn();
console.log(x);

Ответ: 3

Пояснение: х объявлена как функция, поэтому в итоге она перезаписалась с 10 на 3.

Frontend Головного Мозга