Frontend | Вопросы собесов - Telegram 频道 @easy_javascript

17 407

🤔 Что разбирали в движке браузера? Обычно разбираются: - Event Loop (очереди микротасков и макротасков); - Call Stack и Web APIs; - Garbage Collector; - Внутренняя работа setTimeout, Promise, render; - Оптимизация DOM, reflow/repaint; - Компиляция и исполнение JS (V8, SpiderMonkey). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

17 407

🤔 Как уничтожить объект web worker? В JavaScript, чтобы уничтожить объект Web Worker, необходимо использовать метод terminate(). Этот метод останавливает выполнение worker'а, освобождает связанные с ним ресурсы и завершает его работу. После вызова terminate() объект worker больше не может быть использован. 🚩Зачем уничтожать Web Worker? Web Worker позволяет выполнять тяжелые операции в фоновом потоке, не блокируя основной поток (UI-поток). Однако, если worker больше не нужен, он продолжает существовать и занимает ресурсы (память, процессорное время). Чтобы избежать утечек памяти и оптимизировать работу приложения, важно уничтожать worker, когда он больше не используется. 🚩Как использовать `terminate()`? Вы вызываете метод terminate() на экземпляре объекта worker. Это мгновенно останавливает выполнение фонового скрипта.

// Создаем worker
const myWorker = new Worker('worker.js');

// Выполняем какие-то операции через worker
myWorker.postMessage('Hello, worker!');

// Завершаем работу worker, когда он больше не нужен
myWorker.terminate();

🚩Важно помнить 1⃣После вызова terminate() worker полностью уничтожается и больше не может отправлять или получать сообщения. 2⃣Если есть обработчики событий, привязанные к worker (например, onmessage), они автоматически удаляются. 3⃣Доступ к worker после вызова terminate() не приведет к ошибке, но никакие операции через него больше работать не будут.

const worker = new Worker('worker.js');

// Отправляем сообщение
worker.postMessage('Start working');

// Завершаем работу worker
worker.terminate();

// Попытка отправить сообщение после уничтожения worker
worker.postMessage('Will this work?'); // Ничего не произойдет, worker уже завершен

🚩 Когда еще уничтожается worker? Если вы перезагружаете страницу или закрываете вкладку, все web worker автоматически уничтожаются браузером. Однако в рамках текущей сессии ответственность за уничтожение лежит на разработчике. Ставь 👍 и забирай 📚 Базу знаний

17 407

Дизайн в FIGMA с нуля. Бесплатный курс + портфолио Онлайн-программа с наставником и чатом. Дизайн от профессионалов. Доступ 0 руб. Узнать больше #реклама 16+ yudaevschool24.online О рекламодателе

17 407

🤔 Что такое атрибут target и какие значения он принимает? Атрибут target определяет, где откроется ссылка или форма. Значения: - _self — в текущем окне (по умолчанию); - _blank — в новой вкладке; - _parent — в родительском фрейме; - _top — в полном окне браузера. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

17 407

🤔 Когда стоит использовать тип any? Тип any в TypeScript позволяет отключить проверку типов и использовать любую структуру данных, как в обычном JavaScript. Но any убирает всю защиту TypeScript, поэтому его нужно использовать только в крайних случаях. 🚩Если тип данных неизвестен заранее (например, ответ от API) Иногда сервер может вернуть разные структуры данных, и невозможно заранее определить точный тип.

async function fetchData(url: string): Promise<any> {
  const response = await fetch(url);
  return response.json();
}

Лучший вариант — использовать интерфейсы вместо any:

interface User {
  id: number;
  name: string;
}

async function fetchUser(url: string): Promise<User> {
  const response = await fetch(url);
  return response.json() as User;
}

🚩При миграции JavaScript в TypeScript Если проект на чистом JavaScript, добавление TypeScript может сломать код. any помогает постепенно вводить строгую типизацию.

function log(value: any) {
  console.log(value);
}

🚩Когда работаем с динамическими структурами (например, `localStorage`) В localStorage можно сохранить что угодно, поэтому при чтении данных тип неизвестен.

const data: any = localStorage.getItem("user");

Лучше сразу привести any к нужному типу

const user = JSON.parse(localStorage.getItem("user") || "{}") as { id: number; name: string };

🚩Когда пишем универсальную библиотеку Если функция должна работать с разными типами, any может быть временным решением.

function mergeObjects(obj1: any, obj2: any): any {
  return { ...obj1, ...obj2 };
}

Лучший вариант с generic (T вместо any)

function mergeObjects<T, U>(obj1: T, obj2: U): T & U {
  return { ...obj1, ...obj2 };
}

Ставь 👍 и забирай 📚 Базу знаний

17 407

Скидки до 60 000 ₽ на смартфоны HONOR на Яндекс Маркете Смартфоны HONOR. Современный дизайн и мощность - покупай на Яндекс Маркете. Перейти на сайт #реклама market.yandex.ru О рекламодателе

17 407

🤔 Что использовать, чтобы всплытие событий не происходило? Метод event.stopPropagation() останавливает всплытие события вверх по DOM. Также можно использовать event.stopImmediatePropagation() для прекращения вызова других обработчиков. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

17 407

Квартиры в Новостройке СПб. Колпино. Скидки до 20% Жилой комплекс "Квартал Заречье" Санкт-Петербург. Колпино. 4 девятиэтажных жилых корпуса 8-этажный крытый гараж на 496 парковочных мест В живописном месте у реки Ижора. На первых этажах будут размещены магазины, кофейни, поликлиника и зона коворкинга. Перейти на сайт Проектная декларация на сайте https://наш.дом.рф/. Застройщик: ООО "СЗ "ЗАГОРОДНАЯ, 71". Финансовые услуги оказывает: ПАО Сбербанк. #реклама квартал-заречье.рф О рекламодателе

17 407

🤔 Какие проблемы решает eventloop? Event Loop (Цикл событий) – это механизм, который позволяет JavaScript работать асинхронно, обрабатывать события и не блокировать основной поток выполнения. Он решает несколько важных проблем, которые были бы сложны без него. 🚩JavaScript однопоточный, но нужно выполнять асинхронные задачи JavaScript работает в одном потоке, то есть выполняет код последовательно. Если одна операция занимает много времени (например, загрузка данных с сервера), выполнение всего кода остановилось бы, пока задача не завершится. Это привело бы к зависанию страницы. Event Loop позволяет выполнять тяжёлые операции (например, запросы на сервер, таймеры) асинхронно, не блокируя основной поток.

console.log("1: Перед запросом");

setTimeout(() => {
  console.log("2: Данные загружены");
}, 2000);

console.log("3: После запроса");

Вывод в консоль

1: Перед запросом  
3: После запроса  
2: Данные загружены (спустя 2 секунды)

🚩Обработка пользовательских событий без зависаний Если бы JavaScript не мог обрабатывать события асинхронно, то нажатия кнопок, прокрутка страницы и другие действия зависали бы, пока выполняется тяжёлая операция. Event Loop ставит события (например, click, keydown) в очередь и обрабатывает их только когда основной поток свободен.

document.querySelector("button").addEventListener("click", () => {
  console.log("Кнопка нажата!");
});

🚩Загрузка данных без блокировки страницы Когда мы загружаем данные с сервера (fetch, setTimeout, setInterval), они не приходят мгновенно. Без Event Loop браузер бы зависал в ожидании ответа. Асинхронные запросы (fetch, XMLHttpRequest) выполняются в фоновом режиме. Когда ответ готов, он помещается в очередь задач и обрабатывается, когда основной поток освободится.

console.log("Запрос данных...");

fetch("https://jsonplaceholder.typicode.com/posts/1")
  .then(response => response.json())
  .then(data => console.log("Данные получены:", data));

console.log("Код выполняется дальше!");

Вывод

Запрос данных...  
Код выполняется дальше!  
(Спустя время) Данные получены: {id: 1, title: "..."}

🚩Обход блокировки в тяжёлых вычислениях Если в коде идёт сложная операция (например, сложные вычисления или рендеринг огромного списка), интерфейс зависнет. Можно разбить задачу на части и выполнять её постепенно с помощью setTimeout или requestAnimationFrame.

let count = 0;

function heavyTask() {
  for (let i = 0; i < 1e6; i++) {
    count++;
  }
  console.log("Часть работы выполнена!");

  if (count < 5e6) {
    setTimeout(heavyTask, 0); // Даем Event Loop обработать другие задачи
  }
}

heavyTask();

Ставь 👍 и забирай 📚 Базу знаний

17 407

FinamTrade: инвестиции в один клик 📊 В современном мире трейдеру важно быть на шаг впереди, а для этого необходима удобная и быстрая платформа. 📱 Мобильное приложение FinamTrade — ваш незаменимый помощник для инвестиций: — Все ключевые активы в одном месте: акции, облигации, ETF, ПИФы, структурные продукты, валюты. — Более 10 000 котировок и 130+ инструментов графического анализа. — Лаконичный интерфейс и сделки в пару кликов. — Удобное управление портфелем, история операций и уведомления о важных событиях. — Витрина готовых продуктов и стратегий на одном экране. Скачивайте FinamTrade во всех популярных сторах и инвестируйте удобно! Попробовать Финансовые услуги оказывает: АО "Банк ФИНАМ", АО "ФИНАМ". #реклама 16+ trading.finam.ru О рекламодателе

17 407

🤔 Различия между let и const - let позволяет переназначать значения переменных, в то время как const не позволяет это после инициализации. - Обе директивы предоставляют блочную область видимости. - let идеально подходит для использования в случаях, когда значение переменной может изменяться. - const используется для объявления переменных с неизменным значением. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

17 407

Умный выбор для умного дома — AQARA 👍 Создайте идеальную атмосферу в доме с умным светом 👍 Открывайте дверь телефоном или отпечатком пальца 👍 Присматривайте за играми и приключениями ваших детей 💰 Промокод N31F1C8K со скидкой 15% для подписчиков Купить #реклама market.yandex.ru О рекламодателе

17 407

🤔 Как браузер понимает что ресурс нужно закешировать? Браузер использует HTTP-заголовки и механизмы кэширования, чтобы решить, нужно ли сохранять ресурс (HTML, CSS, JS, изображения) и как долго его хранить. 🚩Как браузер решает, кешировать ресурс или нет? Когда браузер загружает ресурс, сервер может сказать браузеру, как его кешировать, с помощью HTTP-заголовков.

HTTP/1.1 200 OK
Cache-Control: max-age=3600, public
ETag: "abc123"

🚩Как работают заголовки кэширования? 🟠`Cache-Control` – главный заголовок Определяет, как долго ресурс должен храниться в кэше.

Cache-Control: max-age=86400, public

🟠`Expires` – устаревший, но ещё используется Определяет конкретную дату, до которой браузер может использовать кэшированный ресурс.

Expires: Wed, 26 Feb 2025 12:00:00 GMT

🟠`ETag` – проверка обновлений ресурса Позволяет браузеру узнать, изменился ли файл на сервере.

ETag: "abc123"

Если браузер снова запрашивает ресурс, он отправляет заголовок

If-None-Match: "abc123"

🟠`Last-Modified` – альтернатива `ETag` Дата последнего изменения ресурса.

Last-Modified: Tue, 25 Feb 2025 15:30:00 GMT

Браузер может отправить запрос с

If-Modified-Since: Tue, 25 Feb 2025 15:30:00 GMT

Ставь 👍 и забирай 📚 Базу знаний

17 407

+6

Одежда SORRY, I'M NOT. Новая коллекция. Куртки, шапки, худи, брюки, футболки и аксессуары Перейти на сайт #реклама sorryiamnot.com О рекламодателе

17 407

🤔 Что такое CSS Grid? CSS Grid — это двумерная система размещения элементов. Позволяет задавать строки и колонки, управлять размерами, промежутками и позиционированием контента по сетке. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

17 407

🤔 Какие модификаторы есть у событий? В JavaScript у событий есть специальные модификаторы, которые позволяют изменять поведение события, управлять его распространением, обработкой и связанной с ним логикой. 🚩`stopPropagation` Этот метод предотвращает всплытие события вверх по дереву DOM. По умолчанию, события в DOM распространяются по фазам: погружение (capturing) → цель (target) → всплытие (bubbling). Если вы хотите остановить обработку события на текущем элементе и не позволить ему "подняться" выше по дереву DOM, используйте stopPropagation.

<div id="parent" style="padding: 20px; background: lightblue;">
  Родительский элемент
  <button id="child">Дочерний элемент</button>
</div>

<script>
  document.getElementById("parent").addEventListener("click", () => {
    alert("Событие всплыло до родителя");
  });

  document.getElementById("child").addEventListener("click", (event) => {
    alert("Событие на кнопке");
    event.stopPropagation(); // Остановим всплытие
  });
</script>

🚩`stopImmediatePropagation` Этот метод, помимо остановки всплытия (как stopPropagation), предотвращает выполнение других обработчиков на том же элементе. Если у одного и того же элемента есть несколько обработчиков для одного события, stopImmediatePropagation гарантирует, что после его вызова остальные обработчики не будут выполнены.

<button id="myButton">Нажми меня</button>

<script>
  const button = document.getElementById("myButton");

  button.addEventListener("click", () => {
    alert("Обработчик 1");
  });

  button.addEventListener("click", (event) => {
    alert("Обработчик 2");
    event.stopImmediatePropagation(); // Остановим все остальные обработчики
  });

  button.addEventListener("click", () => {
    alert("Обработчик 3"); // Этот обработчик не выполнится
  });
</script>

🚩`preventDefault` Этот метод отменяет поведение элемента по умолчанию. Некоторые элементы (например, ссылки или формы) имеют стандартное поведение. Например: - Клик по ссылке ведет на новый URL. - Отправка формы перезагружает страницу. С помощью preventDefault можно предотвратить это поведение.

<a href="https://example.com" id="link">Перейти на сайт</a>

<script>
  const link = document.getElementById("link");

  link.addEventListener("click", (event) => {
    event.preventDefault(); // Останавливаем переход по ссылке
    alert("Поведение ссылки отменено");
  });
</script>

🚩`passive` Это модификатор, который не является методом, а используется в настройках обработчика событий. Он указывает, что обработчик не вызывает preventDefault. Этот модификатор помогает оптимизировать обработку событий, таких как прокрутка (scroll), делая их более производительными. Некоторые браузеры при обработке событий (например, touchstart или wheel) предполагают, что вы можете использовать preventDefault. Это замедляет прокрутку, так как браузеру нужно ждать завершения вашего обработчика. Указав passive: true, вы говорите браузеру, что не собираетесь отменять поведение.

window.addEventListener("scroll", () => {
  console.log("Скролл работает");
}, { passive: true });

Ставь 👍 и забирай 📚 Базу знаний

17 407

Квартиры Prime-класса в Краснодаре. 2 часа до моря ЖК "Гарантия PRIME" в Краснодаре — тёплый климат и чистый воздух, лес и набережная в двух шагах. Всего 2 часа до пляжей Чёрного моря и 4 часа до склонов Красной Поляны. Авторский двор-сад с фонтанами, лаунж-зонами, японским двориком и многообразием растений. ✅ Река и заповедная зелёная зона у дома; ✅ Панорамные и витражные окна; ✅ Гастрономический кластер и Арт-пространство; ✅ Образовательный кластер; ✅ Деловой хаб и офисы резидентов. Во дворе детский сад, международная школа, бизнес-школа с бакалавриатом, филиал школы-лицея. КубГУ — всего в 2,5 км от дома. Все условия для развития вас и ваших детей по международным стандартам. Деловой хаб. Вы можете работать в Зелёном коворкинге и проводить встречи на Винной террасе. Ваша личная резиденция на Юге! Узнать больше Проектная декларация на сайте https://наш.дом.рф/. #реклама gk-garantiaprime.ru О рекламодателе

17 407

🤔 В чём разница между <canvas> и SVG? Canvas: - Рисование происходит в пикселях; - Не интерактивно по умолчанию; - Быстрее при большом количестве объектов; - После отрисовки графика теряет «знание» о нарисованном. SVG: - Основан на DOM-элементах; - Каждый элемент доступен и интерактивен; - Удобен для меньшего числа элементов; - Можно легко изменять стили и навешивать события. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

17 407

Запустите рекламу в телеграм-каналах с Яндекс Директом Перфоманс-реклама теперь в телеграм-каналах ⚡ Яндекс Директ знает, как привлечь целевую аудиторию 💰👌 Попробовать #реклама yandex.ru О рекламодателе

17 407

🤔 Чем spa отличается от классического сайта? SPA (Single Page Application) и классический сайт (MPA – Multi Page Application) — это два разных подхода к созданию веб-приложений. Они отличаются по способу загрузки данных, навигации и производительности. 🚩Классический сайт (MPA – Multi Page Application) Каждый раз при переходе на новую страницу браузер запрашивает HTML с сервера. Сервер формирует страницу и отправляет готовый HTML.

<?php
  echo "<h1>Добро пожаловать!</h1>";
?>
<a href="/about">О нас</a>

🚩SPA (Single Page Application) При первом заходе загружается одна HTML-страница и весь JavaScript. Дальше контент подгружается динамически через AJAX или Fetch API.

import React, { useState, useEffect } from "react";

function App() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch("/api/products")
      .then(res => res.json())
      .then(data => setData(data));
  }, []);

  return <div>{data ? JSON.stringify(data) : "Загрузка..."}</div>;
}

export default App;

Ставь 👍 и забирай 📚 Базу знаний

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

📈 Telegram 频道 Frontend | Вопросы собесов 的分析概览

📊 受众指标与增长动态

📝 描述与内容策略