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

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 Головного Мозга

👨🏻‍💻Разница между «сбросом» и «нормализацией» CSS


Заметили, что вопросы Junior frontend разработчику часто включают в себя какие-то сравнения? Это неспроста. Интервьюеры специально «гоняют» по отличиям, чтобы одним махом понять вашу осведомлённость во всех сравниваемых элементах.

Ответить на этот фронтенд вопрос несложно.

Сброс CSS и нормализация CSS — это два разных подхода к обнулению стилей веб-страницы.

Сброс CSS — это процесс обнуления стилей, чтобы убрать браузерные стили по умолчанию, которые могут отличаться от одного браузера к другому. Цель сброса CSS — создать «чистую» страницу, на которой все элементы имеют одинаковый вид в разных браузерах. Пример кода:

/* сброс CSS */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

/* нормализация CSS */
html {
  font-size: 62.5%;
}
body {
  font-size: 1.6rem;
  line-height: 1.5;
  font-family: Arial, sans-serif;
}

Оба подхода могут использоваться в зависимости от нужд проекта. Если вы хотите создать полностью уникальный дизайн, то возможно вам нужен сброс CSS. Если же вы хотите сохранить некоторые стили браузера, но при этом сделать веб-страницу более единообразной, то нормализация CSS может быть более подходящим вариантом.
Frontend Головного Мозга

👨🏻‍💻 Что такое «трёхстороннее рукопожатие»?


Медленно но уверенно вопросы для frontend разработчика перетекли в сферу безопасности.

Трехстороннее рукопожатие (Triple Handshake) — это проблема безопасности в компьютерных сетях, которая возникает при использовании SSL/TLS-соединений.

В процессе установки безопасного соединения SSL/TLS между клиентом и сервером происходит обмен сообщениями, который состоит из трех шагов (трехстороннее рукопожатие):

Клиент отправляет серверу сообщение SYN с произвольным начальным номером (seq).
Сервер отправляет клиенту сообщение SYN-ACK, подтверждающее получение сообщения SYN и содержащее свой собственный произвольный начальный номер (seq) и номер последовательности подтверждения (ack), который равен начальному номеру клиента +1.
Клиент отправляет серверу сообщение ACK с номером подтверждения, который равен начальному номеру сервера +1.
Проблема Triple Handshake возникает, когда злоумышленник нарушает правильный порядок шагов рукопожатия, вставляя свой сервер между клиентом и настоящим сервером. В этом случае злоумышленник может получить доступ к конфиденциальной информации, передаваемой между клиентом и сервером.

Чтобы избежать проблемы Triple Handshake, необходимо использовать проверенные и безопасные протоколы SSL/TLS и устанавливать соединение только с доверенными серверами.


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

👨🏻‍💻 Что такое NaN?

Это специальное значение в JavaScript, которое означает «не число» (Not-a-Number).

Возможные причины, по которым значение становится NaN:

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

let result1 = 10 / "hello"; // result1 будет равен NaN
let result2 = Math.sqrt(-1); // result2 будет равен NaN
let result3 = parseInt("hello"); // result3 будет равен NaN

Значение NaN имеет интересное свойство: оно не равно ни одному другому значению, включая само себя. Поэтому существует специальная функция isNaN(), которая позволяет проверить, является ли значение NaN:

let result = isNaN(NaN); // result будет равен true
let result2 = isNaN("hello"); // result2 будет равен true, потому что строка "hello" не может быть преобразована в число
let result3 = isNaN(10); // result3 будет равен false, потому что 10 - это число

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

👨🏻‍💻 Как реализовать отложенную загрузку изображений?

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

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

Lazy Loading — техника, которая позволяет отложить загрузку изображений, находящихся за пределами видимой области. Для этого можно использовать библиотеки, такие как Lazysizes или Intersection Observer API.

Атрибуты data- — Вы можете использовать атрибут data- вместе с атрибутом src, чтобы отложить загрузку изображения:

<img data-src="path-to-image.jpg" alt="Alt text">

Затем вы можете использовать JavaScript, чтобы загрузить изображение, когда оно станет видимым:

const img = document.querySelector('img');
img.setAttribute('src', img.getAttribute('data-src'));

Использование CSS для изменения размера изображения, уменьшения его качества или изменения его формата. Например, вы можете использовать свойство “background-image” для загрузки изображения как фон элемента:

.element {
background-image: url(path-to-image.jpg);
}

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

Что такое Event loop и как он работает?
это механизм в JavaScript, который позволяет выполнить асинхронный код и обрабатывать события, такие как клики мыши, нажатия клавиш и таймеры.

Event loop работает внутри JavaScript движка и состоит из двух основных фаз: фаза синхронизации и фаза выполнения задач. В фазе синхронизации обрабатываются синхронные операции, такие как выполнение кода и обработка событий, которые были помещены в очередь в прошлый цикл. В фазе выполнения задач обрабатываются асинхронные операции, такие как колбэки таймеров и событий.

Когда JavaScript выполняет код, все синхронные операции помещаются в очередь. Когда очередь становится пустой, Event loop проверяет, есть ли в очереди асинхронные операции. Если есть, они выполняются в порядке их добавления в очередь.

Например, если мы вызываем setTimeout с задержкой в 1 секунду, функция setTimeout помещает колбэк функцию в очередь и устанавливает таймер на 1 секунду. Когда таймер сработает, колбэк функция будет добавлена в очередь, и Event loop выполнит ее.

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

Event loop является важным концептом в асинхронном программировании на JavaScript, поэтому важно понимать, как он работает, чтобы писать эффективный и предсказуемый асинхронный код.

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