Created
February 9, 2020 10:39
-
-
Save muratgozel/bc0a554de0272d58b1bddf0a305c4dca to your computer and use it in GitHub Desktop.
Tiny, cross browser frontend performance checking library.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| * | |
| * 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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment