Измерение времени загрузки

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

Использование события load для измерения времени загрузки страницы

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

Пример кода для измерения времени загрузки страницы: 

const puppeteer = require(&

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  const startTime = Date.now();
  
  page.on('load', () => {
    const endTime = Date.now();
    console.log(`Страница загружена за ${endTime - startTime} миллисекунд.`);
  });

  await page.goto('https://example.com');
  await browser.close();
})();

В этом примере измеряется время, затраченное на загрузку страницы, начиная с вызова page.goto и заканчивая срабатыванием события load. Это простейший способ получить время полной загрузки страницы.

Измерение времени загрузки с использованием performance.timing

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

Пример получения данных о времени загрузки с использованием performance.timing: 

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.goto('https://example.com');

  const timing = await page.evaluate(() => {
    const { navigationStart, loadEventEnd } = window.performance.timing;
    return loadEventEnd - navigationStart;
  });

  console.log(`Время загрузки страницы: ${timing} миллисекунд.`);

  await browser.close();
})();

Здесь performance.timing предоставляет данные, такие как:

  • navigationStart: время начала навигации.
  • loadEventEnd: время завершения события load.

С помощью этих данных можно вычислить время, которое прошло между началом загрузки и её завершением, что поможет получить точную картину о времени загрузки страницы.

Использование waitForSelector для измерения времени загрузки определенных элементов

Зачастую важно измерить не только время полной загрузки страницы, но и время появления определённых элементов на странице, например, видимости кнопок или изображений. Для этого в Puppeteer можно использовать метод waitForSelector, который ждет появления элемента на странице.

Пример измерения времени появления элемента на странице: 

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  const startTime = Date.now();

  await page.goto('https://example.com');
  await page.waitForSelector('button#start');

  const endTime = Date.now();
  console.log(`Элемент загружен за ${endTime - startTime} миллисекунд.`);

  await browser.close();
})();

В данном случае скрипт будет ожидать появления элемента с селектором button#start, и время, затраченное на его загрузку, будет измеряться между вызовами goto и waitForSelector.

Измерение времени загрузки изображений

Если необходимо измерить, сколько времени требуется для загрузки конкретного изображения, можно использовать событие load для отслеживания загрузки отдельных ресурсов. Puppeteer предоставляет доступ к сети через page.setRequestInterception(true) и позволяет перехватывать запросы, включая запросы на изображения.

Пример измерения времени загрузки изображения: 

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  const startTime = Date.now();

  await page.setRequestInterception(true);
  page.on('request', (request) => {
    if (request.resourceType() === 'image') {
      request.continue();
    } else {
      request.abort();
    }
  });

  page.on('response', (response) => {
    if (response.request().resourceType() === 'image') {
      const endTime = Date.now();
      console.log(`Изображение загружено за ${endTime - startTime} миллисекунд.`);
    }
  });

  await page.goto('https://example.com');
  await browser.close();
})();

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

Применение Network для отслеживания запросов

В более сложных случаях, когда нужно не только измерить время загрузки, но и анализировать последовательность запросов, можно использовать инструмент мониторинга сети. Puppeteer позволяет взаимодействовать с сетевыми событиями через page.on(‘request’) и page.on(‘response’).

Пример использования сети для измерения времени: 

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.setRequestInterception(true);

  let requestStartTime;
  page.on('request', (request) => {
    if (request.resourceType() === 'document') {
      requestStartTime = Date.now();
    }
    request.continue();
  });

  page.on('response', (response) => {
    if (response.request().resourceType() === 'document') {
      const requestEndTime = Date.now();
      console.log(`Время загрузки документа: ${requestEndTime - requestStartTime} миллисекунд.`);
    }
  });

  await page.goto('https://example.com');
  await browser.close();
})();

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

Рекомендации по анализу времени загрузки

  1. Обратите внимание на ресурсы с длительным временем загрузки: при тестировании важно отслеживать элементы, которые могут замедлять работу страницы, такие как изображения высокого разрешения, скрипты или сторонние ресурсы.

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

  3. Автоматизация анализа: для автоматического анализа времени загрузки на разных страницах или на разных этапах загрузки можно использовать Puppeteer в сочетании с другими инструментами тестирования, такими как Lighthouse или другие библиотеки для анализа производительности.

Оглавление