Frontend | Вопросы собесов

Партнёрская программа рекрутинга в Яндекс Еду Станьте партнёром Яндекс Еды по привлечению курьеров и получите кучу преимуществ: 💰Платим до 25 000 ₽ за успешного кандидата 📞Поддержка на всех этапах 📅Свободное расписание 📊Удобные инструменты для работы Приводите новых курьеров и получайте в среднем 187 000 ₽ в месяц! Зарегистрироваться #реклама eda.yandex.ru О рекламодателе

📌 Что такое event loop? 💬 Спрашивают в 67% собеседований Event Loop (цикл событий) — это один из ключевых аспектов асинхронного программирования, обеспечивающий возможность выполнения JavaScript-кода в однопоточном режиме, не блокируя выполнение других операций. Это достигается за счёт использования цикла, который постоянно проверяет, есть ли задачи для выполнения, и если они есть, то выполняет их одну за другой. JavaScript работает в одном потоке, что означает, что в любой момент времени может выполняться только одна операция. Однако, благодаря Event Loop, он способен обрабатывать асинхронные действия, такие как запросы к серверу, таймеры или обработка событий пользовательского интерфейса, не останавливаясь для ожидания их завершения. 🤔 Работает Event Loop следующим образом: 1️⃣ Call Stack (Стек вызовов): Содержит текущий стек выполнения функций. Когда функция вызывается, она добавляется в стек вызовов, а когда выполнение функции заканчивается, она удаляется из стека. 2️⃣ Callback Queue (Очередь обратных вызовов): Когда асинхронная операция завершается, её callback (функция обратного вызова) помещается в очередь обратных вызовов. 3️⃣ Event Loop: Цикл событий непрерывно проверяет стек вызовов на наличие функций для выполнения. Если стек вызовов пуст, Event Loop извлекает первую функцию из очереди обратных вызовов и помещает её в стек вызовов для выполнения. Это позволяет JavaScript обрабатывать длительные операции, такие как загрузка данных, не блокируя главный поток и обеспечивая отзывчивость приложения. ➕ Пример кода:

console.log('Первое сообщение');
setTimeout(() => {
    console.log('Сообщение из setTimeout');
}, 0);
console.log('Второе сообщение');

В этом примере, несмотря на то что setTimeout имеет задержку в 0 миллисекунд, вывод в консоль будет следующим:

Первое сообщение
Второе сообщение
Сообщение из setTimeout

Это происходит потому, что вызов setTimeout помещает его callback в очередь обратных вызовов, который будет выполнен только после того, как выполнение текущего кода в стеке вызовов завершится и стек станет пустым. 🤔 Итог: Event Loop позволяет JavaScript выполнять асинхронные операции, обрабатывая их по мере завершения, не блокируя при этом главный поток выполнения. Это делает возможным создание отзывчивых и асинхронных веб-приложений. 🔥 ТОП ВОПРОСОВ С СОБЕСОВ 🔒 База собесов | 🔒 База тестовых

🔥 Один в поле не воин, поэтому топовый программист должен находится в топ команде. 🧑‍💻 Марк Цукерберг создал первоначальную версию Facebook в одиночку, но для превращения стартапа в глобальную социальную сеть потребовалась мощная команда. 👌 IT мероприятия - одно из тех мест, где можно найти единомышленников в данной нише. 🔥 Подпишись на канал IT события, чтобы не упустить возможность в реализации своего потенциала.

Регистрируйтесь на Yandex Scale 2024! 25 сентября состоится главная конференция Yandex Cloud для тех, кто создаёт цифровые продукты и решения. В этом году мероприятие пройдёт в МХАТ имени М. Горького в Москве и онлайн. 5 технологических треков, 31 доклад, 50 спикеров, нетворкинг — разве это не лучший способ продуктивно провести день? Зарегистрироваться #реклама 16+ scale.yandex.cloud О рекламодателе

Углубите знания в веб-разработке, получите практичные инсайты и создавайте новые крутые проекты. Регистрируйтесь на бесплатный мини-курс: https://epic.st/Eexwj?erid=2VtzqxRq1wS Вы научитесь: — Создавать веб-страницы, используя язык разметки HTML и технологию CSS — Реализовывать серверную часть (backend) веб-приложений на языке PHP — Работать с базой данных MySQL при помощи языка запросов SQL — Создавать приложения на языке программирования JavaScript — Размещать сайты в интернете 📌Спикер — Даниил Пилипенко, основатель и директор центра подбора IT-специалистов SymbioWay. 19 лет работает в сфере Java- и веб-разработки, руководит командами разработки в разных проектах. 🎁Подарки: — Сертификат на скидку 10 000 рублей на любой курс — Доступ к изучению английского языка на год — 5 полезных подборок материала — Персональная карьерная консультация Реклама. ЧОУ ДПО «Образовательные технологии «Скилбокс (Коробка навыков)», ИНН: 9704088880

Jobski - твой помощник при поиске работы в IT Сервис индивидуально подбирает вакансии, учитывая ваш опыт, навыки и стек технологий. Узнать больше #реклама jobski.ru О рекламодателе

📌 Как задать последовательность выполнения скриптов? 💬 Спрашивают в 3% собеседований Последовательность выполнения скриптов можно контролировать несколькими способами: 1️⃣ Порядок размещения в HTML: Скрипты выполняются в порядке их появления в документе.

   <script src="script1.js"></script>
   <script src="script2.js"></script>
   

2️⃣ Атрибут `defer`: Скрипты с атрибутом defer выполняются в порядке их появления после загрузки и парсинга HTML.

   <script src="script1.js" defer></script>
   <script src="script2.js" defer></script>
   

3️⃣ Атрибут `async`: Скрипты с атрибутом async выполняются по мере их загрузки, независимо от порядка в HTML.

   <script src="script1.js" async></script>
   <script src="script2.js" async></script>
   

🤔 Вкратце: Скрипты выполняются в порядке их размещения в HTML. Атрибуты defer и async позволяют управлять этим процессом: defer сохраняет порядок, async выполняет скрипты по мере загрузки. 🔥 ТОП ВОПРОСОВ С СОБЕСОВ 🔒 База собесов | 🔒 База тестовых

14 IT-конференций: технологии разных стеков на практике У вас большой опыт в IT? Обменяйтесь им с другими — на конференциях JUG Ru Group. Этой осенью приглашаем вас на целых 14 конференций — в Москве, Санкт-Петербурге и онлайн. Конференции — это выступления и дискуссии middle и senior-специалистов разных направлений. Выбирайте свой стек и присоединяйтесь: — SmartData — инженерия данных — DotNext — .NET — Flow — системный и бизнес-анализ — PiterPy — Python — VideoTech — видеотехнологии — GoFunc — Go — КаргоКульт — HR-практики — Joker — Java — Heisenbug — тестирование — Mobius — мобильная разработка — SafeCode — безопасность приложений — DevOops — культура и процессы — HolyJS — JavaScript — I'ML — использование ML Узнать больше #реклама jugru.org О рекламодателе

Мобильные разработчики, общий сбор! 29 августа в Санкт-Петербурге пройдёт VK JT Mobile, первая конференция VK для мобильных разработчиков на iOS и Android. Вспомним прошлое, обсудим будущее и, опираясь на наш опыт, расскажем, как моментально внедрять технологии, структурировать миллионы строк кода и постоянно улучшать продуктовые метрики. В программе нестандартные сценарии работы с пушами, упрощение разработки с помощью нейросетей, фичи для анализа ошибок и даже реализация приложений для автомобилей. Подробнее — на сайте. Регистрируйтесь, если хотите реализовывать сложные в разработке, но простые для юзеров приложения, а также разбираться в инструментах и практиках, которые применяют наши специалисты 🙋

📌 Как строки кода преобразуются в сайт? 💬 Спрашивают в 3% собеседований Преобразование строк кода в сайт включает несколько ключевых этапов. Рассмотрим этот процесс подробно. 1️⃣ Получение исходного кода: Когда вы создаете сайт, вы пишете исходный код на языках HTML, CSS и JavaScript. Этот код хранится на сервере, готовый для отправки пользователю по запросу. 2️⃣ Запрос к серверу и ответ: Когда пользователь вводит URL в браузере, браузер отправляет HTTP-запрос к серверу. Сервер отвечает, отправляя обратно файлы с кодом. 3️⃣ Парсинг HTML: Браузер начинает анализировать HTML-документ. Он считывает строки HTML-кода и строит дерево DOM (Document Object Model). DOM представляет собой иерархическую структуру всех элементов на странице. 4️⃣ Загрузка и парсинг CSS: При обнаружении ссылок на CSS-файлы в HTML (тег <link>), браузер загружает эти файлы и анализирует их, создавая CSSOM (CSS Object Model). CSSOM описывает стили и правила для каждого элемента на странице. 5️⃣ Создание дерева рендеринга: После создания DOM и CSSOM, браузер объединяет их в дерево рендеринга. Это дерево определяет, как элементы будут отображаться на странице, с учетом всех стилей и разметки. 6️⃣ Загрузка и выполнение JavaScript: Когда браузер встречает теги <script> в HTML, он загружает и выполняет JavaScript-код. Скрипты могут изменять DOM и CSSOM, добавляя интерактивность и динамические элементы на страницу. 7️⃣ Вывод на экран (рендеринг): Браузер рассчитывает положение и размеры каждого элемента (layout) на основе дерева рендеринга. Затем он отрисовывает (paint) элементы на экране, используя графические ресурсы. 8️⃣ Рефлоу и репейнт: Если JavaScript изменяет структуру DOM или стили CSS, браузер может повторно вычислить расположение элементов (reflow) и обновить их отрисовку (repaint). Эти процессы могут быть ресурсоемкими, поэтому важно оптимизировать код для их минимизации. 🤔 Пример:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Пример страницы</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Заголовок</h1>
  <p>Параграф текста.</p>
  <script src="script.js"></script>
</body>
</html>

🤔 В этом примере: ➕ HTML создаёт базовую структуру страницы. ➕ CSS-файл задаёт стили для элементов. ➕ JavaScript добавляет интерактивность. 🤔 Вкратце: Браузер получает исходный код, анализирует HTML и CSS для создания внутренней структуры данных (DOM и CSSOM), затем выполняет JavaScript, рассчитывает расположение элементов и отображает их на экране. 🔥 ТОП ВОПРОСОВ С СОБЕСОВ 🔒 База собесов | 🔒 База тестовых

🔥 Один в поле не воин, поэтому топовый программист должен находится в топ команде. 🧑‍💻 Марк Цукерберг создал первоначальную версию Facebook в одиночку, но для превращения стартапа в глобальную социальную сеть потребовалась мощная команда. 👌 IT мероприятия - одно из тех мест, где можно найти единомышленников в данной нише. 🔥 Подпишись на канал IT события, чтобы не упустить возможность в реализации своего потенциала.

Подписывайтесь на официальный канал Яндекс Маркета: ✨ первыми узнавать о наличии любимых оригинальных брендов (Adidas, Nike, IKEA, Apple); ✨ покупать выгодно со скидками на сезонных распродажах; ✨ ловить ха-ха от постов эсэмэмщика. Узнать больше #реклама О рекламодателе

📌 Как происходит отрисовка сайта для пользователя? 💬 Спрашивают в 3% собеседований Отрисовка сайта для пользователя включает несколько этапов. Давайте разберём их подробнее. 1️⃣ Запрос к серверу: Когда пользователь вводит URL-адрес в браузере и нажимает Enter, браузер отправляет HTTP-запрос к серверу, где находится сайт. 2️⃣ Ответ сервера: Сервер получает запрос и отправляет обратно нужные файлы. Обычно это HTML-документ, стили (CSS) и скрипты (JavaScript). 3️⃣ Парсинг HTML: Браузер начинает читать (парсить) HTML-документ. Он строит дерево DOM (Document Object Model), которое представляет структуру HTML. Каждый элемент HTML становится узлом в этом дереве. 4️⃣ Загрузка и применение CSS: После парсинга HTML браузер загружает и применяет стили из CSS-файлов. Это позволяет создать дерево CSSOM (CSS Object Model), которое описывает, как каждый элемент должен выглядеть. Затем DOM и CSSOM объединяются, чтобы создать render tree (дерево рендеринга). 5️⃣ Загрузка и выполнение JavaScript: Когда браузер находит теги <script>, он загружает и выполняет JavaScript. Скрипты могут изменять DOM, что потребует обновления render tree. JavaScript может также изменять CSSOM и запрашивать новые данные с сервера (например, с помощью AJAX). 6️⃣ Отрисовка (рендеринг): На основе render tree браузер рассчитывает расположение каждого элемента (layout) и отрисовывает (paint) их на экране. Этот процесс называется layout и painting. 7️⃣ Оптимизации и обновления: Браузеры используют различные оптимизации, такие как кэширование ресурсов, асинхронную загрузку скриптов и отложенную загрузку изображений. JavaScript и CSS могут вызывать изменения в DOM, которые требуют перерисовки (repaint) или перерасчета расположения элементов (reflow). 🤔 Пример:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Мой Сайт</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Привет, мир!</h1>
  <p>Это пример простого HTML-документа.</p>
  <script src="script.js"></script>
</body>
</html>

В этом примере браузер сначала загрузит HTML, создаст DOM, затем загрузит CSS и создаст CSSOM, а потом загрузит и выполнит JavaScript. 🤔 **Вкратце**: Браузер загружает HTML, CSS и JavaScript с сервера, создаёт внутренние структуры данных (DOM и CSSOM), рассчитывает расположение элементов и отрисовывает их на экране пользователя. 🔥 ТОП ВОПРОСОВ С СОБЕСОВ 🔒 База собесов | 🔒 База тестовых

Очная онлайн-магистратура ИТМО: станьте DevOps-инженером Онлайн-магистратура «DevOps-инженер облачных сервисов» от Яндекс Практикум Вы сможете работать DevOps-инженером или SRE в крупных IT-компаниях В магистратуре вы глубоко погрузитесь в программирование и научитесь создавать стабильную облачную инфраструктуру. А ещё будете заниматься английским, чтобы было проще устроиться в международную компанию. Фундаментальные знания, льготы очного студента и практический опыт Яндекса Подать заявку #реклама 16+ practicum.yandex.ru О рекламодателе

📌 Что такое доступность интерфейсов? 💬 Спрашивают в 3% собеседований Доступность интерфейсов (или веб-доступность, англ. web accessibility) — это практика создания веб-сайтов и приложений, которые могут быть использованы всеми людьми, включая людей с ограниченными возможностями. Цель доступности — сделать так, чтобы любой пользователь, независимо от его физических или когнитивных особенностей, мог получить доступ к контенту и функциональности веб-ресурса. 🤔 Зачем нужна доступность 1️⃣ Социальная значимость: ➕ Доступность интерфейсов обеспечивает равные возможности для всех пользователей, включая людей с инвалидностью. ➕ Это способствует социальному включению и поддерживает права всех людей на доступ к информации и услугам. 2️⃣ Юридические требования: ➕ Во многих странах существуют законы и стандарты, требующие, чтобы веб-сайты были доступными для людей с ограниченными возможностями. ➕ Несоблюдение этих требований может привести к юридическим последствиям и штрафам. 3️⃣ Расширение аудитории: ➕ Доступные веб-сайты и приложения могут привлечь большую аудиторию, включая людей с различными видами ограничений. ➕ Это может улучшить пользовательский опыт для всех пользователей, так как принципы доступности часто приводят к улучшению общей удобности интерфейса. 🤔 Основные принципы доступности 1️⃣ Воспринимаемость (Perceivable): ➕ Контент должен быть представлен таким образом, чтобы пользователи могли его воспринять. ➕ Пример: использование альтернативного текста (alt) для изображений, чтобы они могли быть восприняты пользователями экранных читалок. 2️⃣ Управляемость (Operable): ➕ Пользовательские интерфейсы и навигация должны быть управляемыми. ➕ Пример: обеспечение возможности навигации по сайту с помощью клавиатуры для пользователей, не использующих мышь. 3️⃣ Понимаемость (Understandable): ➕ Информация и управление интерфейсом должны быть понятными. ➕ Пример: использование простого и понятного языка, предсказуемое поведение интерфейсов. 4️⃣ Надежность (Robust): ➕ Контент должен быть достаточно надежным, чтобы его можно было интерпретировать различными пользовательскими агентами, включая вспомогательные технологии. ➕ Пример: использование семантически правильного HTML-кода. 🤔 Примеры улучшений доступности 1️⃣ Альтернативный текст для изображений:

   <img src="example.jpg" alt="Описание изображения">
   

2️⃣ Подписи и описания для форм:

   <label for="username">Имя пользователя:</label>
   <input type="text" id="username" name="username">
   

3️⃣ Доступная навигация: - Обеспечение возможности перемещения по странице с помощью клавиши Tab и указание фокуса для элементов.

   :focus {
     outline: 2px solid blue;
   }
   

4️⃣ Использование ARIA (Accessible Rich Internet Applications): - ARIA атрибуты помогают сделать сложные веб-приложения доступными.

   <button aria-label="Закрыть меню">X</button>
   

🤔 Инструменты и ресурсы для проверки доступности 1️⃣ Screen readers (экранные читалки): ➕ JAWS, NVDA, VoiceOver — программы, которые озвучивают содержимое экрана и помогают пользователям с нарушением зрения. 2️⃣ Линтеры и валидаторы: ➕ WAVE (Web Accessibility Evaluation Tool), Axe, Lighthouse — инструменты для автоматической проверки доступности веб-страниц. 3️⃣ Руководства и стандарты: ➕ WCAG (Web Content Accessibility Guidelines) — международные рекомендации по обеспечению доступности веб-контента. 🤔 Резюме Доступность интерфейсов — это практика создания веб-сайтов и приложений, которые могут быть использованы всеми, включая людей с ограниченными возможностями. Это важно для социальной инклюзии, соблюдения юридических требований и улучшения общего пользовательского опыта. Принципы доступности включают воспринимаемость, управляемость, понимаемость и надежность. 🔥 ТОП ВОПРОСОВ С СОБЕСОВ 🔒 База собесов | 🔒 База тестовых

🔥 Один в поле не воин, поэтому топовый программист должен находится в топ команде. 🧑‍💻 Марк Цукерберг создал первоначальную версию Facebook в одиночку, но для превращения стартапа в глобальную социальную сеть потребовалась мощная команда. 👌 IT мероприятия - одно из тех мест, где можно найти единомышленников в данной нише. 🔥 Подпишись на канал IT события, чтобы не упустить возможность в реализации своего потенциала.