@perf-tools/keeper (aka PerfKeeper)
PerfKeeper — It's a tool for performance monitoring and profiling your application (also best replacement for console.time).
npm i --save @perf-tools/keeperFeatures
- Groups!
🗂 - DevTools -> Performance -> UserTiming 💡
- Output -> DevTools / Console or custom output
💬 - Out of box
⚡️ - Monitorings
⏱ -
FPS
🌀 -
Navigation Connection
🎛 -
Navigation Timings
🚏 - Paint Timings: FCP / LCP / CLS 🏞
-
Performance: FID / TBT / TTI
🚀 -
Resource/Traffic
⚖️ -
Memory
🤖
-
FPS
- Addons
✨
- Monitorings
Usage
// System keeper
import { system } from '@perf-tools/keeper';
// Custom keeper
import { create } from '@perf-tools/keeper';
import { googleAnalytics } from '@perf-tools/keeper/analytics/google';
const keeper = perfKeeper.create({
print: true, // DevTools -> Console
timeline: true, // DevTools -> Performance -> User timings
prefix: '⏱',
analytics: [
googleAnalytics({prefix: 'MyApp-'}),
],
});
// 1. Classic usage variant
keeper.time('FooBar');
// ...
keeper.timeEnd('FooBar'); // ⏱FooBar: 37ms
// 2. Shorted usage variant
const timer = keeper.time('FooBar'); // ⏱FooBar: 37ms
// ...
timer.stop();
// 3. Functional usage variant
keeper.time('FooBar', () => { // ⏱FooBar: 37ms
// ...
});
// 4. Usage variant with groups
const group = keeper.group('App');
group.mark('init'); // starting 'init' timer
// ...
group.mark('prepare'); // ending 'init' and starting 'prepare' timer
// ...
group.mark('render'); // ending 'prepare' and starting 'render' timer
// ...
group.stop(); // starting 'render' timer
// ⏱App: 382ms
// ⏱init: 243ms
// ⏱prepare: 19ms
// ⏱render: 120msInline Usage
<html>
<head>
<script>
/**
* Replace this comment on the code from this files:
* - ./dist/perf-keeper.js
* - ./dist/perf-keeper.extentions.js
* - ./dist/perf-keeper.analytics.google.js
*/
// Setup system keeper
perfKeeper.system.print(true);
perfKeeper.system.setAnalytics([perfKeeperAnalyticsGoogle.googleAnalytics()]);
perfKeeperExtentions.set(perfKeeper.system);
// Create custom keeper
var keeper = perfKeeper.create({
print: true, // DevTools -> Console
timeline: true, // DevTools -> Performance
prefix: '⏱',
analytics: [
perfKeeperAnalyticsGoogle.googleAnalytics({
prefix: 'MyApp-',
}),
],
});
keeper.group('head');
</script>
<script>
keeper.time('icon');
</script>
<link rel="shortcut icon" type="image/x-icon" href="..."/>
<link rel="apple-touch-icon" href="..." />
<!-- etc -->
<script>
keeper.timeEnd('icon');
keeper.time('css');
</script>
<link type="text/css" rel="stylesheet" href="..."/>
<!-- etc -->
<script>
keeper.timeEnd('css');
keeper.groupEnd();
</script>
</head>
<body>
<script>
keeper.group('body');
</script>
<!-- ... -->
<script>
keeper.time('javascript');
</script>
<script src="./boot/loader"></script>
<!-- etc -->
<script>
keeper.timeEnd('javascript');
const gapp = keeper.group('app', true);
gapp.mark('require');
require(['app/bootstrap'], (bootstrap) => {
gapp.mark('boot');
bootstrap(document);
gapp.stop();
});
</script>
<!-- ... -->
<script>
keeper.groupEnd();
</script>
</body>
</html>Development
npm i-
npm test, code coverage