Анализ производительности

Для работы с Puppeteer необходим Node.js версии 14 или выше. Puppeteer устанавливается через npm: 

npm install puppeteer

Импорт в проект осуществляется стандартным образом: 

const puppeteer = require(&


Создание экземпляра браузера:



(async () => {
    const browser = await puppeteer.launch({ headless: true });
    const page = await browser.newPage();
})();



Ключевые параметры launch:



    

  • 
headless: запуск без GUI (true/false).

    • 

  • 
args: массив аргументов для запуска Chromium.

    • 

  • 
defaultViewport: размер окна по умолчанию.

    • 




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




Puppeteer позволяет собирать точные метрики времени загрузки страниц,
используя объект PerformanceTiming:



const navigationStart = await page.evaluate(() => performance.timing.navigationStart);
const loadEventEnd = await page.evaluate(() => performance.timing.loadEventEnd);
const pageLoadTime = loadEventEnd - navigationStart;
console.log(`Время полной загрузки страницы: ${pageLoadTime} мс`);



Можно также использовать более современные API
PerformanceNavigationTiming:



const [perf] = await page.evaluate(() => performance.getEntriesByType('navigation'));
console.log(`Время полной загрузки: ${perf.loadEventEnd - perf.startTime} мс`);



Важно: Эти метрики позволяют выявить узкие места в
рендеринге и загрузке ресурсов.




Сбор и анализ сетевых запросов




Puppeteer предоставляет возможность отслеживать все сетевые запросы, что
критично для анализа производительности:



await page.setRequestInterception(true);

page.on('request', request => {
    console.log(`Запрос: ${request.url()}`);
    request.continue();
});

page.on('response', response => {
    console.log(`Ответ: ${response.url()} | Статус: ${response.status()}`);
});



Сбор информации о размере и времени загрузки ресурсов помогает
оптимизировать критические пути загрузки. Можно фильтровать запросы по
типу ресурса:



page.on('response', response => {
    if(response.request().resourceType() === 'script') {
        console.log(`Скрипт ${response.url()} загружен за ${response.timing().responseEnd - response.timing().requestStart} мс`);
    }
});



Скриншоты и профили производительности




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



await page.screenshot({ path: 'screenshot.png', fullPage: true });



Для глубокой диагностики производительности используется встроенный
инструмент Tracing:



await page.tracing.start({ path: 'trace.json', categories: ['devtools.timeline'] });
// действия на странице
await page.tracing.stop();



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




Мониторинг использования памяти




Puppeteer позволяет измерять использование памяти страницы через
performance.memory:



const memoryInfo = await page.evaluate(() => performance.memory);
console.log(`JS Heap Size Limit: ${memoryInfo.jsHeapSizeLimit}`);
console.log(`Total JS Heap Size: ${memoryInfo.totalJSHeapSize}`);
console.log(`Used JS Heap Size: ${memoryInfo.usedJSHeapSize}`);



Это особенно важно при тестировании долгоживущих SPA и страниц с
интенсивным использованием JavaScript.




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




Для оценки производительности UI можно замерять время выполнения
конкретных действий:



const start = performance.now();
await page.click('#submitButton');
await page.waitForSelector('#result');
const end = performance.now();
console.log(`Время выполнения действия: ${end - start} мс`);



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




Интеграция с внешними инструментами анализа




Puppeteer может экспортировать данные для использования в инструментах
вроде Lighthouse:



const lighthouse = require('lighthouse');
const chromeLauncher = require('chrome-launcher');

(async () => {
    const chrome = await chromeLauncher.launch({ chromeFlags: ['--headless'] });
    const result = await lighthouse('https://example.com', { port: chrome.port });
    console.log(`Performance score: ${result.lhr.categories.performance.score * 100}`);
    await chrome.kill();
})();



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




Оптимизация сценариев Puppeteer



    

  1. 
Параллельное тестирование – запуск нескольких
экземпляров браузера для ускорения сбора данных.

    2. 

  2. 
Кэширование ресурсов – использование
page.setCacheEnabled(true) для снижения нагрузки при
повторных тестах.

    3. 

  3. 
Ограничение сетевой скорости – имитация медленных
соединений с помощью page.emulateNetworkConditions().

    4. 

  4. 
Отслеживание медленных скриптов – использование
page.on(‘console’) и фильтрация предупреждений и ошибок.

    5. 




Выводы по практическому применению




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