Last active
December 12, 2015 07:58
-
-
Save piercemoore/4740415 to your computer and use it in GitHub Desktop.
This set of functions, when placed in the correct places, will help you find bottlenecks without having to dive into Chrome's Inspector or Mozilla's Firebug.
This file contains hidden or 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
| <html> | |
| <head> | |
| // Blah Blah Blah | |
| </head> | |
| <body> | |
| <script type="text/javascript"> | |
| /** | |
| * We make absolutely positive that the first thing on the stack is our timer starting. | |
| */ | |
| // And away we go! | |
| startTimer(); | |
| </script> | |
| <!-- Blah, blah blah --> | |
| <script type="text/javascript"> | |
| // Now we are at the absolute end of the page and we have loaded all of our assets so let's call assetsLoaded() | |
| assetsLoaded(); | |
| // Now we need to bootstrap our last function, pageRendered(), and make sure it runs dead last on the $(document).ready() stack | |
| $(function() { | |
| $(window).bind('load', function() { | |
| pageRendered(); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or 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
| function startTimer() { | |
| window.timer_pageBuildStartTime = time(); | |
| setMilestone( window.timer_pageBuildStartTime ); | |
| console.time("Page Build"); | |
| } | |
| function assetsLoaded() { | |
| window.timer_AssetsLoaded = time(); | |
| window.timer_AssetLoadTime = elapsed( window.timer_AssetsLoaded, window.timer_pageBuildStartTime ); | |
| console.log("Assets loaded in " + window.timer_AssetLoadTime + " seconds"); | |
| setMilestone( window.timer_AssetsLoaded ); | |
| } | |
| function pageRendered() { | |
| window.timer_pageBuildEndTime = time(); | |
| window.timer_pageBuildTotalTime = elapsed( window.timer_pageBuildEndTime, window.timer_pageBuildStartTime ); | |
| //console.log("Page fully rendered in " + window.timer_pageBuildTotalTime + " seconds"); | |
| console.groupEnd(); | |
| console.timeEnd("Page Build"); | |
| } | |
| function _milestone( activity ) { | |
| var milestoneTime = time(); | |
| log("Activity Completed: '" + activity + "' : ", elapsed( milestoneTime, window.timer_milestone ) + " seconds"); | |
| setMilestone( milestoneTime ); | |
| } | |
| function setMilestone( specifiedTime ) { | |
| if( specifiedTime ) | |
| window.timer_milestone = specifiedTime; | |
| else | |
| window.timer_milestone = time(); | |
| } | |
| function time() { | |
| return new Date().getTime(); | |
| } | |
| function elapsed( start, end ) { | |
| return parseFloat( ( parseInt(end) - parseInt(start) ) / 1000 ); | |
| } | |
| // This is the last of the plain Javascript, bottom of the stack, so it gets executed last. By the time we get here, all the assets and javascript outside of document.ready have been loaded and run | |
| assetsLoaded(); | |
| // This adds one last function call to the very bottom of the document.ready stack that fires the pageRendered() function. By the time this runs, all scripts and libraries and everything have run, rendered, and been completed. | |
| $(window).bind('load',function() { | |
| pageRendered(); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment