2 недели назад
История
README.md
😴 Спящие вкладки
Демо-песочница к одноимённому докладу о жизненном цикле вкладки в браузере. Здесь можно вживую потрогать четыре сценария, про которые большинство фронтендеров знают только по слухам:
| Раздел | Что показывает | |
|---|---|---|
| 🐢 | Троттлинг в фоне (/throttling) |
как браузер замедляет setInterval, цепочку setTimeout и requestAnimationFrame, когда вкладка не видна |
| 🧊 | Заморозка / разморозка (/freeze) |
события Page Lifecycle API — visibilitychange, freeze, resume, pagehide, pageshow — и фазы active → passive → hidden → frozen |
| 💤 | Системный сон (/system-sleep) |
детект «провала» во времени по расхождению wall-clock и ожидаемого тика — то самое, что случается, когда закрываешь крышку ноутбука |
| ↩️ | BFCache (/bfcache) |
как страница поднимается из back/forward cache: in-memory счётчик не сбрасывается, в pageshow приходит persisted=true |
Стек
- Next.js 16 (App Router, React 19)
- Tailwind CSS v4
- TypeScript
Никаких внешних зависимостей сверху — только то, что нужно для самих демо.
Запуск
npm install
npm run dev
Затем открой http://localhost:3000 — корень редиректит на первый раздел, а слева появится боковое меню с переключением между демками.
Прод-сборка и линт:
npm run build
npm run lint
Структура
app/
├── components/Nav.tsx ← боковое меню (clientside, usePathname)
├── layout.tsx ← каркас: <Nav /> + <main>{children}</main>
├── page.tsx ← redirect('/throttling')
├── throttling/page.tsx
├── freeze/page.tsx
├── system-sleep/page.tsx
└── bfcache/page.tsx
Все четыре демо-страницы — клиентские компоненты, потому что трогают window / document API. Каждый эффект корректно отписывается в cleanup, чтобы навигация по меню не оставляла за собой висящие таймеры (что было бы особенно иронично).
Описание
Конвейеры
0
успешных
0
с ошибкой