В современном быстро меняющемся цифровом мире производительность веб-сайта играет решающую роль в обеспечении бесперебойного взаимодействия с пользователем. Чтобы обеспечить оптимальную производительность, разработчикам необходим доступ к точной и подробной информации о времени для различных аспектов загрузки веб-страниц. Именно здесь в игру вступает API синхронизации навигации. В этой статье мы рассмотрим API синхронизации навигации и обсудим несколько методов, а также примеры кода, которые можно использовать для сбора ценных показателей производительности.

Что такое API синхронизации навигации?
API синхронизации навигации — это интерфейс JavaScript, который предоставляет разработчикам ценную информацию о времени навигации и процесса загрузки веб-страницы. Он предлагает набор свойств и методов для измерения различных показателей производительности, таких как время, необходимое для загрузки ресурсов, поиск DNS, подключение к серверу и многое другое. Используя этот API, разработчики могут получить представление о том, как загружаются их веб-страницы, и определить области, требующие оптимизации.

Метод 1: Скорость навигации по производительности
Объект performance.navigationпредоставляет информацию о навигации по текущему документу. Вот пример того, как его использовать:

const navigationTiming = performance.getEntriesByType("navigation")[0];
console.log("Page load type:", navigationTiming.type);
console.log("Redirect count:", navigationTiming.redirectCount);
console.log("Start time:", navigationTiming.startTime);
console.log("Duration:", navigationTiming.duration);

Метод 2: Тайминг ресурса
Метод performance.getEntriesByType("resource")позволяет получить информацию о тайминге для отдельных ресурсов, таких как изображения, скрипты или таблицы стилей. Вот пример:

const resourceTimings = performance.getEntriesByType("resource");
resourceTimings.forEach((resource) => {
  console.log("Resource URL:", resource.name);
  console.log("Start time:", resource.startTime);
  console.log("Duration:", resource.duration);
});

Метод 3: время пользователя
Методы performance.mark()и performance.measure()используются для измерения времени пользователя. Они позволяют вам определять собственные оценки производительности и измерять продолжительность между ними. Вот пример:

performance.mark("startMark");
// Perform some tasks...
performance.mark("endMark");
performance.measure("customMeasure", "startMark", "endMark");
const customMeasure = performance.getEntriesByName("customMeasure")[0];
console.log("Custom measure duration:", customMeasure.duration);

Метод 4: синхронизация сервера
Свойство performance.getEntriesByType("navigation")[0].serverTimingпредоставляет информацию о синхронизации сервера. Это позволяет измерять время ответа сервера и другие показатели, связанные с сервером. Вот пример:

const serverTimings = performance.getEntriesByType("navigation")[0].serverTiming;
serverTimings.forEach((serverTiming) => {
  console.log("Server timing name:", serverTiming.name);
  console.log("Server timing duration:", serverTiming.duration);
});

API Navigation Timing – это мощный инструмент для мониторинга и оптимизации веб-производительности. Используя его методы и свойства, разработчики могут собирать ценную информацию о времени для различных аспектов загрузки страниц и улучшать общее взаимодействие с пользователем. Будь то измерение времени загрузки страницы, времени использования ресурсов или пользовательского времени, API синхронизации навигации предоставляет важную информацию о производительности веб-сайта. Внедряя эти методы, разработчики могут улучшить процесс внешней разработки и обеспечить более быструю и оптимизированную работу в Интернете.