muratgozel/cross-browser-performance-library.js

## cross-browser-performance-library.js
/*
*
* Purformance
*
* Simply use mark and measure methods similar to native performance api.
*
* Native performance methods are not supported by browsers
* and there is no better way to measure performance than Date.getTime()
* in those cases.
*
*/

// library, you are going to want to attach object to the window
window.purformance = {
  m: {},
  ud: typeof window.performance == 'undefined',
  mark: function(a) {this.m[a] = this.ud ? new Date().getTime() : performance.now();},
  measure: function(a, b) {return Math.abs(this.m[a] - this.m[b]);}
};

// usage, api demonstration
purformance.mark('somethingStart')
purformance.mark('somethingEnd')
const inMiliseconds = purformance.measure('somethingStart', 'somethingEnd')

// Look example.html below for more pratical example.
// Please be aware that the return value of performance.now()
// may have a different precision across browsers.

## example.html
<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript">window.purformance = {m: {},ud: typeof window.performance == 'undefined',mark: function(a) {this.m[a] = this.ud ? new Date().getTime() : performance.now();},measure: function(a, b) {return Math.abs(this.m[a] - this.m[b]);}};</script>
  <meta charset="utf-8">
  <title>Loading...</title>

  <script type="text/javascript">purformance.mark('stylesheetsLoadStart')</script>
  <link id="critical-css" rel="stylesheet" href="critical.css">
  <script type="text/javascript">purformance.mark('stylesheetsLoadEnd')</script>
</head>
<body>
<script type="text/javascript">
  const ms = purformance.measure('stylesheetsLoadStart', 'stylesheetsLoadEnd')
  console.log('Stylesheets loaded in ' + ms + ' miliseconds.')
</script>
</body>
</html>
	/*
	*
	* Purformance
	*
	* Simply use mark and measure methods similar to native performance api.
	*
	* Native performance methods are not supported by browsers
	* and there is no better way to measure performance than Date.getTime()
	* in those cases.
	*
	*/

	// library, you are going to want to attach object to the window
	window.purformance = {
	m: {},
	ud: typeof window.performance == 'undefined',
	mark: function(a) {this.m[a] = this.ud ? new Date().getTime() : performance.now();},
	measure: function(a, b) {return Math.abs(this.m[a] - this.m[b]);}
	};

	// usage, api demonstration
	purformance.mark('somethingStart')
	purformance.mark('somethingEnd')
	const inMiliseconds = purformance.measure('somethingStart', 'somethingEnd')

	// Look example.html below for more pratical example.
	// Please be aware that the return value of performance.now()
	// may have a different precision across browsers.
	<!DOCTYPE html>
	<html>
	<head>
	<script type="text/javascript">window.purformance = {m: {},ud: typeof window.performance == 'undefined',mark: function(a) {this.m[a] = this.ud ? new Date().getTime() : performance.now();},measure: function(a, b) {return Math.abs(this.m[a] - this.m[b]);}};</script>
	<meta charset="utf-8">
	<title>Loading...</title>

	<script type="text/javascript">purformance.mark('stylesheetsLoadStart')</script>
	<link id="critical-css" rel="stylesheet" href="critical.css">
	<script type="text/javascript">purformance.mark('stylesheetsLoadEnd')</script>
	</head>
	<body>
	<script type="text/javascript">
	const ms = purformance.measure('stylesheetsLoadStart', 'stylesheetsLoadEnd')
	console.log('Stylesheets loaded in ' + ms + ' miliseconds.')
	</script>
	</body>
	</html>