Минимизация перерисовок

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

Маршруты в Navigo создаются через метод on(). Например:

const router = new Navigo('/');

router.on('/home', () => {
  renderHome();
});

router.on('/about', () => {
  renderAbout();
});

router.resolve();

Метод resolve() проверяет текущий URL и вызывает соответствующий обработчик. Если URL не изменился, Navigo не вызывает повторно колбэк маршрута. Это поведение является основой для оптимизации и минимизации ненужных перерисовок.

Использование параметров маршрута

Navigo поддерживает динамические параметры в маршрутах, которые помогают обновлять только часть страницы, а не весь DOM.

router.on('/user/:id', (params) => {
  renderUserProfile(params.id);
});

Ключевой момент: изменение параметра в URL не требует полной перерисовки всех компонентов. Достаточно обновить только тот блок, который зависит от конкретного параметра. Например, если меняется id пользователя, можно перерисовать только блок с информацией о пользователе, оставив меню и шапку без изменений.

Метод `navigate` и контроль перерисовок

Метод navigate позволяет программно менять URL:

router.navigate('/about');

При вызове navigate Navigo вызывает обработчик маршрута. Чтобы минимизировать перерисовку, важно использовать проверку текущего состояния:

function safeNavigate(path) {
  if (window.location.pathname !== path) {
    router.navigate(path);
  }
}

Это предотвращает повторный рендер, если пользователь пытается перейти на текущий маршрут.

Поддержка вложенных маршрутов

Вложенные маршруты помогают делить интерфейс на независимые части. Например, можно создать маршруты для панели управления и её секций:

router.on('/dashboard', () => renderDashboard())
      .on('/dashboard/settings', () => renderSettings())
      .on('/dashboard/profile', () => renderProfile());

Если пользователь переходит между /dashboard/settings и /dashboard/profile, можно перерисовывать только внутренний контейнер, не трогая общую обёртку дашборда. Это уменьшает количество манипуляций с DOM и ускоряет интерфейс.

Использование колбэка `before`

Navigo позволяет подключать before колбэки, которые вызываются перед обработчиком маршрута. Они полезны для проверки условий и предотвращения ненужных рендеров:

router.on('/profile/:id', () => renderProfile())
      .before((done, params) => {
        if (currentUser.id !== params.id) {
          done();
        }
      });

Если условие не выполняется, рендер не вызывается. Это позволяет минимизировать перерисовки при навигации по идентичным данным.

Управление состоянием и кеширование

Для снижения количества перерисовок важно комбинировать Navigo с управлением состояния приложения. Хранение данных в глобальном состоянии или локальном кеше позволяет не обращаться к серверу при каждом переходе.

const userCache = {};

router.on('/user/:id', (params) => {
  if (!userCache[params.id]) {
    fetchUser(params.id).then(user => {
      userCache[params.id] = user;
      renderUser(user);
    });
  } else {
    renderUser(userCache[params.id]);
  }
});

Ключевой эффект: повторные переходы к одному и тому же пользователю не вызывают сетевые запросы и не перерисовывают лишние блоки.

Работа с якорями и query-параметрами

Navigo позволяет обрабатывать query-параметры и hash-части URL без полной перезагрузки:

router.on('/search', (params, query) => {
  renderSearchResults(query.q);
});

Изменение query-параметра может инициировать только частичное обновление результатов поиска, не трогая другие компоненты страницы. Это особенно актуально для страниц с фильтрами или динамическими списками.