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

\n\n\n\nВ этом примере браузер сначала загрузит HTML, создаст DOM, затем загрузит CSS и создаст CSSOM, а потом загрузит и выполнит JavaScript.\n\n🤔 **Вкратце**: Браузер загружает HTML, CSS и JavaScript с сервера, создаёт внутренние структуры данных (DOM и CSSOM), рассчитывает расположение элементов и отрисовывает их на экране пользователя.\n\n🔥 ТОП ВОПРОСОВ С СОБЕСОВ\n\n🔒 База собесов | 🔒 База тестовых","datePublished":"2024-08-21T09:10:10Z","dateModified":"2024-08-21T09:10:10Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":5,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":4483},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":20},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":77},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":5}]}},{"@type":"ListItem","position":3,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/478","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/478","mainEntityOfPage":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/478","headline":"Frontend | Вопросы собесов","datePublished":"2024-08-20T16:10:19Z","dateModified":"2024-08-20T16:10:19Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":13,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":4479},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":13},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":5},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":13}]}},{"@type":"ListItem","position":4,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/477","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/477","mainEntityOfPage":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/477","headline":"Очная онлайн-магистратура ИТМО: станьте DevOps-инженером Онлайн-магистратура «DevOps-инженер облачных сервисо…","articleBody":"Очная онлайн-магистратура ИТМО: станьте DevOps-инженером\n\nОнлайн-магистратура «DevOps-инженер облачных сервисов» от Яндекс Практикум\n\nВы сможете работать DevOps-инженером или SRE в крупных IT-компаниях\nВ магистратуре вы глубоко погрузитесь в программирование и научитесь создавать стабильную облачную инфраструктуру.\n\nА ещё будете заниматься английским, чтобы было проще устроиться в международную компанию.\n\nФундаментальные знания, льготы очного студента и практический опыт Яндекса \n\nПодать заявку\n\n#реклама 16+\npracticum.yandex.ru\nО рекламодателе","datePublished":"2024-08-20T11:39:40Z","dateModified":"2024-08-22T10:07:47Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2909}]}},{"@type":"ListItem","position":5,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/476","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/476","mainEntityOfPage":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/476","headline":"📌 Что такое доступность интерфейсов? 💬 Спрашивают в 3% собеседований Доступность интерфейсов (или веб-доступн…","articleBody":"📌 Что такое доступность интерфейсов? \n\n💬 Спрашивают в 3% собеседований\n\nДоступность интерфейсов (или веб-доступность, англ. web accessibility) — это практика создания веб-сайтов и приложений, которые могут быть использованы всеми людьми, включая людей с ограниченными возможностями. Цель доступности — сделать так, чтобы любой пользователь, независимо от его физических или когнитивных особенностей, мог получить доступ к контенту и функциональности веб-ресурса.\n\n🤔 Зачем нужна доступность\n\n1️⃣ Социальная значимость:\n\n ➕ Доступность интерфейсов обеспечивает равные возможности для всех пользователей, включая людей с инвалидностью.\n\n ➕ Это способствует социальному включению и поддерживает права всех людей на доступ к информации и услугам.\n\n2️⃣ Юридические требования:\n\n ➕ Во многих странах существуют законы и стандарты, требующие, чтобы веб-сайты были доступными для людей с ограниченными возможностями.\n\n ➕ Несоблюдение этих требований может привести к юридическим последствиям и штрафам.\n\n3️⃣ Расширение аудитории:\n\n ➕ Доступные веб-сайты и приложения могут привлечь большую аудиторию, включая людей с различными видами ограничений.\n\n ➕ Это может улучшить пользовательский опыт для всех пользователей, так как принципы доступности часто приводят к улучшению общей удобности интерфейса.\n\n🤔 Основные принципы доступности\n\n1️⃣ Воспринимаемость (Perceivable):\n\n ➕ Контент должен быть представлен таким образом, чтобы пользователи могли его воспринять.\n\n ➕ Пример: использование альтернативного текста (alt) для изображений, чтобы они могли быть восприняты пользователями экранных читалок.\n\n2️⃣ Управляемость (Operable):\n\n ➕ Пользовательские интерфейсы и навигация должны быть управляемыми.\n\n ➕ Пример: обеспечение возможности навигации по сайту с помощью клавиатуры для пользователей, не использующих мышь.\n\n3️⃣ Понимаемость (Understandable):\n\n ➕ Информация и управление интерфейсом должны быть понятными.\n\n ➕ Пример: использование простого и понятного языка, предсказуемое поведение интерфейсов.\n\n4️⃣ Надежность (Robust):\n\n ➕ Контент должен быть достаточно надежным, чтобы его можно было интерпретировать различными пользовательскими агентами, включая вспомогательные технологии.\n\n ➕ Пример: использование семантически правильного HTML-кода.\n\n🤔 Примеры улучшений доступности\n\n1️⃣ Альтернативный текст для изображений:\n \n \n\n2️⃣ Подписи и описания для форм:\n Имя пользователя:\n \n \n\n3️⃣ Доступная навигация:\n - Обеспечение возможности перемещения по странице с помощью клавиши Tab и указание фокуса для элементов.\n :focus {\n outline: 2px solid blue;\n }\n \n\n4️⃣ Использование ARIA (Accessible Rich Internet Applications):\n - ARIA атрибуты помогают сделать сложные веб-приложения доступными.\n X\n \n\n🤔 Инструменты и ресурсы для проверки доступности\n\n1️⃣ Screen readers (экранные читалки):\n\n ➕ JAWS, NVDA, VoiceOver — программы, которые озвучивают содержимое экрана и помогают пользователям с нарушением зрения.\n\n2️⃣ Линтеры и валидаторы:\n \n➕ WAVE (Web Accessibility Evaluation Tool), Axe, Lighthouse — инструменты для автоматической проверки доступности веб-страниц.\n\n3️⃣ Руководства и стандарты:\n \n➕ WCAG (Web Content Accessibility Guidelines) — международные рекомендации по обеспечению доступности веб-контента.\n\n🤔 Резюме\n\nДоступность интерфейсов — это практика создания веб-сайтов и приложений, которые могут быть использованы всеми, включая людей с ограниченными возможностями. Это важно для социальной инклюзии, соблюдения юридических требований и улучшения общего пользовательского опыта. Принципы доступности включают воспринимаемость, управляемость, понимаемость и надежность.\n\n🔥 ТОП ВОПРОСОВ С СОБЕСОВ\n\n🔒 База собесов | 🔒 База тестовых","datePublished":"2024-08-20T09:10:08Z","dateModified":"2024-08-20T09:10:08Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":4537},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":16},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":37}]}},{"@type":"ListItem","position":6,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/475","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/475","mainEntityOfPage":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/475","headline":"🔥 Один в поле не воин, поэтому топовый программист должен находится в топ команде. 🧑‍💻 Марк Цукерберг создал…","articleBody":"🔥 Один в поле не воин, поэтому топовый программист должен находится в топ команде. \n\n🧑‍💻 Марк Цукерберг создал первоначальную версию Facebook в одиночку, но для превращения стартапа в глобальную социальную сеть потребовалась мощная команда.\n\n👌 IT мероприятия - одно из тех мест, где можно найти единомышленников в данной нише. \n\n🔥 Подпишись на канал IT события, чтобы не упустить возможность в реализации своего потенциала.","datePublished":"2024-08-20T07:00:28Z","dateModified":"2024-08-27T08:22:25Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":1,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":3672},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1}]}},{"@type":"ListItem","position":7,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/474","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/474","mainEntityOfPage":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/474","headline":"Сообщество IT-специалистов в Telegram от Selectel. Канал крупнейшего независимого провайдера IT-инфраструктур…","articleBody":"Сообщество IT-специалистов в Telegram от Selectel.\n\nКанал крупнейшего независимого провайдера IT-инфраструктуры и облаков.\n\nШесть причин подписаться на канал:\n- железные новости;\n- обзоры продуктов;\n- разборы кейсов;\n- актуальные IT-статьи;\n- анонсы митапов;\n- бесплатные курсы. \n\nПодписаться\n\n#реклама \nО рекламодателе","datePublished":"2024-08-19T18:39:36Z","dateModified":"2024-08-21T17:05:35Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2786},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":1}]}},{"@type":"ListItem","position":8,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/473","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/473","mainEntityOfPage":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/473","headline":"Frontend | Вопросы собесов","datePublished":"2024-08-19T16:10:14Z","dateModified":"2024-08-19T16:10:14Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":4260},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":7},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":2}]}},{"@type":"ListItem","position":9,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/472","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/472","mainEntityOfPage":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/472","headline":"📌 Как браузер обрабатывает ссылки? 💬 Спрашивают в 3% собеседований Браузер обрабатывает ссылки (теги ) сле…","articleBody":"📌 Как браузер обрабатывает ссылки? \n\n💬 Спрашивают в 3% собеседований\n\nБраузер обрабатывает ссылки (теги ) следующим образом:\n\n🤔 Основные этапы обработки ссылки браузером:\n\n1️⃣ Рендеринг HTML:\n\n ➕ Когда браузер загружает HTML-документ, он разбирает его и создает DOM (Document Object Model). В этом процессе браузер встречает тег и определяет, что это ссылка.\n\n2️⃣ Наведение и щелчок по ссылке:\n\n ➕ Когда пользователь наводит курсор на ссылку, браузер может показать URL в строке состояния или всплывающем окне.\n\n ➕ При щелчке по ссылке браузер проверяет атрибуты ссылки (href, target, и др.), чтобы определить, как обработать этот клик.\n\n3️⃣ Проверка атрибута `href`:\n\n ➕ Если href отсутствует или равно #, браузер не будет переходить на другую страницу.\n\n ➕ Если href содержит URL, браузер начинает процесс навигации.\n\n4️⃣ Обработка атрибута `target`:\n\n ➕ Если target установлен в _self или не указан, браузер загружает новую страницу в текущем окне.\n\n ➕ Если target установлен в _blank, браузер открывает новую страницу в новой вкладке или окне.\n\n ➕ Если указано имя фрейма, браузер попытается загрузить новую страницу в указанный фрейм.\n\n5️⃣ Выполнение возможных JavaScript обработчиков событий:\n\n ➕ Браузер проверяет наличие событий, таких как onclick, onmousedown, onmouseup и т.д.\n\n ➕ Если обработчик события вызвал event.preventDefault(), переход на новую страницу не произойдет.\n\n6️⃣ Отправка HTTP-запроса:\n\n ➕ Браузер отправляет HTTP-запрос к серверу, если ссылка ведет на другой ресурс.\n\n ➕ Сервер обрабатывает запрос и отправляет ответ.\n\n7️⃣ Обработка ответа от сервера:\n\n ➕ Если ответ сервера содержит HTML, браузер начнет разбор нового HTML-документа.\n\n ➕ Если ответ сервера является перенаправлением (статусы 3xx), браузер отправит новый запрос по указанному адресу.\n\n ➕ Если ответ сервера является ошибкой (статусы 4xx или 5xx), браузер отобразит страницу ошибки.\n\n8️⃣ Загрузка ресурсов:\n\n ➕ После получения нового HTML-документа браузер загружает все связанные ресурсы (CSS, JS, изображения и т.д.).\n\n9️⃣ Отображение новой страницы:\n\n ➕ Браузер обновляет DOM и перерисовывает страницу, отображая новый контент пользователю.\n\n🤔 Пример работы с ссылкой\n\nHTML:\nПерейти на example.com\n\nJavaScript:\ndocument.getElementById('myLink').addEventListener('click', function(event) {\n event.preventDefault();\n console.log('Ссылка была нажата, но переход не произошел');\n // Можно выполнить дополнительную логику здесь\n});\n\n🤔 Атрибуты ссылки и их значение\n\n➕ `href`: определяет URL, на который ведет ссылка.\n\n➕ `target`: определяет, где открыть связанный документ.\n\n ➕ _self: в текущем окне/вкладке.\n\n ➕ _blank: в новом окне/вкладке.\n\n ➕ _parent: в родительском фрейме.\n\n ➕ _top: во всем текущем окне.\n\n➕ `rel`: определяет отношения между текущим документом и связанным документом. Полезно для SEO и безопасности (например, rel=\"noopener noreferrer\" для ссылок с target=\"_blank\").\n\n🤔 Резюме\n\nКогда вы нажимаете на ссылку, браузер проверяет её атрибуты (href, target и другие), может выполнить JavaScript-обработчики событий, отправляет HTTP-запрос, обрабатывает ответ от сервера и отображает новую страницу.\n\n\n🔥 ТОП ВОПРОСОВ С СОБЕСОВ\n\n🔒 База собесов | 🔒 База тестовых","datePublished":"2024-08-19T09:10:08Z","dateModified":"2024-08-19T09:10:08Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":1,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":4498},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":29},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":47},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1}]}},{"@type":"ListItem","position":10,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/471","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/471","mainEntityOfPage":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/471","headline":"Такси для бизнеса. Яндекс Go Оптимизируйте свои расходы и повысьте эффективность бизнеса с Яндекс Go Узнать б…","articleBody":"Такси для бизнеса. Яндекс Go\n\nОптимизируйте свои расходы и повысьте эффективность бизнеса с Яндекс Go\n \n\nУзнать больше\n\n#реклама \nbusiness.go.yandex\nО рекламодателе","datePublished":"2024-08-18T20:11:21Z","dateModified":"2024-08-20T18:12:06Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":2,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2783},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":2}]}},{"@type":"ListItem","position":11,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/470","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/470","mainEntityOfPage":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/470","headline":"Frontend | Вопросы собесов","datePublished":"2024-08-18T16:10:18Z","dateModified":"2024-08-18T16:10:18Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":4389},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":14},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":4}]}},{"@type":"ListItem","position":12,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/469","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/469","mainEntityOfPage":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/469","headline":"❓Хотите узнать, как эффективно управлять состоянием в React.js с помощью хуков useState и useReducer? Ждем ва…","articleBody":"❓Хотите узнать, как эффективно управлять состоянием в React.js с помощью хуков useState и useReducer?\n\nЖдем вас на открытом вебинаре 20 августа в 19:00 мск, где мы разберём:\n\n- основы управления состоянием в React.js с помощью хуков useState и useReducer;\n- различия и преимущества использования useState и useReducer;\n- практические примеры применения хуков для управления состоянием в реальных приложениях.\n\nУрок будет полезен как новичкам, знакомым с базовыми концепциями React, так и опытным разработчикам, которые хотят улучшить свои навыки управления состоянием.\n\nВстречаемся в преддверии старта курса «React.js Developer». Все участники вебинара получат специальную цену на обучение!\n\n👉 Регистрируйтесь прямо сейчас, чтобы не пропустить бесплатный урок: https://otus.pw/eTz9/?erid=LjN8KDsCv\n\n Реклама. ООО \"ОТУС ОНЛАЙН-ОБРАЗОВАНИЕ\". ИНН 9705100963.","datePublished":"2024-08-18T15:00:11Z","dateModified":"2024-08-19T15:16:30Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2398},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":3},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":2}]}},{"@type":"ListItem","position":13,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/468","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/468","mainEntityOfPage":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/468","headline":"ТОП-4 Курса по графическому дизайну по версии Tutortop Tutortop — маркетплейс курсов №1 по количеству школ-па…","articleBody":"ТОП-4 Курса по графическому дизайну по версии Tutortop\n\nTutortop — маркетплейс курсов №1 по количеству школ-партнеров, курсов и реальных отзывов студентов.\n\nОсвойте востребованную профессию с нуля за 4-5 месяцев.\nСоберите портфолио из 10+ проектов.\nВыйдите на заработок 100 000₽+ и работайте удаленно в гибком графике.\n \n\nВыбрать\n\n#реклама 16+\ntutortop.ru\nО рекламодателе","datePublished":"2024-08-18T12:17:28Z","dateModified":"2024-08-20T11:43:04Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2580}]}},{"@type":"ListItem","position":14,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/467","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/467","mainEntityOfPage":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/467","headline":"📌 Как часто происходит рендер? 💬 Спрашивают в 3% собеседований В React рендеринг компонента происходит в неск…","articleBody":"📌 Как часто происходит рендер? \n\n💬 Спрашивают в 3% собеседований\n\nВ React рендеринг компонента происходит в нескольких ситуациях. Давайте рассмотрим основные из них:\n\n1️⃣ Первоначальный рендеринг:\n\n➕ Когда компонент впервые монтируется в DOM.\n\n2️⃣ Обновление состояния (state):\n \n➕ Если состояние компонента изменяется с помощью this.setState в классовых компонентах или useState в функциональных компонентах.\n\n3️⃣ Обновление пропсов (props):\n\n➕ Когда компонент получает новые пропсы от родительского компонента.\n\n4️⃣ Обновление контекста (context):\n \n➕ Когда значение контекста, используемого компонентом, изменяется.\n\n5️⃣ Обновление при изменении ключа (key):\n \n➕ Если ключ компонента изменяется (например, в списках), React будет рассматривать это как удаление старого компонента и добавление нового.\n\nТеперь разберём каждый случай подробнее:\n\n1️⃣ Первоначальный рендеринг\n\nКогда компонент впервые добавляется в DOM, происходит его рендеринг. Это единственный раз, когда компонент рендерится в процессе монтирования.\n\nПример:\nfunction App() {\n return ;\n}\n\n2️⃣. Обновление состояния\n\nКогда состояние компонента изменяется, React вызывает рендеринг компонента. Это позволяет компоненту отобразить новые данные.\n\nПример:\nfunction MyComponent() {\n const [count, setCount] = useState(0);\n\n return (\n

\n

{count}

\n setCount(count + 1)}>Increment\n

\n );\n}\n\n3️⃣ Обновление пропсов\n\nЕсли родительский компонент передаёт новые пропсы, дочерний компонент будет ререндериться с новыми данными.\n\nПример:\nfunction ParentComponent() {\n const [value, setValue] = useState(0);\n\n return (\n

\n setValue(value + 1)}>Change Value\n \n

\n );\n}\n\nfunction ChildComponent({ value }) {\n return

{value}

;\n}\n\n4️⃣ Обновление контекста\n\nКогда значение контекста изменяется, все компоненты, использующие этот контекст, будут ререндериться.\n\nПример:\nconst MyContext = React.createContext();\n\nfunction App() {\n const [value, setValue] = useState('initial');\n\n return (\n \n setValue('updated')}>Update Context\n \n \n );\n}\n\nfunction MyComponent() {\n const contextValue = useContext(MyContext);\n return

{contextValue}

;\n}\n\n5️⃣ Обновление при изменении ключа\n\nЕсли ключ компонента изменяется, React удаляет старый компонент и добавляет новый, вызывая рендеринг нового компонента.\n\nПример:\nfunction App() {\n const [items, setItems] = useState([1, 2, 3]);\n\n return (\n

\n {items.map(item => (\n
• {item}
\n ))}\n setItems([4, 5, 6])}>Change Items\n

\n );\n}\n\n🤔 Оптимизация рендеринга\n\nЧтобы уменьшить количество ненужных рендеров, можно использовать:\n\n➕ PureComponent и React.memo для функциональных компонентов.\n➕ shouldComponentUpdate для классовых компонентов.\n➕ useMemo и useCallback для мемоизации значений и функций в функциональных компонентах.\n\n🤔 Резюме:\nКомпоненты React рендерятся при первоначальном монтировании, изменении состояния, изменении пропсов, изменении контекста и изменении ключа. Оптимизация рендеринга может быть достигнута с помощью PureComponent, React.memo, shouldComponentUpdate, useMemo и useCallback.\n\n🔥 ТОП ВОПРОСОВ С СОБЕСОВ\n\n🔒 База собесов | 🔒 База тестовых","datePublished":"2024-08-18T09:10:07Z","dateModified":"2024-08-18T09:10:07Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":4362},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":30},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":63}]}},{"@type":"ListItem","position":15,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/466","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/466","mainEntityOfPage":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/466","headline":"🧑‍💻 Если твой английский позволяет ответить только на вопрос \"Do you speak English\", то с этим нужно что-то д…","articleBody":"🧑‍💻 Если твой английский позволяет ответить только на вопрос \"Do you speak English\", то с этим нужно что-то делать, будучи программистом. \n\n🫤 Ты в курсе, что ...\n- говорят по-английски — 20% из всех людей. \n- Большое кол-во IT документации написано на английском.\n\nХочешь понимать код лучше? Изучи язык, который используется в его основе.\n\n📕 На нашем канале ты постепенно будешь набираться опыта, в этом тебе помогут:\n\n- Тесты для изучения английского: проверьте свои знания на практике.\n- Английский через мемы: учите язык весело и с интересом.\n- Шпаргалки для повторения: закрепите знания быстро и эффективно.\n- Английский сленг программиста: станьте настоящим профи в коммуникации.\n\n🔥 Маленький шаг в изучении иностранного откроет перед тобой большие возможности будущего специалиста и значительно повысит твое зп. \n\n🌸 Подпишись, do it!","datePublished":"2024-08-18T07:00:23Z","dateModified":"2024-08-20T07:00:27Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2641},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":2},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":2}]}},{"@type":"ListItem","position":16,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/465","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/465","mainEntityOfPage":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/465","headline":"Запустите рекламу в телеграм-каналах с Яндекс Директом Перфоманс-реклама теперь в телеграм-каналах ⚡ Яндекс Д…","articleBody":"Запустите рекламу в телеграм-каналах с Яндекс Директом\n\nПерфоманс-реклама теперь в телеграм-каналах ⚡\n\nЯндекс Директ знает, как привлечь целевую аудиторию 💰👌 \n\nПопробовать\n\n#реклама \nyandex.ru\nО рекламодателе","datePublished":"2024-08-17T20:17:20Z","dateModified":"2024-08-19T18:19:44Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2725},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":1}]}},{"@type":"ListItem","position":17,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/464","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/464","mainEntityOfPage":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/464","headline":"Frontend | Вопросы собесов","datePublished":"2024-08-17T16:10:09Z","dateModified":"2024-08-17T16:10:09Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":4,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":4504},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":11},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":2},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":4}]}},{"@type":"ListItem","position":18,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/463","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/463","mainEntityOfPage":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/463","headline":"👩‍💻 Есть опыт в проге, но не растет зп? Может нужно найти крутой оффер? 🗿 Большинство IT специалистов работае…","articleBody":"👩‍💻 Есть опыт в проге, но не растет зп? Может нужно найти крутой оффер?\n\n🗿 Большинство IT специалистов работает за копейки и даже не осознает этого. Лучший способ понять рынок вакансий - стать его частью и начать анализировать. \n\n👍 Предела совершенству нет, что нельзя сказать про зп в рамках одной компании. Подпишись на Мидл работает и повышай свой капитал.","datePublished":"2024-08-17T14:00:21Z","dateModified":"2024-08-19T14:00:16Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2952},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":1}]}},{"@type":"ListItem","position":19,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/462","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/462","mainEntityOfPage":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/462","headline":"📌 Какие минусы у React? 💬 Спрашивают в 3% собеседований Несмотря на множество преимуществ, у React есть и нед…","articleBody":"📌 Какие минусы у React? \n\n💬 Спрашивают в 3% собеседований\n\nНесмотря на множество преимуществ, у React есть и недостатки, которые могут повлиять на выбор этой библиотеки для проекта. Вот основные из них:\n\n1️⃣ Крутая кривая обучения\n\n➕ Проблема: Для новых разработчиков React может показаться сложным из-за концепций, таких как JSX, компоненты, хуки и управление состоянием.\n\n➕ Последствия: Требуется время и усилия для освоения всех особенностей и возможностей библиотеки.\n\n2️⃣ Быстрая эволюция\n\n➕ Проблема: React и его экосистема развиваются очень быстро, часто выходят новые версии и дополнительные библиотеки.\n\n➕ Последствия: Разработчикам нужно постоянно следить за обновлениями и адаптироваться к изменениям, что может быть трудоемким.\n\n3️⃣ Неисчерпывающая документация для продвинутых тем\n\n➕ Проблема: Хотя базовая документация у React хорошая, для более сложных или специфичных задач может не хватать примеров и объяснений.\n\n➕ Последствия: Разработчики могут столкнуться с трудностями при поиске решений для нестандартных проблем.\n\n4️⃣ Ограниченные возможности для SEO\n\n➕ Проблема: Приложения на React рендерятся на стороне клиента, что может ухудшить индексацию страниц поисковыми системами.\n\n➕ Последствия: Требуется дополнительная настройка, например, использование серверного рендеринга (Next.js), для улучшения SEO.\n\n5️⃣ Сложность в конфигурировании и настройке\n\n➕ Проблема: В отличие от некоторых фреймворков, React не предоставляет единого \"из коробки\" решения. Нужно самостоятельно выбирать и настраивать инструменты для маршрутизации, управления состоянием и сборки проекта.\n\n➕ Последствия: Это увеличивает время на первоначальную настройку и требует знаний в области различных инструментов и библиотек.\n\n6️⃣ Производительность при большом количестве компонентов\n\n ➕Проблема: При большом количестве компонентов и частых обновлениях состояния могут возникнуть проблемы с производительностью.\n\n➕ Последствия: Требуется оптимизация кода и использование таких инструментов, как мемоизация (React.memo, хуки useMemo и useCallback), чтобы избежать ненужных перерисовок.\n\n🤔 Пример проблемы с производительностью:\nimport React, { useState, useMemo } from 'react';\n\nfunction ExpensiveComponent({ num }) {\n const computedValue = useMemo(() => {\n let sum = 0;\n for (let i = 0; i < num * 1000; i++) {\n sum += i;\n }\n return sum;\n }, [num]);\n\n return

Computed Value: {computedValue}

;\n}\n\nfunction App() {\n const [num, setNum] = useState(1);\n\n return (\n

\n setNum(num + 1)}>Increase\n \n

\n );\n}\n\nexport default App;\n\nВ этом примере показана оптимизация вычислений с использованием useMemo.\n\n🤔 Краткий ответ\n\nМинусы React: сложность обучения, быстрая эволюция, недостаток продвинутой документации, ограниченные возможности SEO, сложность конфигурации и возможные проблемы с производительностью при большом количестве компонентов.\n\n🔥 ТОП ВОПРОСОВ С СОБЕСОВ\n\n🔒 База собесов | 🔒 База тестовых","datePublished":"2024-08-17T09:10:11Z","dateModified":"2024-08-17T09:10:11Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":14,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":4701},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":28},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":42},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":14}]}},{"@type":"ListItem","position":20,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/461","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/461","mainEntityOfPage":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/461","headline":"ASIC-майнеры от Chilkoot. 30+ моделей. Для ИП и юр.лиц ⚡ Chilkoot — ваш надежный партнер в мире майнинга крип…","articleBody":"ASIC-майнеры от Chilkoot. 30+ моделей. Для ИП и юр.лиц\n\n⚡ Chilkoot — ваш надежный партнер в мире майнинга криптовалют! ⚡\nМы — лидеры российского рынка и официальный дистрибьютор таких гигантов, как Innosilicon, Bitmain, Micro BT и Avalon. \n💰Специальная акция: Antminer S21 в подарок! \nНе упустите шанс — акция действует до 1 сентября! ✨\nВ нашем ассортименте более 30 моделей ASIC-майнеров! Работаем с юр. лицами и ИП.\nВы можете приобрести их со склада в Москве или заказать напрямую с заводов производителей. \nНаши клиенты получают гарантийное и постгарантийное обслуживание от авторизованного сервиса в Москве. \n\nУзнать больше\n\n#реклама \nchilkoot.ru\nО рекламодателе","datePublished":"2024-08-17T00:17:22Z","dateModified":"2024-08-19T09:32:14Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2804},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":1}]}}]}

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

17 302

Ad

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

2.8k51

تحلیل

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

17 302

📌 Как происходит отрисовка сайта для пользователя? 💬 Спрашивают в 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), рассчитывает расположение элементов и отрисовывает их на экране пользователя. 🔥 ТОП ВОПРОСОВ С СОБЕСОВ 🔒 База собесов | 🔒 База тестовых

4.5k77205

تحلیل

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

17 302

🤔 Какой метод JavaScript позволяет проверить, содержит ли элемент указанный класс?

Anonymous voting

4.5k51313

تحلیل

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

17 302

Ad

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

2.9k

تحلیل

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

17 302

📌 Что такое доступность интерфейсов? 💬 Спрашивают в 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) — международные рекомендации по обеспечению доступности веб-контента. 🤔 Резюме Доступность интерфейсов — это практика создания веб-сайтов и приложений, которые могут быть использованы всеми, включая людей с ограниченными возможностями. Это важно для социальной инклюзии, соблюдения юридических требований и улучшения общего пользовательского опыта. Принципы доступности включают воспринимаемость, управляемость, понимаемость и надежность. 🔥 ТОП ВОПРОСОВ С СОБЕСОВ 🔒 База собесов | 🔒 База тестовых

4.5k3716

تحلیل

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

17 302

Ad

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

3.7k1

تحلیل

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

17 302

Ad

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

2.8k1

تحلیل

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

17 302

🤔 Какой атрибут у тега указывает, что поле должно быть автоматически сфокусировано при загрузке страницы

Anonymous voting

4.3k27

تحلیل

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

17 302

📌 Как браузер обрабатывает ссылки? 💬 Спрашивают в 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-запрос, обрабатывает ответ от сервера и отображает новую страницу. 🔥 ТОП ВОПРОСОВ С СОБЕСОВ 🔒 База собесов | 🔒 База тестовых

4.5k47291

تحلیل

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

17 302

Ad

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

2.8k2

تحلیل

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

17 302

🤔 Какой метод JavaScript используется для поиска всех элементов по имени класса?

Anonymous voting

4.4k414

تحلیل

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

17 302

Ad

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

2.4k23

تحلیل

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

17 302

Ad

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

2.6k

تحلیل

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

17 302

📌 Как часто происходит рендер? 💬 Спрашивают в 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. 🔥 ТОП ВОПРОСОВ С СОБЕСОВ 🔒 База собесов | 🔒 База тестовых

4.4k6330

تحلیل

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

17 302

Ad

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

2.6k22

تحلیل

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

17 302

Ad

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

2.7k1

تحلیل

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

17 302

🤔 Что такое JSX в React?

Anonymous voting

4.5k2114

تحلیل

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

17 302

Ad

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

3.0k1

تحلیل

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

17 302

📌 Какие минусы у 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, сложность конфигурации и возможные проблемы с производительностью при большом количестве компонентов. 🔥 ТОП ВОПРОСОВ С СОБЕСОВ 🔒 База собесов | 🔒 База тестовых

4.7k422814

تحلیل

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

17 302

Ad

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

2.8k1

تحلیل

نمایش بیشتر