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

Сообщество IT-специалистов в Telegram от Selectel. Канал крупнейшего независимого провайдера IT-инфраструктуры и облаков. Шесть причин подписаться на канал: - железные новости; - обзоры продуктов; - разборы кейсов; - актуальные IT-статьи; - анонсы митапов; - бесплатные курсы. Подписаться #реклама О рекламодателе

📌 Как браузер обрабатывает ссылки? 💬 Спрашивают в 3% собеседований Браузер обрабатывает ссылки (теги <a>) следующим образом: 🤔 Основные этапы обработки ссылки браузером: 1️⃣ Рендеринг HTML: ➕ Когда браузер загружает HTML-документ, он разбирает его и создает DOM (Document Object Model). В этом процессе браузер встречает тег <a> и определяет, что это ссылка. 2️⃣ Наведение и щелчок по ссылке: ➕ Когда пользователь наводит курсор на ссылку, браузер может показать URL в строке состояния или всплывающем окне. ➕ При щелчке по ссылке браузер проверяет атрибуты ссылки (href, target, и др.), чтобы определить, как обработать этот клик. 3️⃣ Проверка атрибута `href`: ➕ Если href отсутствует или равно #, браузер не будет переходить на другую страницу. ➕ Если href содержит URL, браузер начинает процесс навигации. 4️⃣ Обработка атрибута `target`: ➕ Если target установлен в _self или не указан, браузер загружает новую страницу в текущем окне. ➕ Если target установлен в _blank, браузер открывает новую страницу в новой вкладке или окне. ➕ Если указано имя фрейма, браузер попытается загрузить новую страницу в указанный фрейм. 5️⃣ Выполнение возможных JavaScript обработчиков событий: ➕ Браузер проверяет наличие событий, таких как onclick, onmousedown, onmouseup и т.д. ➕ Если обработчик события вызвал event.preventDefault(), переход на новую страницу не произойдет. 6️⃣ Отправка HTTP-запроса: ➕ Браузер отправляет HTTP-запрос к серверу, если ссылка ведет на другой ресурс. ➕ Сервер обрабатывает запрос и отправляет ответ. 7️⃣ Обработка ответа от сервера: ➕ Если ответ сервера содержит HTML, браузер начнет разбор нового HTML-документа. ➕ Если ответ сервера является перенаправлением (статусы 3xx), браузер отправит новый запрос по указанному адресу. ➕ Если ответ сервера является ошибкой (статусы 4xx или 5xx), браузер отобразит страницу ошибки. 8️⃣ Загрузка ресурсов: ➕ После получения нового HTML-документа браузер загружает все связанные ресурсы (CSS, JS, изображения и т.д.). 9️⃣ Отображение новой страницы: ➕ Браузер обновляет DOM и перерисовывает страницу, отображая новый контент пользователю. 🤔 Пример работы с ссылкой HTML:

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

JavaScript:

document.getElementById('myLink').addEventListener('click', function(event) {
  event.preventDefault();
  console.log('Ссылка была нажата, но переход не произошел');
  // Можно выполнить дополнительную логику здесь
});

🤔 Атрибуты ссылки и их значение ➕ `href`: определяет URL, на который ведет ссылка. ➕ `target`: определяет, где открыть связанный документ. ➕ _self: в текущем окне/вкладке. ➕ _blank: в новом окне/вкладке. ➕ _parent: в родительском фрейме. ➕ _top: во всем текущем окне. ➕ `rel`: определяет отношения между текущим документом и связанным документом. Полезно для SEO и безопасности (например, rel="noopener noreferrer" для ссылок с target="_blank"). 🤔 Резюме Когда вы нажимаете на ссылку, браузер проверяет её атрибуты (href, target и другие), может выполнить JavaScript-обработчики событий, отправляет HTTP-запрос, обрабатывает ответ от сервера и отображает новую страницу. 🔥 ТОП ВОПРОСОВ С СОБЕСОВ 🔒 База собесов | 🔒 База тестовых

Такси для бизнеса. Яндекс Go Оптимизируйте свои расходы и повысьте эффективность бизнеса с Яндекс Go Узнать больше #реклама business.go.yandex О рекламодателе

❓Хотите узнать, как эффективно управлять состоянием в React.js с помощью хуков useState и useReducer? Ждем вас на открытом вебинаре 20 августа в 19:00 мск, где мы разберём: - основы управления состоянием в React.js с помощью хуков useState и useReducer; - различия и преимущества использования useState и useReducer; - практические примеры применения хуков для управления состоянием в реальных приложениях. Урок будет полезен как новичкам, знакомым с базовыми концепциями React, так и опытным разработчикам, которые хотят улучшить свои навыки управления состоянием. Встречаемся в преддверии старта курса «React.js Developer». Все участники вебинара получат специальную цену на обучение! 👉 Регистрируйтесь прямо сейчас, чтобы не пропустить бесплатный урок: https://otus.pw/eTz9/?erid=LjN8KDsCv Реклама. ООО "ОТУС ОНЛАЙН-ОБРАЗОВАНИЕ". ИНН 9705100963.

ТОП-4 Курса по графическому дизайну по версии Tutortop Tutortop — маркетплейс курсов №1 по количеству школ-партнеров, курсов и реальных отзывов студентов. Освойте востребованную профессию с нуля за 4-5 месяцев. Соберите портфолио из 10+ проектов. Выйдите на заработок 100 000₽+ и работайте удаленно в гибком графике. Выбрать #реклама 16+ tutortop.ru О рекламодателе

📌 Как часто происходит рендер? 💬 Спрашивают в 3% собеседований В React рендеринг компонента происходит в нескольких ситуациях. Давайте рассмотрим основные из них: 1️⃣ Первоначальный рендеринг: ➕ Когда компонент впервые монтируется в DOM. 2️⃣ Обновление состояния (state): ➕ Если состояние компонента изменяется с помощью this.setState в классовых компонентах или useState в функциональных компонентах. 3️⃣ Обновление пропсов (props): ➕ Когда компонент получает новые пропсы от родительского компонента. 4️⃣ Обновление контекста (context): ➕ Когда значение контекста, используемого компонентом, изменяется. 5️⃣ Обновление при изменении ключа (key): ➕ Если ключ компонента изменяется (например, в списках), React будет рассматривать это как удаление старого компонента и добавление нового. Теперь разберём каждый случай подробнее: 1️⃣ Первоначальный рендеринг Когда компонент впервые добавляется в DOM, происходит его рендеринг. Это единственный раз, когда компонент рендерится в процессе монтирования. Пример:

function App() {
  return <MyComponent />;
}

2️⃣. Обновление состояния Когда состояние компонента изменяется, React вызывает рендеринг компонента. Это позволяет компоненту отобразить новые данные. Пример:

function MyComponent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

3️⃣ Обновление пропсов Если родительский компонент передаёт новые пропсы, дочерний компонент будет ререндериться с новыми данными. Пример:

function ParentComponent() {
  const [value, setValue] = useState(0);

  return (
    <div>
      <button onClick={() => setValue(value + 1)}>Change Value</button>
      <ChildComponent value={value} />
    </div>
  );
}

function ChildComponent({ value }) {
  return <p>{value}</p>;
}

4️⃣ Обновление контекста Когда значение контекста изменяется, все компоненты, использующие этот контекст, будут ререндериться. Пример:

const MyContext = React.createContext();

function App() {
  const [value, setValue] = useState('initial');

  return (
    <MyContext.Provider value={value}>
      <button onClick={() => setValue('updated')}>Update Context</button>
      <MyComponent />
    </MyContext.Provider>
  );
}

function MyComponent() {
  const contextValue = useContext(MyContext);
  return <p>{contextValue}</p>;
}

5️⃣ Обновление при изменении ключа Если ключ компонента изменяется, React удаляет старый компонент и добавляет новый, вызывая рендеринг нового компонента. Пример:

function App() {
  const [items, setItems] = useState([1, 2, 3]);

  return (
    <ul>
      {items.map(item => (
        <li key={item}>{item}</li>
      ))}
      <button onClick={() => setItems([4, 5, 6])}>Change Items</button>
    </ul>
  );
}

🤔 Оптимизация рендеринга Чтобы уменьшить количество ненужных рендеров, можно использовать: ➕ PureComponent и React.memo для функциональных компонентов. ➕ shouldComponentUpdate для классовых компонентов. ➕ useMemo и useCallback для мемоизации значений и функций в функциональных компонентах. 🤔 Резюме: Компоненты React рендерятся при первоначальном монтировании, изменении состояния, изменении пропсов, изменении контекста и изменении ключа. Оптимизация рендеринга может быть достигнута с помощью PureComponent, React.memo, shouldComponentUpdate, useMemo и useCallback. 🔥 ТОП ВОПРОСОВ С СОБЕСОВ 🔒 База собесов | 🔒 База тестовых

🧑‍💻 Если твой английский позволяет ответить только на вопрос "Do you speak English", то с этим нужно что-то делать, будучи программистом. 🫤 Ты в курсе, что ... - говорят по-английски — 20% из всех людей. - Большое кол-во IT документации написано на английском. Хочешь понимать код лучше? Изучи язык, который используется в его основе. 📕 На нашем канале ты постепенно будешь набираться опыта, в этом тебе помогут: - Тесты для изучения английского: проверьте свои знания на практике. - Английский через мемы: учите язык весело и с интересом. - Шпаргалки для повторения: закрепите знания быстро и эффективно. - Английский сленг программиста: станьте настоящим профи в коммуникации. 🔥 Маленький шаг в изучении иностранного откроет перед тобой большие возможности будущего специалиста и значительно повысит твое зп. 🌸 Подпишись, do it!

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

👩‍💻 Есть опыт в проге, но не растет зп? Может нужно найти крутой оффер? 🗿 Большинство IT специалистов работает за копейки и даже не осознает этого. Лучший способ понять рынок вакансий - стать его частью и начать анализировать. 👍 Предела совершенству нет, что нельзя сказать про зп в рамках одной компании. Подпишись на Мидл работает и повышай свой капитал.

📌 Какие минусы у React? 💬 Спрашивают в 3% собеседований Несмотря на множество преимуществ, у React есть и недостатки, которые могут повлиять на выбор этой библиотеки для проекта. Вот основные из них: 1️⃣ Крутая кривая обучения ➕ Проблема: Для новых разработчиков React может показаться сложным из-за концепций, таких как JSX, компоненты, хуки и управление состоянием. ➕ Последствия: Требуется время и усилия для освоения всех особенностей и возможностей библиотеки. 2️⃣ Быстрая эволюция ➕ Проблема: React и его экосистема развиваются очень быстро, часто выходят новые версии и дополнительные библиотеки. ➕ Последствия: Разработчикам нужно постоянно следить за обновлениями и адаптироваться к изменениям, что может быть трудоемким. 3️⃣ Неисчерпывающая документация для продвинутых тем ➕ Проблема: Хотя базовая документация у React хорошая, для более сложных или специфичных задач может не хватать примеров и объяснений. ➕ Последствия: Разработчики могут столкнуться с трудностями при поиске решений для нестандартных проблем. 4️⃣ Ограниченные возможности для SEO ➕ Проблема: Приложения на React рендерятся на стороне клиента, что может ухудшить индексацию страниц поисковыми системами. ➕ Последствия: Требуется дополнительная настройка, например, использование серверного рендеринга (Next.js), для улучшения SEO. 5️⃣ Сложность в конфигурировании и настройке ➕ Проблема: В отличие от некоторых фреймворков, React не предоставляет единого "из коробки" решения. Нужно самостоятельно выбирать и настраивать инструменты для маршрутизации, управления состоянием и сборки проекта. ➕ Последствия: Это увеличивает время на первоначальную настройку и требует знаний в области различных инструментов и библиотек. 6️⃣ Производительность при большом количестве компонентов ➕Проблема: При большом количестве компонентов и частых обновлениях состояния могут возникнуть проблемы с производительностью. ➕ Последствия: Требуется оптимизация кода и использование таких инструментов, как мемоизация (React.memo, хуки useMemo и useCallback), чтобы избежать ненужных перерисовок. 🤔 Пример проблемы с производительностью:

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

function ExpensiveComponent({ num }) {
  const computedValue = useMemo(() => {
    let sum = 0;
    for (let i = 0; i < num * 1000; i++) {
      sum += i;
    }
    return sum;
  }, [num]);

  return <div>Computed Value: {computedValue}</div>;
}

function App() {
  const [num, setNum] = useState(1);

  return (
    <div>
      <button onClick={() => setNum(num + 1)}>Increase</button>
      <ExpensiveComponent num={num} />
    </div>
  );
}

export default App;

В этом примере показана оптимизация вычислений с использованием useMemo. 🤔 Краткий ответ Минусы React: сложность обучения, быстрая эволюция, недостаток продвинутой документации, ограниченные возможности SEO, сложность конфигурации и возможные проблемы с производительностью при большом количестве компонентов. 🔥 ТОП ВОПРОСОВ С СОБЕСОВ 🔒 База собесов | 🔒 База тестовых

ASIC-майнеры от Chilkoot. 30+ моделей. Для ИП и юр.лиц ⚡ Chilkoot — ваш надежный партнер в мире майнинга криптовалют! ⚡ Мы — лидеры российского рынка и официальный дистрибьютор таких гигантов, как Innosilicon, Bitmain, Micro BT и Avalon. 💰Специальная акция: Antminer S21 в подарок! Не упустите шанс — акция действует до 1 сентября! ✨ В нашем ассортименте более 30 моделей ASIC-майнеров! Работаем с юр. лицами и ИП. Вы можете приобрести их со склада в Москве или заказать напрямую с заводов производителей. Наши клиенты получают гарантийное и постгарантийное обслуживание от авторизованного сервиса в Москве. Узнать больше #реклама chilkoot.ru О рекламодателе

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

📌 Зачем создавались библиотеки react и другие? 💬 Спрашивают в 3% собеседований Библиотеки, такие как React, создавались для упрощения и оптимизации процесса разработки пользовательских интерфейсов (UI). Вот несколько ключевых причин, почему создавались React и другие библиотеки: 1️⃣ Повышение эффективности разработки ➕ Проблема: Написание большого количества кода вручную для создания динамических веб-страниц может быть громоздким и ошибочным. ➕ Решение: React позволяет разбивать интерфейс на отдельные компоненты, которые можно повторно использовать и комбинировать. Это снижает объем дублирующегося кода и упрощает его сопровождение. 2️⃣ Улучшение производительности ➕ Проблема: Постоянное обновление DOM (Document Object Model) может быть медленным и ресурсоемким. ➕ Решение: React использует виртуальный DOM, который минимизирует количество реальных изменений в DOM, обновляя только те элементы, которые действительно изменились. 3️⃣ Облегчение работы с состоянием приложения ➕ Проблема: Управление состоянием больших и сложных приложений может стать хаотичным. ➕ Решение: React предоставляет механизмы для удобного управления состоянием компонентов с помощью useState, useReducer, и других хуков. Это делает логику управления состоянием более ясной и предсказуемой. 4️⃣ Улучшение масштабируемости и поддерживаемости кода ➕ Проблема: По мере роста приложения, код может стать сложным для понимания и изменения. ➕ Решение: Подход к компонентам в React позволяет разработчикам легче разделять задачи и работать над отдельными частями приложения независимо друг от друга. Это улучшает масштабируемость и поддерживаемость кода. 5️⃣ Сообщество и экосистема ➕ Проблема: Наличие обширного сообщества и инструментов для разработки. ➕ Решение: 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;

В этом примере показан простой компонент счетчика, который использует состояние и событие клика для увеличения счетчика. 🤔 Краткий ответ React и другие библиотеки создавались для упрощения разработки, улучшения производительности, управления состоянием, масштабируемости и поддерживаемости кода. 🔥 ТОП ВОПРОСОВ С СОБЕСОВ 🔒 База собесов | 🔒 База тестовых

🤬 Постоянные ошибки, как они надоели! 🤯 Планируя свои дела, мы забываем, что оборудование может подвести. Это может перекрыть все рабочие планы. Придется гуглить, смотреть видосы, звонить знакомым "Не встречалась ли тебе такая ошибка?" 🥵 Все это время и силы. Наша команда нашла этому решение - Битый код. Канал, который даст тебе базу в мире ошибок. 🍸 Стань тем человеком, к которому будут обращаться и про которого будут говорить "Он сможет помочь"

Канал для тех, кто ищет самые выгодные предложения Каждый день в этом канале публикуются скидки на товары с Яндекс Маркета: найдётся всё — от компьютеров до пены для бритья. Также проходят розыгрыши классных призов! Подписывайтесь, чтобы не потерять⚡ Узнать больше #реклама О рекламодателе