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

🤔 Какие проблемы решают vue а какие jquery? Это два совершенно разных инструмента с разными подходами и целями. Они решают свои проблемы, но Vue.js более современный и масштабируемый фреймворк, тогда как jQuery — это библиотека для упрощения работы с DOM. Давайте разберёмся, какие проблемы решает каждый из них. 🚩Проблемы, которые решает Vue.js: Vue.js — это современный фреймворк для построения реактивных пользовательских интерфейсов (UI). Он решает множество проблем, которые возникают при разработке масштабных, интерактивных приложений. 🟠Реактивность данных Vue.js автоматически отслеживает изменения данных (двустороннее связывание данных) и обновляет интерфейс без необходимости вручную изменять DOM.

const app = Vue.createApp({
  data() {
    return {
      message: "Привет, мир!"
    };
  }
}).mount('#app');

HTML

<div id="app">
  <p>{{ message }}</p>
  <button @click="message = 'Изменено!'">Изменить сообщение</button>
</div>

🟠Компонентный подход Vue позволяет разбивать приложение на компоненты — маленькие, переиспользуемые части интерфейса, которые содержат свою логику, стили и разметку.

Vue.component('my-button', {
  template: `<button @click="clickHandler">Нажми меня</button>`,
  methods: {
    clickHandler() {
      alert('Нажали кнопку!');
    }
  }
});

HTML

<my-button></my-button>

🟠Управление состоянием Vue может работать с глобальным состоянием через Vuex (или Pinia). Это удобно для сложных приложений, где данные должны передаваться между разными компонентами. Если у вас корзина покупок, Vuex помогает сохранять её состояние и передавать данные компонентам без путаницы. 🟠Одностраничные приложения (SPA) Vue.js идеально подходит для создания SPA — приложений, где вся логика загружается единожды, а переходы между страницами происходят без перезагрузки браузера. Для этого используется библиотека vue-router. 🟠Упрощение работы с динамическими интерфейсами С Vue.js легко создавать сложные элементы интерфейса, такие как анимации, формы, списки с фильтрацией и сортировкой. 🟠Масштабируемость Vue.js идеально подходит для создания больших приложений, поскольку он поддерживает: Переиспользуемые компоненты. Интеграцию с современными инструментами разработки (TypeScript, Webpack, Babel). Поддержку экосистемы (Vuex, Vue Router, Pinia). 🚩Проблемы, которые решает jQuery jQuery — это библиотека, созданная для упрощения работы с DOM, AJAX и событиями. Она была особенно полезна в прошлом, когда JavaScript был менее удобным. 🟠Кроссбраузерная совместимость Раньше в JavaScript было много различий между браузерами. jQuery решал эту проблему, предоставляя единый API, который работал везде одинаково.

$('#element').hide(); // Работает во всех браузерах

🟠Простое управление DOM jQuery предоставляет мощные методы для поиска, добавления, удаления и изменения элементов DOM.

$('#button').click(function() {
  $('#text').text('Кнопка нажата');
});

🟠AJAX-запросы jQuery упрощал работу с AJAX-запросами, позволяя отправлять данные на сервер и получать ответ без перезагрузки страницы.

$.ajax({
  url: '/api/data',
  method: 'GET',
  success: function(data) {
    console.log(data);
  }
});

🟠Обработка событий jQuery предоставлял удобный API для работы с событиями, что особенно полезно при создании интерактивного интерфейса.

$('#button').on('click', function() {
  alert('Кнопка нажата!');
});

🟠Анимации jQuery позволяет легко создавать простые анимации (например, плавное появление или скрытие элементов).

$('#element').fadeIn();

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

🤔 Чем отличается замыкание от области видимости? - Область видимости — это область действия переменной. - Замыкание — это функция, которая «помнит» окружение, в котором была создана, даже после выхода из него. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

👨👨👨👨👨👨👨👨👨👨 Каналы с Junior IT вакансиями и стажировками Подписывайся и забирай свой оффер 🤘 1. Стажировки и вакансии по России и миру 2. IT вакансии по СНГ 3. IT стажировки по СНГ 4. ИИ-ассистент для автооткликов 5. DIGITAL и IT стажировки и вакансии 6. IT стажировки в топовых компаниях мира 7. Удалённые IT вакансии и стажировки 8. Python вакансии и стажировки 9. БИГТЕХ вакансии и стажировки 10. Design вакансии и стажировки 11. QA вакансии и стажировки 12. Junior вакансии и стажировки 13. Frontend вакансии и вопросы собесов 14. Вакансии и стажировки для аналитиков 15. Вакансии в русских стартапах за границей 16. Вакансии и стажировки для DevOps 17. Вакансии, которых нет на ХХ.РУ

🤔 Расскажи про memo в react React.memo — это функция в React, которая используется для оптимизации производительности функциональных компонентов. Она предотвращает ненужные повторные рендеры, если пропсы компонента не изменились. 🚩Зачем нужен `React.memo`? В React каждый раз, когда родительский компонент обновляется, все его дочерние компоненты тоже ререндерятся, даже если их пропсы остались неизменными. Это может негативно сказаться на производительности, особенно если дочерний компонент выполняет сложные вычисления или рендерит большое количество данных. React.memo решает эту проблему, запоминая (мемоизируя) предыдущий результат рендера и сравнивая его с новыми пропсами. Если пропсы не изменились, компонент просто использует закэшированное представление, а не ререндерится. 🚩Как использовать `React.memo`? React.memo — это функция высшего порядка (HOC), которая оборачивает функциональный компонент

import React from "react";

const MyComponent = ({ value }) => {
  console.log("Рендер компонента!");
  return <div>Значение: {value}</div>;
};

// Оборачиваем компонент в React.memo
const MemoizedComponent = React.memo(MyComponent);

export default MemoizedComponent;

🚩Пример без React.memo vs. с React.memo Допустим, у нас есть родительский компонент, который изменяет состояние при каждом клике

import React, { useState } from "react";
import MemoizedComponent from "./MyComponent";

const Parent = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Увеличить</button>
      <MemoizedComponent value="Привет, мир!" />
    </div>
  );
};

export default Parent;

🚩Когда НЕ стоит использовать `React.memo`? Если компонент всегда ререндерится из-за изменения пропсов – смысла в memo нет. Если компонент рендерится быстро – оптимизация может быть ненужной, а проверка пропсов даже замедлит работу. Если пропсы часто изменяются – кэширование теряет смысл, так как все равно ререндерится. Ставь 👍 и забирай 📚 Базу знаний

🤔 Что известно о версиях HTTP, чем они отличаются? - HTTP/1.1 — классический, последовательные запросы, keep-alive. - HTTP/2 — мультиплексирование, бинарный формат, заголовки сжимаются. - HTTP/3 (QUIC) — работает поверх UDP, более надёжный и быстрый при потере пакетов. Каждая версия улучшает скорость и устойчивость соединения. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Как можно вставить svg в html документ? Вставить SVG в HTML можно несколькими способами, в зависимости от того, что вам нужно: просто отобразить изображение, стилизовать его через CSS или динамически изменять с помощью JavaScript. 🟠Прямой (inline) SVG-код в HTML Этот способ позволяет стилизовать и изменять SVG с помощью CSS и JavaScript.

<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

🟠Через тег `<img>` Если SVG не нужно изменять, можно вставить его как обычное изображение.

<img src="image.svg" alt="Описание изображения" width="100" height="100">

🟠Через CSS `background-image` SVG можно использовать как фоновое изображение.

<div class="icon"></div>

<style>
  .icon {
    width: 100px;
    height: 100px;
    background-image: url('image.svg');
    background-size: cover;
  }
</style>

🟠Через тег `<object>` Позволяет загружать SVG-файлы и взаимодействовать с ними.

<object type="image/svg+xml" data="image.svg" width="100" height="100"></object>

🟠Через тег `<iframe>` SVG можно загружать в iframe.

<iframe src="image.svg" width="100" height="100"></iframe>

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

🤔 Как использовал iframe? - Встраивание видео, чартов, приложений. - Для отдельной изоляции контента (например, 3rd party). - Открытие внешних сайтов. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Как взаимодействуешь с eventloop? Event Loop (Цикл событий) – это механизм, который управляет выполнением кода, обработкой асинхронных задач и взаимодействием с Web API. 🚩Как мы взаимодействуем с Event Loop? Используем асинхронный код: setTimeout, setInterval, fetch, Promise, async/await Оптимизируем выполнение тяжелых задач Управляем приоритетами выполнения (Microtask vs Macrotask) 🟠Как работает Event Loop? JavaScript выполняет код в однопоточном режиме, но может обрабатывать асинхронные задачи через очередь событий (Event Queue) и микрозадачи (Microtask Queue).

console.log("1");

setTimeout(() => console.log("2"), 0);

Promise.resolve().then(() => console.log("3"));

console.log("4");

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

1
4
3
2

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

От устаревших моделей к будущему кибербезопасности 💻 На бесплатном вебинаре расскажем: 1) Почему старые правила безопасности больше не работают 2) Что такое Zero Trust на самом деле 3) Как концепция превращается в конкретные продукты и технологии 4) Для каких реальных задач Zero Trust подходит Efros DO: модули NA, ICC, FA, NAС ✨ Подарки за вашу активность! Среди участников вебинара будет разыгран корпоративный мерч от организаторов за самые интересные и актуальные вопросы 📅 Вебинар Zero Trust: современное прочтение правила «доверяй, но проверяй» состоится 9 сентября в 12:00–13:00 (московское время) Узнать больше #реклама 16+ sec.ussc.ru О рекламодателе

🤔 В чём находятся значения функции? Значения функции компонента React находятся в теле функции. В функциональных компонентах состояние, эффекты, переменные — всё управляется через хуки и находится внутри этой функции. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Как передать данные из родительского компонента в дочерний? Передача данных из родительского компонента в дочерний компонент — это одна из основных задач в работе с компонентами в React. Это делается с помощью пропсов (props). Пропсы — это способ передачи данных и событий от родительского компонента к дочернему. 🚩Шаги для передачи данных из родительского компонента в дочерний 1⃣Создание родительского компонента В родительском компоненте мы создаем состояние или просто определяем данные, которые хотим передать. Затем передаем эти данные в дочерний компонент через пропсы. 2⃣Приём данных в дочернем компоненте В дочернем компоненте мы получаем пропсы и используем их для отображения данных или выполнения других действий. Родительский компонент (ParentComponent.js)

import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
    const message = "Привет, дочерний компонент!";
    
    return (
        <div>
            <h1>Родительский компонент</h1>
            <ChildComponent message={message} />
        </div>
    );
}

export default ParentComponent;

Дочерний компонент (ChildComponent.js)

import React from 'react';

function ChildComponent(props) {
    return (
        <div>
            <h2>Дочерний компонент</h2>
            <p>{props.message}</p>
        </div>
    );
}

export default ChildComponent;

🚩Пояснение 1⃣В родительском компоненте `ParentComponent`: Создаем переменную message, содержащую строку "Привет, дочерний компонент!". В JSX разметке мы рендерим дочерний компонент ChildComponent, передавая ему пропс message со значением переменной message. 2⃣В дочернем компоненте ChildComponent: Принимаем пропс message через параметр props. Используем props.message для отображения переданной строки внутри тега <p>. 🚩Дополнительные примеры Родительский компонент (ParentComponent.js)

import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
    const user = {
        name: "Иван",
        age: 25
    };
    
    return (
        <div>
            <h1>Родительский компонент</h1>
            <ChildComponent user={user} />
        </div>
    );
}

export default ParentComponent;

Дочерний компонент (ChildComponent.js)

import React from 'react';

function ChildComponent(props) {
    return (
        <div>
            <h2>Дочерний компонент</h2>
            <p>Имя: {props.user.name}</p>
            <p>Возраст: {props.user.age}</p>
        </div>
    );
}

export default ChildComponent;

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

REKONFA Live 6 ноября приглашаем рекламодателей, агентства и рекламные площадки обсудить технологии, маркетинговые инструменты и актуальные новинки. Ключевые участники рынка поделятся опытом и расскажут: — О ситуации на рынке рекламы — Как продвигать и продавать в интернете в 2025 году — Как бизнесу адаптироваться к меняющимся условиям Вас ждут доклады на актуальные темы, классный нетворкинг, вдохновляющая атмосфера для творчества и креатива. Встречаемся 6 ноября в Москве. Для тех, кто не сможет приехать, организуем интерактивное digital-шоу. Мероприятие бесплатное, нужно только зарегистрироваться. Зарегистрироваться #реклама 16+ ya.rekonfa.ru О рекламодателе

🤔 Как можно изолировать var? Чтобы переменная, объявленная через var, не «утекала» в глобальную область, её можно изолировать с помощью функции или IIFE. Поскольку var имеет функциональную область видимости, оборачивание кода в функцию — единственный способ изолировать её. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Зачем создавались библиотеки react и другие? Библиотеки, такие как React, создавались для упрощения и оптимизации процесса разработки пользовательских интерфейсов (UI). Вот несколько ключевых причин, почему создавались React и другие библиотеки: 🟠Повышение эффективности разработки Написание большого количества кода вручную для создания динамических веб-страниц может быть громоздким и ошибочным. React позволяет разбивать интерфейс на отдельные компоненты, которые можно повторно использовать и комбинировать. Это снижает объем дублирующегося кода и упрощает его сопровождение. 🟠Улучшение производительности Постоянное обновление DOM (Document Object Model) может быть медленным и ресурсоемким. React использует виртуальный DOM, который минимизирует количество реальных изменений в DOM, обновляя только те элементы, которые действительно изменились. 🟠Облегчение работы с состоянием приложения Управление состоянием больших и сложных приложений может стать хаотичным. React предоставляет механизмы для удобного управления состоянием компонентов с помощью useState, useReducer, и других хуков. Это делает логику управления состоянием более ясной и предсказуемой. 🟠Улучшение масштабируемости и поддерживаемости кода По мере роста приложения, код может стать сложным для понимания и изменения. Подход к компонентам в React позволяет разработчикам легче разделять задачи и работать над отдельными частями приложения независимо друг от друга. Это улучшает масштабируемость и поддерживаемость кода. 🟠Сообщество и экосистема Наличие обширного сообщества и инструментов для разработки. React имеет большое сообщество разработчиков, множество библиотек и инструментов, которые упрощают разработку и интеграцию различных функций в приложения.

import React, { useState } from 'react';

function Counter() {
  // Определение состояния count с начальным значением 0
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Вы кликнули {count} раз(а)</p>
      <button onClick={() => setCount(count + 1)}>
        Кликни меня
      </button>
    </div>
  );
}

export default Counter;

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

🤔 Когда используются теги div и span? - div — это блочный элемент, используется для структурирования больших участков контента; - span — строчный элемент, применяется для выделения текста внутри других блоков без создания новой строки. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Где писать запросы к серверу? Запросы к серверу в React можно выполнять в нескольких местах в зависимости от архитектуры вашего приложения и используемого подхода. 🚩Использование хуков useEffect позволяет выполнять побочные эффекты, такие как запросы к серверу, в функциональных компонентах.

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

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

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://api.example.com/data');
        const result = await response.json();
        setData(result);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };

    fetchData();
  }, []); // Пустой массив означает, что эффект выполнится только при монтировании компонента

  return (
    <div>
      {data ? (
        <pre>{JSON.stringify(data, null, 2)}</pre>
      ) : (
        <p>Loading data...</p>
      )}
    </div>
  );
}

export default DataFetchingComponent;

🚩Методы жизненного цикла в классовых компонентах Метод componentDidMount используется для выполнения запросов к серверу в классовых компонентах после монтирования компонента.

import React, { Component } from 'react';

class DataFetchingComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: null,
    };
  }

  componentDidMount() {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        this.setState({ data });
      })
      .catch(error => {
        console.error('Error fetching data:', error);
      });
  }

  render() {
    const { data } = this.state;
    return (
      <div>
        {data ? (
          <pre>{JSON.stringify(data, null, 2)}</pre>
        ) : (
          <p>Loading data...</p>
        )}
      </div>
    );
  }
}

export default DataFetchingComponent;

🟠Сервисы или утилиты Запросы к серверу можно изолировать в отдельные файлы сервисов или утилит, что помогает сделать код более модульным и переиспользуемым. service.js

export async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
}

DataFetchingComponent.js

import React, { useState, useEffect } from 'react';
import { fetchData } from './service';

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

  useEffect(() => {
    fetchData()
      .then(data => setData(data))
      .catch(error => console.error('Error fetching data:', error));
  }, []);

  return (
    <div>
      {data ? (
        <pre>{JSON.stringify(data, null, 2)}</pre>
      ) : (
        <p>Loading data...</p>
      )}
    </div>
  );
}

export default DataFetchingComponent;

🟠Управление состоянием Для крупных приложений, где важно централизованное управление состоянием, запросы к серверу можно выполнять в рамках таких библиотек, как Redux или MobX. Ставь 👍 и забирай 📚 Базу знаний

🤔 На какие события video или audio можно подписаться? Можно подписаться на множество событий, в том числе: - play — начало воспроизведения; - pause — приостановка; - ended — завершение воспроизведения; - timeupdate — изменение текущего времени; - loadeddata — когда данные загружены; - volumechange — изменение громкости; - seeking и seeked — начало и завершение перемотки; - error — ошибка загрузки/воспроизведения. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Какие проблемы решает 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();

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

Как IT-компании увеличить продажи с помощью вебинаров? Делимся гайдом для маркетологов IT-компаний с рекомендациями ведущих российских разработчиков и экспертов МТС Линк. Вы узнаете: - Как правильно использовать онлайн-мероприятия для продвижения; - Как собрать 10 000 потенциальных клиентов из любой точки мира в одном месте; - Как увеличить узнаваемость бренда и создать комьюнити вокруг него; - Как оценить вклад онлайн-мероприятия в продвижение компании и правильно обработать лиды; Бонус: кейс IT-компании с доходимостью до вебинаров 70% Получите методичку бесплатно на сайте! Скачать #реклама 16+ mts-link.ru О рекламодателе

🤔 Когда нужно использовать типы, а когда интерфейсы? - interface — если описывается структура объекта или контракта API (особенно с наследованием). - type — для объединения, пересечений, объединений с примитивами (type ID = string | number). Общее правило: - interface — для объектов. - type — для композиции, объединений и utility-типов. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний