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

Обзор

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

Структура файлов

src/
├── performance.config.ts      # Конфигурация тестов и порогов
├── performance-multi.test.ts  # Множественные тесты с улучшенной статистикой
scripts/
├── performance-multi-report.js # Отчет для множественных тестов
├── performance-delta-report.js # Генератор HTML-отчетов для дельты производительности
docs/
└── performance-testing.md     # Данная документация

Доступные команды

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

npm run test:performance - Запуск тестов производительности с подробным выводом
npm run test:performance:quiet - Тихий режим для тестов производительности
npm run test:performance:report - Подробный отчет с анализом надежности

Обычные тесты (исключены из производительности)

npm test - Запуск только функциональных тестов (без производительности)
npm run test:watch - Режим наблюдения за изменениями
npm run test:coverage - Тесты с покрытием кода

HTML-отчеты дельты производительности

node scripts/performance-delta-report.js - Генерация HTML-отчета с визуализацией изменений

Разделение тестов

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

Функциональные тесты (npm test) - быстрые тесты функциональности
Тесты производительности (npm run test:performance) - медленные тесты производительности

Категории тестов

PROCESSING (Обработка)

Large HTML content processing - Обработка больших HTML документов
Large text content processing - Обработка больших текстовых блоков
Concurrent component creation - Одновременное создание компонентов
Complex HTML structure - Сложные вложенные HTML структуры

REACTIVITY (Реактивность)

Multiple re-renders - Множественные перерендеры
Computed properties reactivity - Реактивность вычисляемых свойств

SANITIZATION (Санитизация)

HTML sanitization overhead - Накладные расходы на санитизацию HTML

MEMORY (Память)

Memory usage - Использование памяти при создании множественных компонентов

EDGE-CASE (Крайние случаи)

Edge case: extremely long word - Обработка экстремально длинных слов

Пороговые значения

Тест	Порог	Описание
Large HTML content processing	100ms	Обработка больших HTML документов
Large text content processing	50ms	Обработка текстовых блоков
Multiple re-renders	200ms	Множественные перерендеры
Computed properties reactivity	100ms	Реактивность свойств
HTML sanitization overhead	150ms	Санитизация HTML
Memory usage	500ms	Использование памяти
Edge case: extremely long word	50ms	Крайние случаи
Concurrent component creation	500ms	Одновременное создание
Complex HTML structure	200ms	Сложные структуры

Отчеты и мониторинг

JSON отчеты

performance-multi-report.json - Отчет множественных тестов с статистикой
performance-delta.json - Сравнение с предыдущими запусками

HTML-отчеты

performance-delta.html - Визуальный отчет изменений производительности с цветовым кодированием

Красивые отчеты

npm run test:performance:multi:report - Отчет с анализом надежности

Новая система HTML-отчетов дельты производительности

Особенности HTML-отчетов

Русскоязычный интерфейс - Полностью локализованный интерфейс
Современный дизайн - Адаптивная верстка с градиентами и тенями
Цветовое кодирование:
- 🟢 Зеленый - улучшения производительности
- 🔴 Красный - ухудшения производительности
- ⚪ Серый - без изменений
Иконки статусов:
- 📈 Улучшено
- 📉 Ухудшено
- ➡️ Без изменений

Структура HTML-отчета

Общая сводка изменений - Показатели производительности и длительности
Статистика изменений - Количество улучшенных/ухудшенных/неизменных тестов
Детальная разбивка по тестам - Сравнение предыдущих и текущих значений
Метрики производительности - Время выполнения, процентные изменения

Генерация HTML-отчетов

bash

# Запуск тестов производительности (генерирует performance-delta.json)
npm run test:performance

# Генерация HTML-отчета
node scripts/performance-delta-report.js

Автоматическое уведомление

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

Генерирует performance-delta.json
Выводит подсказку о генерации HTML-отчета
Показывает краткую сводку изменений в консоли

Система множественных тестов

Особенности

Множественные прогоны: Каждый тест выполняется 5 раз для получения более точных результатов
Статистический анализ: Расчет среднего, медианы, стандартного отклонения
Анализ надежности: Коэффициент вариации (CV) для оценки стабильности
Исключение выбросов: Автоматическое исключение аномальных результатов
Оценка стабильности: Классификация тестов по надежности (HIGH/MEDIUM/LOW)

Метрики надежности

CV < 15%: Высокая надежность (🟢)
CV 15-30%: Средняя надежность (🟡)
CV > 30%: Низкая надежность (🔴)

Конфигурация множественных тестов

typescript

export const PERFORMANCE_CONFIG = {
  RUNS_COUNT: 5,           // Количество прогонов для усреднения
  MIN_RUNS: 3,             // Минимальное количество прогонов
  MAX_DEVIATION: 30,       // Максимальное отклонение между прогонами (%)
  EXCLUDE_OUTLIERS: true,  // Исключать выбросы
  OUTLIER_PERCENTAGE: 0.1  // Процент выбросов для исключения
};

Анализ результатов

Статусы производительности

EXCELLENT - Время выполнения < 20% от порога
GOOD - Время выполнения 20-50% от порога
WARNING - Время выполнения 50-80% от порога
SLOW - Время выполнения 80-100% от порога
CRITICAL - Время выполнения > 100% от порога

Статусы надежности

STABLE - Все тесты имеют высокую надежность
MEDIUM - Некоторые тесты имеют среднюю надежность
UNSTABLE - Есть тесты с низкой надежностью

Статусы изменений дельты

IMPROVED - Производительность улучшена (время выполнения уменьшено)
DEGRADED - Производительность ухудшена (время выполнения увеличено)
SAME - Производительность не изменена (разница < 1ms)

Метрики

Время обработки - Среднее время выполнения теста
Процент от порога - Соотношение времени выполнения к пороговому значению
Размер данных - Объем обрабатываемых данных
Коэффициент вариации - Мера стабильности результатов
Дельта времени - Изменение времени выполнения между запусками
Процентное изменение - Относительное изменение производительности

Настройка и конфигурация

Изменение пороговых значений

Отредактируйте файл src/performance.config.ts:

typescript

export const PERFORMANCE_THRESHOLDS = {
  'Large HTML content processing': 100, // мс
  'Large text content processing': 50,  // мс
  // ... другие тесты
};

Игнорирование HTML-отчетов

HTML-отчеты автоматически добавлены в .gitignore:

gitignore

performance-delta.html
performance-multi-report.html

Добавление новых тестов

Добавьте тест в src/performance-multi.test.ts
Установите пороговое значение в src/performance.config.ts
Добавьте описание в категорию

Workflow рекомендации

Типичный рабочий процесс

bash

# 1. Запуск базовых тестов
npm run test:performance

# 2. Генерация HTML-отчета
node scripts/performance-delta-report.js

# 3. Анализ результатов в браузере
# Откройте performance-delta.html в браузере

# 4. При необходимости детального анализа
npm run test:performance:report

Интеграция в CI/CD

yaml

# Пример для GitHub Actions
- name: Run performance tests
  run: npm run test:performance

- name: Generate HTML report
  run: node scripts/performance-delta-report.js

- name: Archive performance reports
  uses: actions/upload-artifact@v3
  with:
    name: performance-reports
    path: |
      performance-delta.html
      performance-delta.json

Поддержка

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

Проверьте корректность конфигурации в performance.config.ts
Убедитесь, что все зависимости установлены
Проверьте логи на наличие ошибок
Используйте npm run test:performance для более детального анализа
Проверьте права доступа к файлу scripts/performance-delta-report.js

Версионирование

Система тестирования производительности версионируется вместе с основным компонентом. При изменении API компонента необходимо обновить соответствующие тесты.

Система тестирования производительности VueTruncateHtml ​

Обзор ​

Структура файлов ​

Доступные команды ​

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

Обычные тесты (исключены из производительности) ​

HTML-отчеты дельты производительности ​

Разделение тестов ​

Категории тестов ​

PROCESSING (Обработка) ​

REACTIVITY (Реактивность) ​

SANITIZATION (Санитизация) ​

MEMORY (Память) ​

EDGE-CASE (Крайние случаи) ​

Пороговые значения ​

Отчеты и мониторинг ​

JSON отчеты ​

HTML-отчеты ​

Красивые отчеты ​

Новая система HTML-отчетов дельты производительности ​

Особенности HTML-отчетов ​

Структура HTML-отчета ​

Генерация HTML-отчетов ​

Автоматическое уведомление ​

Система множественных тестов ​

Особенности ​

Метрики надежности ​

Конфигурация множественных тестов ​

Анализ результатов ​

Статусы производительности ​

Статусы надежности ​

Статусы изменений дельты ​

Метрики ​

Настройка и конфигурация ​

Изменение пороговых значений ​

Игнорирование HTML-отчетов ​

Добавление новых тестов ​

Рекомендации ​

Workflow рекомендации ​

Типичный рабочий процесс ​

Интеграция в CI/CD ​

Поддержка ​

Версионирование ​