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

\n\n🚩Плюсы\n\n➕Быстрая работа после загрузки\nПриложение становится очень интерактивным после инициализации.\n➕Меньшая нагрузка на сервер\nОсновная работа выполняется на клиентской стороне.\n➕Гибкость и модульность\nЛегко добавлять сложные интерактивные компоненты.\n\n🚩Минусы\n\n➖Медленная первая загрузка (Time to First Byte, TTFB)\nПользователь видит пустую страницу, пока загружается JavaScript и данные.\n➕Проблемы с SEO\nПоисковым системам сложнее индексировать страницы, так как контент рендерится только в браузере.\n➖Требования к устройствам\nБольше ресурсов требуется на стороне клиента.\n\n🚩SSG (Static Site Generation)\n\nСайт полностью генерируется на этапе сборки (build time) и сервер отдает готовые HTML-страницы. Это популярный подход в JAMstack-приложениях (JavaScript, APIs, Markup). HTML генерируется один раз (обычно через фреймворк вроде Next.js, Gatsby, Nuxt.js) во время сборки. Сайт раздается пользователям как готовый статический контент.\nnpm run build\n\n🚩Плюсы и минусы\n\n➕Молниеносная загрузка\nHTML статичен и отдается сервером без обработки.\n➕SEO-дружелюбность\nПоисковые системы могут легко индексировать готовый HTML.\n➕Уменьшение нагрузки на сервер\nВсе вычисления выполняются заранее (во время сборки).\n➖Ограничения при частых обновлениях контента\nДля обновления нужно заново пересобирать сайт, что может занимать много времени.\n➖Не подходит для динамических данных\nЕсли страница сильно зависит от данных пользователя или часто меняется, SSG становится менее удобным.\n\n🚩ISR (Incremental Static Regeneration)\n\nЭто гибрид между SSG и SSR. Вы создаете статический контент во время сборки, но некоторые страницы могут обновляться динамически при запросе, а сервер сохраняет их для следующих пользователей. Фреймворк (например, Next.js) генерирует страницы на этапе сборки, но для определенных страниц вы можете указать интервал обновления (revalidate). После этого сервер пересоберет страницу и кэширует ее.\nexport async function getStaticProps() {\n return {\n props: {\n data: fetchData(),\n },\n revalidate: 60, // Обновлять страницу каждые 60 секунд\n };\n}\n\n🚩Плюсы и минусы\n\n➕Лучшая производительность\nСтраницы отдаются как статические, но обновляются при необходимости.\n➕Гибкость\nУдобно для контента, который редко обновляется.\n➕SEO\nПоисковики видят статические страницы.\n➖Сложнее настроить\nНужно управлять кэшированием и интервалами обновления.\n➖Не подходит для полностью динамических страниц\nЕсли обновления контента слишком частые, ISR может не подойти.\n\n🚩DPR (Dynamic Rendering / Hybrid Rendering)\n\nЭто подход, при котором разные версии страницы рендерятся для разных пользователей. Например, для пользователей с обычными браузерами вы используете CSR, а для поисковых ботов — SSR. Запросы от поисковых ботов обрабатываются сервером, который генерирует готовый HTML. Запросы от обычных пользователей обрабатываются через CSR. Этот подход используется с инструментами, такими как Prerender.io или встроенными решениями фреймворков.\n\n🚩Плюсы и минусы\n\n➕Оптимально для SEO\nБоты получают готовый HTML.\n➕Гибкость\nПользователи получают интерактивные страницы через CSR.\n➖Усложнение архитектуры\nНужно отслеживать запросы и разделять их.\n➖Задержки для ботов\nГенерация страницы на сервере может занять время.\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2026-08-01T09:05:46Z","dateModified":"2026-08-01T09:05:46Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1462},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":4},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":13}]}},{"@type":"ListItem","position":15,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2781","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2781","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2781","headline":"Yandex Ecom Open Air — летнее событие про онлайн-продажи Yandex Ecom Open Air 2026 объединяет деловую програм…","articleBody":"Yandex Ecom Open Air — летнее событие про онлайн-продажи\n\nYandex Ecom Open Air 2026 объединяет деловую программу, живое общение и атмосферу фестиваля в одном потоке. Здесь обсуждают технологии, которые становятся частью среды. Исследуют силы, которые влияют на весь рынок. Находят новые связи, идеи и точки роста.\n\nВ течение дня пространство фестиваля наполняют выступления, дискуссии, встречи, специальные форматы, музыка и активности партнёров.\n\nПрисоединиться к происходящему можно из любой точки — на площадке фестиваля или через онлайн-трансляцию. \n\nЗарегистрироваться\n\n#реклама 18+\necomfest.ru\nО рекламодателе","datePublished":"2026-07-31T21:45:09Z","dateModified":"2026-08-02T21:10:01Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"image":["https://n1.tlmtr.cc/p/_Kl2_0I9TylHaHL72l88lZLa7Fy6yNu10ZKDQWMOVSTQ?ty=l"],"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":955}]}},{"@type":"ListItem","position":16,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2780","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2780","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2780","headline":"🤔 Что такое кэш приложения в HTML5? Это механизм, позволяющий сохранять ресурсы веб-приложения в локальном кэ…","articleBody":"🤔 Что такое кэш приложения в HTML5?\n\nЭто механизм, позволяющий сохранять ресурсы веб-приложения в локальном кэше, чтобы оно могло работать офлайн. Реализуется через файл манифеста .appcache (устарело, заменено Service Workers).\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2026-07-31T16:10:45Z","dateModified":"2026-07-31T16:10:45Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1388},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":6}]}},{"@type":"ListItem","position":17,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2779","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2779","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2779","headline":"🤔 Как мы можем замерить скорость работы участка кода с date.Now? В JavaScript можно замерить скорость выполне…","articleBody":"🤔 Как мы можем замерить скорость работы участка кода с date.Now?\n\nВ JavaScript можно замерить скорость выполнения кода с помощью Date.now(), но есть более точные способы. Давайте разберём разные варианты. \n\n🚩Использование `Date.now()` \n\nМетод Date.now() возвращает количество миллисекунд с 1 января 1970 года (Unix-время). Можно запомнить время до и после выполнения кода, а затем вычислить разницу. \nconst start = Date.now(); // Фиксируем время начала\n\n// Код, время выполнения которого нужно измерить\nfor (let i = 0; i < 1e6; i++) { Math.sqrt(i); }\n\nconst end = Date.now(); // Фиксируем время окончания\nconsole.log(`Время выполнения: ${end - start} мс`);\n\n🚩Использование `performance.now()` (Более точный способ)\n\nМетод performance.now() возвращает время с микросекундной точностью (до тысячных долей миллисекунды). Он точнее, чем Date.now(), так как измеряет время с высокой детализацией. \nconst start = performance.now();\n\nfor (let i = 0; i < 1e6; i++) { Math.sqrt(i); }\n\nconst end = performance.now();\nconsole.log(`Время выполнения: ${(end - start).toFixed(3)} мс`);\n\n🚩Использование `console.time()`\n\nЕсли нужно просто измерить время выполнения блока кода, можно воспользоваться console.time() и console.timeEnd(). \nconsole.time(\"Мой код\");\n\nfor (let i = 0; i < 1e6; i++) { Math.sqrt(i); }\n\nconsole.timeEnd(\"Мой код\"); // Выведет время выполнения\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2026-07-31T09:05:48Z","dateModified":"2026-07-31T09:05:48Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1645},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":6},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":8}]}},{"@type":"ListItem","position":18,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2778","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2778","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2778","headline":"Услуги дата-центра в Москве Размещение и аренда серверного оборудования в дата-центре. 👍 4 современных дата-ц…","articleBody":"Услуги дата-центра в Москве\n\nРазмещение и аренда серверного оборудования в дата-центре.\n👍 4 современных дата-центра в Москве.\n👍 Лицензированный оператор связи.\n👍 Индивидуальные конфигурации выделенных серверов под задачи клиента.\n👍 Круглосуточная техническая поддержка в Телеграм, без ботов. \n\nУзнать цену\n\n#реклама 16+\nitsoft.ru\nО рекламодателе","datePublished":"2026-07-30T18:20:29Z","dateModified":"2026-08-01T16:41:34Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"image":["https://n1.tlmtr.cc/p/_wTYq6zs2vFW6swuD5cddryb09k-IvST8XpqC81Yq318?ty=l"],"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1022},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":1}]}},{"@type":"ListItem","position":19,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2777","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2777","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2777","headline":"🤔 Можешь ли пояснить разницу между progressive enhancement и graceful degradation? - Progressive enhancement:…","articleBody":"🤔 Можешь ли пояснить разницу между progressive enhancement и graceful degradation?\n\n- Progressive enhancement: вначале создаётся базовая, минимальная версия, которая работает в любом браузере, а затем добавляются улучшения для современных.\n- Graceful degradation: вначале создаётся максимально функциональная версия, которая плавно теряет функции при запуске в старых браузерах.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2026-07-30T16:10:45Z","dateModified":"2026-07-30T16:10:45Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1346},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":2}]}},{"@type":"ListItem","position":20,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2776","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2776","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2776","headline":"🤔 Как понять что код работает корректно? Чтобы понять, что код работает корректно, нужно провести его тестиро…","articleBody":"🤔 Как понять что код работает корректно?\n\nЧтобы понять, что код работает корректно, нужно провести его тестирование, что включает в себя проверку кода на соответствие ожидаемым результатам в различных ситуациях. Вот основные подходы и шаги:\n\n🚩Проверка требований\n\nПрежде чем тестировать код, нужно понять, что он должен делать. Обычно для этого используют техническое задание или описание требований.\nНапример: если вы пишете функцию, которая складывает два числа, то ожидается, что при вызове add(2, 3) результат будет 5.\n\n🚩Тестирование (Test Cases) \n\nТестирование предполагает выполнение кода с разными входными данными и проверку, что результат соответствует ожиданиям.\n🟠Ручное тестирование \nВы запускаете код с различными значениями и проверяете результаты.\n🟠Автоматизированное тестирование \nПишете тестовые скрипты, которые автоматически проверяют корректность работы.\n\nfunction add(a, b) {\n return a + b;\n}\n\nМы можем протестировать её так\nconsole.log(add(2, 3)); // Должно вывести 5\nconsole.log(add(0, 0)); // Должно вывести 0\nconsole.log(add(-1, -1)); // Должно вывести -2\n\nОднако лучше использовать автоматическое тестирование. Например, с помощью Jest\ntest('add function works correctly', () => {\n expect(add(2, 3)).toBe(5);\n expect(add(0, 0)).toBe(0);\n expect(add(-1, -1)).toBe(-2);\n});\n\n🚩Обработка крайних случаев\n\nИногда код может работать корректно для обычных данных, но давать сбои в \"необычных\" случаях. Эти ситуации называют крайними случаями.\nПустой ввод (например, add() вместо двух чисел).\nОчень большие числа.\nНеправильные типы данных (например, строка вместо числа).\n \n console.log(add()); // undefined или ошибка\n console.log(add('2', 3)); // Может вернуть '23' или ошибку, если функция не проверяет типы\n \n\n🚩Отладка (Debugging)\n\nЕсли код не работает как надо, нужно использовать инструменты для отладки\n🟠console.log() \nВывод данных для проверки логики.\n🟠Инструменты разработчика в браузере \nДля работы с JavaScript в реальном времени.\n🟠Дебаггер \nПозволяет пошагово выполнять код.\n\n🚩Проверка производительности\n\nИногда корректная работа кода связана не только с правильным результатом, но и с его скоростью. Если код работает слишком медленно, это может быть проблемой. Инструменты, такие как performance.now() в JavaScript, позволяют измерять время выполнения функций.\n\n🚩Code Reviews и тестирование пользователями\n\nПосле тестов полезно показать код другим разработчикам для проверки (code review) или провести тестирование с реальными пользователями. Это позволяет найти ошибки, которые могли быть упущены.\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2026-07-30T09:05:48Z","dateModified":"2026-07-30T09:05:48Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1410},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":6},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":5}]}}]}