Switch branches/tags
Nothing to show
Find file History
Latest commit 42e5a70 Oct 18, 2018
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
__docs__ + rc-2 Oct 2, 2018
__jest__ + timekeeper v1.0.0-rc.1 Oct 1, 2018
src/timekeeper * optimize Oct 3, 2018
.gitignore + timekeeper v1.0.0-rc.1 Oct 1, 2018
README.md Update README.md Oct 18, 2018
index.ts + timekeeper v1.0.0-rc.1 Oct 1, 2018
package.json * fixed Oct 3, 2018
rollup.config.js * decreased build size Oct 2, 2018
timekeeper.js * optimize Oct 3, 2018
tsconfig.json + rc-2 Oct 2, 2018

README.md

@perf-tools/timekeeper

TimeKeeper — It's a time profiling helper and good replacement for console.time.

npm i --save @perf-tools/timekeeper

Support

  • Groups!
  • UserTiming -> DevTools / Performance
  • Output -> DevTools / Console or custom output

Usage

<html>
<head>
	<script>
		/**
		 * Replace this comment on the code from this file:
		 * https://github.com/artifact-project/perf-tools/blob/master/timekeeper/timekeeper.js
		 */
		var keeper = timekeeper.create({
			print: true,    // DevTools -> Console
			timeline: true, // DevTools -> Performance
			prefix: '',
		});
		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');

		keeper.group('app');
		keeper.time('require');
		require(['app/bootstrap'], keeper.wrap(function (bootstrap) {
			keeper.timeEnd('require');

			keeper.time('boot');
			bootstrap(document)
			keeper.timeEnd('boot');
		}));
		keeper.groupEnd('app');
	</script>
	<!-- ... -->
	<script>
		keeper.groupEnd();
	</script>
</body>
</html>

API

  • create(options: KeeperOptions): Keeper
    • options
      • print: boolean
      • perf: Partial<Performance>
      • console: Partial<Console>
      • timeline: boolean
      • warn: (msg: string) => void
    • Keeper
      • time(name: string)
      • timeEnd(name: string)
      • group(name: string)
      • groupEnd(name?: string)
      • wrap<R>(fn: (...args: A) => R): (...args: A) => R

Examples

Console

DevTools / Console


User Timing aka Timeline

DevTools / Timelime


Development