Бенчмаркинг загрузки и времени выполнения фреймов от конкретного инициатора / источника - PullRequest
Новая
       17

Бенчмаркинг загрузки и времени выполнения фреймов от конкретного инициатора / источника

1 голос
/ 24 апреля 2019

У меня есть веб-сайт с главным сценарием X. Этот сценарий загружает внешние сценарии (асинхронные) в зависимости от типа страницы, каждый из этих сценариев разделен в своем собственном iframe, но эти сценарии могут загружать другие сценарии.На веб-сайте есть много страниц, которые необходимо сравнить, и, следовательно, процесс должен быть автоматизирован.

Сам веб-сайт, главный скрипт X и iframes не могут быть изменены.

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

Мне нужно знать время загрузки и выполнения этих фреймов в абсолютном и относительном времени (Например, мастер-скрипт X загружается на страницу через 300 мс, для выполнения требуется 50 мс, загружается iframe1, загружается iframe1 через 350 мс и выполняется 100 мс, загружается другой скрипт, который загружается через 450 мс и занимает 30 мс = iframe 1 запускается через 350 мс и заканчивается через 480 мс -повторите для каждого другого iframe с источником X).

Возможно ли это с Node.js / Puppeteer и если да, то какие функции / библиотеки я могу использовать для этой задачи?

1 Ответ

0 голосов
/ 24 апреля 2019

У вас есть два варианта:

  1. Прослушивание соответствующих событий, сохранение их времени и вычисление результатов
  2. Использование существующей библиотеки для создания файла HAR

Вариант 1: прослушивание событий

Вы можете прослушивать такие события, как request, response (или requestfinished) в кукловоде, отметьте их временные метки (например, используя Date.now()) и сравните их.У вас есть полная свобода (и ответственность) в отношении того, какие события слушать.

Пример: 

page.on('request', request => {
    if (request.url() === 'URL of your frame') {
        const timestamp = Date.now();
        // store time somewhere
    }
});
// listen to other events and store their timings in addition

В зависимости от сложности вашей страницы вы можете захотетьиспользуйте массивы для хранения данных или даже базы данных.

Вариант 2: HAR-файл

Используйте библиотеку типа puppeteer-har или chrome-har чтобы создать файл HAR процесса загрузки страницы (я сам не использовал ни одного из них).

Цитата, что такое файл HAR ( source ):

Формат файла HAR является развивающимся стандартом, и информация, содержащаяся в нем, является гибкой и расширяемой.Можно ожидать, что файл HAR будет включать в себя разбивку по времени:

  1. Сколько нужно времени для получения информации DNS
  2. Сколько времени требуется для запроса каждого объекта
  3. Сколько времени требуется для подключения к серверу
  4. Сколько времени требуется для передачи ресурсов с сервера в браузер каждого объекта

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

Естьнесколько существующих инструментов для визуализации файлов HAR (, например, ), и вы даже можете перетащить файл HAR в экземпляр Chrome для его анализа.

Если вы хотитеавтоматизируйте процесс еще больше, вы также можете написать свой собственный скрипт для анализа файла HAR.Поскольку это файл JSON, это легко сделать.

...