Браузер и BOM
JavaScript в браузере исполняется не в вакууме — вокруг него глобальный объект window и слой браузерных API, который исторически называют BOM (Browser Object Model). Это location, history, navigator, таймеры, хранилища и воркеры — всё то, чего нет в спецификации языка ECMAScript, но что даёт браузер как хост.
Ключевая ось всей темы — модель безопасности вокруг источника (origin) и модель конкурентности вокруг единственного главного потока. Политика одного источника решает, что странице разрешено читать; событийный цикл и воркеры решают, что и когда исполняется, не блокируя отрисовку. Каждый слой ниже раскрывает один из этих механизмов.
Карта темы
- BOM и объект window — что такое
window, чем он отличается отdocument, и что даютlocation,history,navigator. - Навигация и жизненный цикл страницы — переход по URL, History API для SPA, события
DOMContentLoaded/load,defer/async. - Политика одного источника — что такое origin, что запрещает Same-Origin Policy и как её штатно ослабляют CORS и
postMessage. - Таймеры и планирование —
setTimeout/setInterval,setTimeout(fn, 0),requestAnimationFrame, debounce и throttle. - Web storage и cookie —
localStorage,sessionStorage, cookie и их атрибуты, различия по времени жизни, размеру и области. - Web workers — фоновый поток без доступа к DOM, обмен через
postMessageи структурное клонирование.
Частые ошибки и ловушки
| Ошибка | Последствие |
|---|---|
Считать window и document одним объектом | document — потомок window (дерево DOM), а не синоним глобального объекта |
Думать, что setTimeout(fn, 0) выполнится немедленно | Он ставит fn макрозадачей после текущего синхронного кода, не сразу |
Полагать, что poddomen.site.com и site.com — один источник | Origin — это тройка «схема + хост + порт»; разный хост означает разный origin |
Не проверять event.origin в обработчике message | Любая страница может слать вам postMessage — без проверки это XSS-канал |
Хранить токен в localStorage, считая это безопасным | localStorage доступен любому скрипту на странице — XSS его прочитает; для сессии нужен HttpOnly-cookie |
Ждать, что Web Worker увидит document | У воркера нет DOM, window, document — только обмен сообщениями |
| Делать тяжёлые вычисления в главном потоке | Блокирует отрисовку и события; тяжёлое считать в воркере |
Значение для собеседований
Браузерный слой спрашивают, чтобы проверить, понимаете ли вы платформу под языком — модель источника (безопасность) и модель одного потока (конкурентность). Кандидат, который объясняет, что postMessage — это штатная дырка в политике одного источника с обязательной проверкой event.origin, сразу опережает того, кто пересказывает список методов.
Что обычно проверяют:
- Разницу
windowиdocument, назначениеlocation/history/navigator. - Из чего состоит origin и что именно запрещает Same-Origin Policy.
- Что реально делает
setTimeout(fn, 0)и чемrequestAnimationFrameлучше для анимации. - Различие
localStorage/sessionStorage/cookie по времени жизни, размеру и отправке на сервер. - Почему воркер не трогает DOM и как устроен обмен через структурное клонирование.
Типичный неверный ответ: «setTimeout(fn, 0) запускает функцию сразу». На деле он лишь ставит её в очередь макрозадач — она выполнится только после того, как опустеет стек текущего синхронного кода (а при вложенности браузер ещё и зажимает задержку до ~4 мс).