PerfBar

8 хв. читання

01 березня 2020

· 0 · 0

Особливості

Проста установка. Тільки один сценарій, ніяких залежностей.
Десятки вбудованих метрик.
Можливість додати "кастомні" показники.
Ви можете відключити певну метрику.
Підтримка бюджетування всіх метрик.

Основи використання

      <title>PerfBar</title>
      <meta charset="utf-8">
      <meta content="IE=edge" http-equiv="X-UA-Compatible">
      <link href="stylesheets/stylesheet.css" rel="stylesheet" type="text/css">
      
      <script src="javascripts/perfBar.js" type="text/javascript"></script>
      <script type="text/javascript">
      perfBar.init({
        // список вбудованих метрик http://lafikl.github.io/perfBar/#list 
        budget: { 
          // ключе - це id метрики
          'loadTime': {
            max: 200
          },
          'redirectCount': {
            max: 1
          },
          'globalJS': {
            min: 2,
            max: 5
          }
        }
      });
      </script>

Метрики користувача

Кожна метрика повинна мати унікальний ідентифікатор або addMetric поверне помилку.

      <title>PerfBar</title>
      <meta charset="utf-8">
      <meta content="IE=edge" http-equiv="X-UA-Compatible">
      <link href="stylesheets/stylesheet.css" rel="stylesheet" type="text/css">

      <script src="javascripts/perfBar.js" type="text/javascript"></script>
      <script type="text/javascript">
      perfBar.init();
      
      var err = perfBar.addMetric({
        id: 'Test',
        label: 'Test new metric', // зрозуміла людині назва
        value: 18,
        budget: {
          max: 20,
          min: 1
        }
      });
     
      if ( !err ) console.log('Woho , no errors all is ok!');
      </script>

Оновлення метрики

.updateMetric (ID, UpdateObject)

id : ID метрики

UpdateObject : це об'єкт, який містить нові значення для метрики. Ви можете
оновити budget, label, value, unit
    
      <title>PerfBar</title>
      <meta charset="utf-8">
      <meta content="IE=edge" http-equiv="X-UA-Compatible">
      <link href="stylesheets/stylesheet.css" rel="stylesheet" type="text/css">
      
      <script src="javascripts/perfBar.js" type="text/javascript"></script>
      <script type="text/javascript">
      perfBar.init();
      
      var err = perfBar.addMetric({
        id: 'testId',
        label: 'Test new metric', // зрозуміла людині назва
        value: 18,
        budget: {
          max: 20,
          min: 1
        }
      });
     
      if ( !err ) console.log('Woho , no errors all is ok!');
      
      // Оновлення метрики - працює для всіх метрик, навіть вбудованих
      perfBar.updateMetric('testId', {
        value: 5
      })
      </script>

Включення / відключення метрики

      <title>PerfBar</title>
      <meta charset="utf-8">
      <meta content="IE=edge" http-equiv="X-UA-Compatible">
      <link href="stylesheets/stylesheet.css" rel="stylesheet" type="text/css">
      
      <script src="javascripts/perfBar.js" type="text/javascript"></script>
      <script type="text/javascript">
      perfBar.init();
      
      perfBar.disable('loadTime') // це прибере метрику з панелі
      perfBar.enable('loadTime') // це поверне метрику до панелі, зі старим значенням, бюджетом, міткою, блоком.
      </script>

"Ліниве" завантаження

      <title>PerfBar</title>
      <meta charset="utf-8">
      <meta content="IE=edge" http-equiv="X-UA-Compatible">
      <link href="stylesheets/stylesheet.css" rel="stylesheet" type="text/css">
      
      <script src="javascripts/perfBar.js" type="text/javascript"></script>
      <script type="text/javascript">
      // цей хороший варіант, якщо вам не хочеться завантажувати PerfBar сценарій 
      //  Тому що без Navigation timing метрика не спрацює, так як вона прикріпляється до onload event
      perfBar.init({lazy: true});
      
      </script>

Повний список вбудованих метрик

Час завантаження

Час завантаження сторінки. Він розраховується шляхом вирахування loadEventStart і navigationStart . Максимальне значення за замовчуванням: 5000 мс

Id: loadTime

Одиниця виміру: ms (мілісекунди)

Бюджет, max: 5000