3.0.0-rc.5 • Published 9 months ago
@perf-tools/keeper v3.0.0-rc.5
@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/keeper
Features
- 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 🤖
- Addons ✨
- Monitorings ⏱
- FPS 🌀
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: 120ms
Inline 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
3.0.0-rc.2
9 months ago
3.0.0-rc.1
9 months ago
3.0.0-rc.5
9 months ago
3.0.0-rc.4
9 months ago
3.0.0-rc.3
9 months ago
2.0.0-rc.28
2 years ago
2.0.0-rc.26
3 years ago
2.0.0-rc.27
3 years ago
2.0.0-rc.24
3 years ago
2.0.0-rc.25
3 years ago
2.0.0-rc.22
3 years ago
2.0.0-rc.23
3 years ago
2.0.0-rc.20
3 years ago
2.0.0-rc.21
3 years ago
2.0.0-rc.19
3 years ago
2.0.0-rc.17
3 years ago
2.0.0-rc.13
4 years ago
2.0.0-rc.12
4 years ago
2.0.0-rc.11
4 years ago
2.0.0-rc.10
4 years ago
2.0.0-rc.9
4 years ago
2.0.0-rc.7
4 years ago
2.0.0-rc.8
4 years ago
2.0.0-rc.5
4 years ago
2.0.0-rc.6
4 years ago
2.0.0-rc.4
4 years ago
2.0.0-rc.3
4 years ago
2.0.0-rc.2
4 years ago
2.0.0-rc.1
4 years ago
1.9.6
4 years ago
1.9.5
4 years ago
1.9.4
4 years ago
1.9.3
4 years ago
1.9.2
4 years ago
1.9.1
4 years ago
1.9.0
4 years ago
1.8.0
4 years ago
1.7.0
4 years ago
1.6.0
5 years ago
1.5.0
5 years ago
1.4.0
5 years ago
1.3.0
5 years ago
1.1.2
5 years ago
1.1.1
5 years ago
1.0.0
5 years ago