PerfBar

21 серпня 2014 22:10 comandante 266 0

Особливості

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

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

<!DOCTYPE html>
<html>
<head>
  <title>PerfBar</title>
  <meta charset='utf-8'>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css">
</head>
<body>
  <!-- Це все, що потрібно, щоб почати використовувати PerfBar! -->
  <script type="text/javascript" src="javascripts/perfBar.js"></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>
</body>
</html>

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

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

<!DOCTYPE html>
<html>
<head>
  <title>PerfBar</title>
  <meta charset='utf-8'>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css">
</head>
<body>
  <!-- Це все, що потрібно, щоб почати використовувати PerfBar! -->
  <script type="text/javascript" src="javascripts/perfBar.js"></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>
</body>
</html>

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

.updateMetric (ID, UpdateObject)

id : ID метрики

UpdateObject : це об'єкт, який містить нові значення для метрики. Ви можете оновити budget, label, value, unit

<!DOCTYPE html>
<html>
<head>
  <title>PerfBar</title>
  <meta charset='utf-8'>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css">
</head>
<body>
  <!-- Це все, що потрібно, щоб почати використовувати PerfBar! -->
  <script type="text/javascript" src="javascripts/perfBar.js"></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>
</body>
</html>

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

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

“Ледаче” завантаження

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

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

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

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

Id: loadTime

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

Бюджет, max: 5000