Hopiu/jquery-mobile
1
0
Fork 0
mirror of https://github.com/Hopiu/jquery-mobile.git synced 2026-03-16 22:10:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

A simple bookmarklet that allows us to attach to a jQuery Mobile application and throw an alert that displays the load, enhancment, and transition times for a page the user navigates to.

Browse source
This commit is contained in:
jblas@adobe.com 2011-11-14 16:22:39 -08:00
parent ee779f29d6
commit b8dcdc9657
2 changed files with 85 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
tools/page-change-time.html Normal file
View file

@ -0,0 +1,24 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Page Change Timer Bookmarklet</title>
</head>
<body>
<h1>Page Event Logger Bookmarklet</h1>
<p>A simple bookmarklet for timing the load, enhanement, and transition of a jQuery Mobile changePage() request. To use, bookmark the following link:</p>
<script>
document.write('<p><a id="bookmarklet-link" href="javascript:function loadScript(u){var s=document.createElement(\'script\');s.setAttribute(\'language\',\'javascript\');s.setAttribute(\'src\',u);document.body.appendChild(s);} loadScript(\'' + ( location.href.replace( /\.html/, ".js" ) ) + '\');">Page Change Timing Bookmark</a></p>');
</script>
<p>For platforms that don't allow bookmarking of <code>javascript:</code> urls, you can copy/paste the following source for the bookmarklet directly into the browser's location bar then hit enter or hit the &quot;go&quot; button on your keypad:</p>
<p>
<textarea id="ta" rows="10" cols="50"></textarea>
</p>
<p>NOTE: Some browsers like Chrome will strip off the javascript: prefix from the string above when you paste it into the location bar. Make sure what you pasted is prefixed by javascript: before attempting to load the bookmarklet.</p>
<script>
document.getElementById("ta").value = document.getElementById("bookmarklet-link").href;
</script>
</body>
</html>

61
tools/page-change-time.js Normal file
View file

@ -0,0 +1,61 @@
/*!
* jQuery Mobile v@VERSION
* http://jquerymobile.com/
*
* Copyright 2011, jQuery Project
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*/
// This is code that can be used as a simple bookmarklet for timing
// the load, enhancment, and transition of a changePage() request.
(function( $, window, undefined ) {
function getTime() {
return ( new Date() ).getTime();
}
var startChange, stopChange, startLoad, stopLoad, startEnhance, stopEnhance, startTransition, stopTransition, lock = 0;
$( document )
.bind( "pagebeforechange", function( e, data) {
if ( typeof data.toPage === "string" ) {
startChange = stopChange = startLoad = stopLoad = startEnhance = stopEnhance = startTransition = stopTransition = getTime();
}
})
.bind( "pagebeforeload", function() {
startLoad = stopLoad = getTime();
})
.bind( "pagebeforecreate", function() {
if ( ++lock === 1 ) {
stopLoad = startEnhance = stopEnhance = getTime();
}
})
.bind( "pageinit", function() {
if ( --lock === 0 ) {
stopEnhance = getTime();
}
})
.bind( "pagebeforeshow", function() {
startTransition = stopTransition = getTime();
})
.bind( "pageshow", function() {
stopTransition = getTime();
})
.bind( "pagechange", function( e, data ) {
if ( typeof data.toPage === "object" ) {
stopChange = getTime();
alert("load + processing: " + ( stopLoad - startLoad )
+ "\nenhance: " + ( stopEnhance - startEnhance )
+ "\ntransition: " + ( stopTransition - startTransition )
+ "\ntotalTime: " + ( stopChange - startChange ) );
startChange = stopChange = startLoad = stopLoad = startEnhance = stopEnhance = startTransition = stopTransition = 0;
}
});
})( jQuery, window );