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.

jblas · jblas · commit b8dcdc96579c · 2011-11-14T16:22:39.000-08:00
diff --git a/tools/page-change-time.html b/tools/page-change-time.html
@@ -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>
diff --git a/tools/page-change-time.js b/tools/page-change-time.js
@@ -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 );
