Использование Performance API

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

Основные возможности Performance API

  1. Navigation Timing Навигация страницы — это один из ключевых аспектов для анализа времени отклика. Performance API предоставляет метки времени, такие как navigationStart, domContentLoadedEventStart и другие, которые помогают вычислить время загрузки и готовности страницы для взаимодействия.

  2. Resource Timing Веб-страницы часто загружают множество ресурсов (картинки, стили, скрипты и т. д.), которые также могут влиять на производительность. С помощью Resource Timing можно получить данные о времени загрузки каждого ресурса на странице.

  3. Long Tasks Long tasks помогают выявить длинные блокировки главного потока, которые могут ухудшить восприятие производительности пользователем. Такие задачи могут быть определены через Performance API с использованием меток времени и длительности выполнения.

Интеграция Performance API с WebdriverIO

WebdriverIO предоставляет доступ к меткам производительности через свой API. Для получения информации о производительности используется команда browser.getPerformance(), которая возвращает данные из браузера, связанные с Performance API.

Пример кода:

describe('Performance API Test', () => {
  it('should fetch performance data', async () => {
    // Запрашиваем данные о производительности
    const performanceData = await browser.getPerformance();
    
    // Логируем данные о навигации
    console.log(performanceData.navigation);
    
    // Логируем ресурсы
    console.log(performanceData.resources);
  });
});

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

Основные компоненты данных о производительности

После вызова browser.getPerformance() возвращается объект, содержащий несколько ключевых разделов. Рассмотрим основные из них.

  1. Navigation Этот объект предоставляет информацию о времени навигации, включая:

    • navigationStart — начало навигации.
    • domContentLoadedEventStart — время начала события DOMContentLoaded.
    • loadEventEnd — конец события загрузки страницы.

  2. Resources Ресурсы включают все файлы, загруженные на странице:

    • name — имя ресурса.
    • startTime — время начала загрузки ресурса.
    • duration — продолжительность загрузки ресурса.

  3. Long Tasks Долгие задачи, которые могут повлиять на производительность и восприятие страницы:

    • startTime — время начала задачи.
    • duration — продолжительность задачи.

Анализ времени загрузки с использованием Performance API

Для измерения общего времени загрузки страницы важно понимать ключевые метрики. Одна из таких метрик — это время от начала навигации до момента, когда DOM был полностью загружен и готов к взаимодействию. Использование Performance API позволяет точно измерить это время.

Пример:

describe('Page Load Performance', () => {
  it('should measure time from navigation to DOMContentLoaded', async () => {
    const performanceData = await browser.getPerformance();
    
    const navigationStart = performanceData.navigation.navigationStart;
    const domContentLoadedStart = performanceData.navigation.domContentLoadedEventStart;
    
    const loadTime = domContentLoadedStart - navigationStart;
    console.log(`Время загрузки страницы до DOMContentLoaded: ${loadTime} мс`);
  });
});

В данном примере измеряется время, прошедшее от начала навигации до события DOMContentLoaded. Это важная метрика для оценки времени отклика страницы, так как она указывает на момент, когда DOM готов для взаимодействия с пользователем.

Ресурсный анализ

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

Пример:

describe('Resource Timing', () => {
  it('should log resource load times', async () => {
    const performanceData = await browser.getPerformance();
    
    performanceData.resources.forEach((resource) => {
      console.log(`Ресурс: ${resource.name}`);
      console.log(`Начало загрузки: ${resource.startTime} мс`);
      console.log(`Продолжительность: ${resource.duration} мс`);
    });
  });
});

Этот код выводит в консоль информацию о каждом ресурсе на странице. Такой анализ помогает выявить ресурсы, которые могут замедлять загрузку страницы.

Долгие задачи (Long Tasks)

Долгие задачи являются важным индикатором производительности. Задачи, которые блокируют основной поток выполнения JavaScript на протяжении более 50 миллисекунд, могут ухудшить пользовательский опыт. Performance API позволяет обнаружить такие задачи и измерить их длительность.

Пример:

describe('Long Tasks Detection', () => {
  it('should log long tasks', async () => {
    const performanceData = await browser.getPerformance();
    
    performanceData.longTasks.forEach((task) => {
      console.log(`Долгая задача обнаружена`);
      console.log(`Начало: ${task.startTime} мс`);
      console.log(`Продолжительность: ${task.duration} мс`);
    });
  });
});

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

Применение Performance API в практике

Использование Performance API в тестах позволяет не только проверять скорость загрузки страниц, но и оптимизировать ресурсы. Эти данные могут быть полезны при анализе производительности для выявления узких мест в загружаемых ресурсах или длительных блокировок потока.

Для комплексных тестов производительности часто используется не только встроенный функционал Performance API, но и сторонние библиотеки, такие как Lighthouse, которые предоставляют более детализированный отчет о производительности страницы, включая метрики для аудита. Тем не менее, Performance API является важным инструментом в арсенале тестировщика, позволяя интегрировать проверку производительности прямо в процессе автоматизированного тестирования.

Таким образом, Performance API в сочетании с WebdriverIO предоставляет мощный набор инструментов для анализа производительности веб-приложений, который помогает не только измерить время загрузки, но и повысить качество взаимодействия с пользователем.

Оглавление