> Что представляет браузер и какие объекты он предоставляет (JavaScript)

Короткий ответ

Браузер - это среда выполнения JavaScript, предоставляющая объекты для взаимодействия с веб-страницей и системой пользователя. Основные объекты: window (глобальный контекст), document (DOM), navigator (информация о браузере), location (URL), history (навигация), console (отладка), localStorage/sessionStorage (хранение данных), fetch/XMLHttpRequest (сетевые запросы), setTimeout/setInterval (таймеры), WebSocket, IntersectionObserver и другие API.

Подробное объяснение

Браузер как среда выполнения предоставляет runtime, отличный от Node.js: он ориентирован на работу с DOM, событиями пользователя и ограничен политикой безопасности (same-origin policy, CORS). Ключевые объекты:

• window: глобальный объект, содержит все глобальные переменные, методы (alert, prompt), таймеры, а также ссылки на другие объекты (document, navigator). Включает event loop, отвечающий за асинхронность.
• document: точка входа в DOM, предоставляет методы для поиска элементов (querySelector, getElementById), манипуляции (createElement, appendChild), обработки событий (addEventListener).
• navigator: информация о браузере и устройстве (userAgent, platform, geolocation, clipboard, mediaDevices).
• location: управление URL (href, search, hash, reload, assign).
• history: навигация по истории сессии (back, forward, pushState, replaceState).
• localStorage/sessionStorage: синхронное хранение ключ-значение до 5-10 МБ.
• fetch/XMLHttpRequest: выполнение HTTP-запросов. Fetch основан на Promise, XHR - на событиях.
• WebSocket: полнодуплексное соединение для real-time коммуникации.
• IntersectionObserver: отслеживание видимости элементов (lazy loading).
• ResizeObserver: реакция на изменение размеров элементов.
• MutationObserver: отслеживание изменений в DOM.
• requestAnimationFrame: оптимизированная анимация, синхронизированная с частотой обновления экрана.
• console: отладка (log, warn, error, table, time/timeEnd).
• performance: метрики производительности (navigation timing, memory).
• caches: Cache API для Service Workers.
• indexedDB: асинхронное NoSQL-хранилище для больших объёмов данных.

Все эти объекты доступны в глобальной области видимости и реализуют Web API, специфицированные WHATWG и W3C.

На практике

При разработке важно понимать, что браузерные объекты нестабильны в разных браузерах (особенно старых версиях). Для кросс-браузерности используют полифиллы или библиотеки. Также критично учитывать асинхронность: event loop обрабатывает задачи (macrotasks) и микрозадачи (microtasks), что влияет на порядок выполнения кода с таймерами, промисами и DOM-событиями.

Пример типичной задачи: lazy loading изображений через IntersectionObserver, кеширование данных в localStorage с проверкой на доступность (может быть заблокирован в режиме инкогнито), использование history.pushState для SPA-роутинга без перезагрузки страницы.

Пример кода

JAVASCRIPT
// Пример использования браузерных объектов
// 1. Lazy loading изображений
const images = document.querySelectorAll('img[data-src]');
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
});
images.forEach(img => observer.observe(img));

// 2. Работа с localStorage с обработкой ошибок
try {
  localStorage.setItem('theme', 'dark');
  const theme = localStorage.getItem('theme');
} catch (e) {
  console.warn('localStorage недоступен:', e.message);
}

// 3. Использование history API для SPA
function navigate(path) {
  history.pushState({ path }, '', path);
  // обновление контента
}
window.addEventListener('popstate', (event) => {
  // восстановление состояния
});

Как отвечать на собеседовании

Начни с определения браузера как среды выполнения, затем перечисли ключевые объекты, сгруппировав их по функциональности (DOM, сеть, хранение, таймеры, отладка). Упомяни, что все они часть Web API, а не языка JavaScript. Подчеркни разницу между браузерным runtime и Node.js (отсутствие fs, наличие DOM). Для senior-уровня добавь про event loop, микротаски и ограничения безопасности. Приведи пример практического использования (lazy loading, SPA routing). Избегай перечисления всех API без контекста - лучше сфокусироваться на наиболее важных.

Что проверяет интервьюер

• Понимание архитектуры браузера как среды выполнения.
• Знание ключевых Web API и их назначения.
• Умение различать синхронные и асинхронные операции.
• Осведомлённость о кросс-браузерных проблемах и ограничениях (localStorage в инкогнито, CORS).
• Способность применять API на практике (не просто перечислять).

Типичные ошибки

• Путаница между window и document: window - глобальный объект, document - его свойство.
• Игнорирование асинхронности: например, попытка синхронно прочитать результат fetch.
• Незнание ограничений: localStorage может быть недоступен, sessionStorage очищается при закрытии вкладки.
• Утверждение, что setTimeout гарантирует точное время выполнения (на самом деле минимальная задержка).
• Забывание про requestAnimationFrame для анимации вместо setTimeout/setInterval.
• Непонимание разницы между microtask и macrotask в event loop.