Профилирование навигации

Navigo — это лёгкая клиентская библиотека для роутинга на стороне браузера, позволяющая управлять навигацией в одностраничных приложениях (SPA) без перезагрузки страницы. В основе работы лежит сопоставление URL с обработчиками маршрутов, что делает библиотеку особенно удобной для динамических интерфейсов.

Навигация осуществляется через объект роутера, создаваемый следующим образом:

import Navigo from 'navigo';

const router = new Navigo('/', { hash: true });
  • Первый параметр ('/') указывает базовый путь приложения.
  • Опция hash: true включает поддержку хеш-маршрутов (/#/route), что упрощает работу с сервером, который не поддерживает history API.

Определение маршрутов

Маршруты задаются методом .on():

router.on({
  '/': () => { console.log('Главная страница'); },
  '/about': () => { console.log('Страница "О нас"'); },
  '/user/:id': (params) => { console.log('Пользователь:', params.id); }
});
  • '/user/:id' — динамический сегмент. Параметр id автоматически передаётся в обработчик через объект params.
  • Можно использовать множественные маршруты одним объектом для компактности.

Для более сложных сценариев применяется цепочка методов:

router
  .on('/posts', () => { console.log('Все посты'); })
  .on('/posts/:id', (params) => { console.log('Пост', params.id); });

Навигация и программное управление

Для перехода между маршрутами используется метод .navigate():

router.navigate('/about');
  • Этот метод изменяет URL и вызывает соответствующий обработчик.
  • Если используется history API, переход не вызывает перезагрузку страницы.

Для перехода с сохранением состояния можно использовать объект state:

router.navigate('/user/42', { state: { fromDashboard: true } });
  • Объект состояния доступен в обработчике через window.history.state.

Поддержка историй и хешей

Navigo автоматически интегрируется с History API браузера. Основные режимы работы:

  1. History mode — чистые URL (/about, /user/42) без хеша.

    • Требует настройки сервера, чтобы все запросы перенаправлялись на index.html.

  2. Hash mode — URL с хешем (/#/about).

    • Работает без серверных настроек, но URL менее эстетичны.

Выбор режима задаётся через опции при создании роутера:

const router = new Navigo('/', { hash: false });

Навигационные хуки

Для профилирования и отладки навигации используются хуки:

router.hooks({
  before: (done, match) => {
    console.log('Переход к маршруту:', match.url);
    done();
  },
  after: (match) => {
    console.log('Маршрут загружен:', match.url);
  }
});
  • before вызывается перед запуском обработчика маршрута.
  • after вызывается после выполнения обработчика.
  • Метод done() позволяет асинхронно контролировать переход.

Хуки удобны для профилирования производительности, логирования, аутентификации и условного редиректа.

Программное профилирование маршрутов

Для измерения времени загрузки и отклика маршрутов можно использовать встроенные хуки:

router.hooks({
  before: (done, match) => {
    match.startTime = performance.now();
    done();
  },
  after: (match) => {
    const duration = performance.now() - match.startTime;
    console.log(`Маршрут ${match.url} загружен за ${duration.toFixed(2)} мс`);
  }
});
  • performance.now() обеспечивает точное измерение времени с миллисекундной точностью.
  • match содержит URL, параметры и дополнительное состояние маршрута, что позволяет детально профилировать каждый переход.

Динамическая маршрутизация и профилирование параметров

Navigo позволяет отслеживать динамические сегменты URL, что полезно для SPA с контентом на основе ID или фильтров:

router.on('/product/:id', (params, query) => {
  console.log(`Загрузка продукта ${params.id}`);
});
  • Параметры (params.id) и query-параметры доступны отдельно.
  • Для анализа производительности можно записывать время загрузки данных для каждого ID, создавая подробную статистику маршрутов.

Редиректы и замена URL

Для изменения текущего маршрута без создания истории используется метод .replace():

router.navigate('/login', { replace: true });
  • Полезно для редиректов после аутентификации или обновления состояния без накопления записей в истории браузера.
  • Комбинируется с хуками для замера времени перехода и логирования.

Составные маршруты и вложенность

Можно комбинировать маршруты с префиксами для более структурированной навигации:

const adminRouter = router.on('/admin/*', (match) => {
  console.log('Админ-панель, путь:', match.url);
});
  • * обозначает подмаршруты.
  • Все вложенные маршруты можно профилировать через match.url и хуки before/after.
  • Это упрощает сбор статистики по группам маршрутов, например, по разделам сайта.

Примеры профилирования SPA

Использование навигационных хуков для комплексного анализа:

router.hooks({
  before: (done, match) => {
    match.startTime = performance.now();
    console.log('Начало загрузки маршрута:', match.url);
    done();
  },
  after: (match) => {
    const duration = performance.now() - match.startTime;
    console.log(`Маршрут ${match.url} загружен за ${duration.toFixed(2)} мс`);
    // Дополнительно можно отправить данные на сервер аналитики
    // sendAnalytics(match.url, duration);
  }
});
  • Можно собирать статистику по каждому маршруту.
  • Поддерживаются асинхронные операции в before, что позволяет замерять время загрузки данных перед отображением контента.

Navigo предоставляет мощные инструменты для управления навигацией, динамических маршрутов и их профилирования, делая возможным детальный анализ производительности SPA и точное измерение времени отклика каждой части интерфейса.

Оглавление