Permalink
Browse files

A simple bookmarklet that allows us to attach to a jQuery Mobile appl…

…ication and throw an alert that displays the load, enhancment, and transition times for a page the user navigates to.
  • Loading branch information...
1 parent ee779f2 commit b8dcdc96579c4cc92dbfa185d37e61bbcd74775f @jblas jblas committed Nov 15, 2011
Showing with 85 additions and 0 deletions.
  1. +24 −0 tools/page-change-time.html
  2. +61 −0 tools/page-change-time.js
@@ -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>
@@ -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 );

0 comments on commit b8dcdc9

Please sign in to comment.