48

@perf-tools/keeper — It's a tool for performance monitoring and profilin...

 5 years ago
source link: https://www.tuicool.com/articles/hit/e2ieQbE
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

@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

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>

API

  • create (options: KeeperOptions ): PerfKeeper
    • options
      • disabled : boolean
      • print : boolean
      • perf : Partial<Performance>
      • console : Partial<Console>
      • timeline : boolean
      • analytics : Array<(entry: Entry) => void>
      • warn : (msg: string) => void
    • PerfKeeper
      • print : (enable?: boolean) => void
      • disable : (state: boolean) => void
      • setAnalytics : (list: Array<(entry: Entry) => void>) => void
      • add (name: string , start: number , end: number ): Entry
      • time (name: string , start?: number ): Entry
      • timeEnd (name: string , end?: number ): void
      • group (name: string ): GroupEntry
      • group (name: string , isolate: true ): GroupEntry
      • group (name: string , start: number , isolate?: true ): GroupEntry
      • groupEnd (name?: string , end?: number ): void
    • Entry
      • id : string — unique identifier
      • name : string — name of measure
      • start : number — start mark
      • end : number — end mark
      • parent : GroupEntry | null — reference on parent
      • stop (end?: number ): void — complete the measurement (set end prop)
    • GroupEntry (extends Entry )
      • entries : Entry[] — nested metrics
      • add (name: string , start: number , end: number ): Entry
      • time (name: string , start?: number ): Entry
      • timeEnd (name: string , end?: number ): void
      • mark (name: string ): void
      • group (name: string ): GroupEntry

Examples

Console

zM7Rnif.png!web

User Timing aka Timeline

EVvQBfI.png!web

Development


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK