surfnperf 1.4.0 → 1.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 2ebf230cbfd8dc288c35183b576965432d010f93
-  data.tar.gz: 5ea5493fe01a15c3e89e310a85619c5a10f737c7
+  metadata.gz: 6e345d399d2630f3f58b9c21268597cf1d68beb9
+  data.tar.gz: 32baf5b753846d060524f9e195d87010251b5f2e
 SHA512:
-  metadata.gz: a7d39899a860a238186e9228f1b404ffee2a09cd79ef43f2e415153a10f685730d41eba4af6f66b6ad2e51b413b8bace3e567a5c831f47d1c5dfc7555dfb7874
-  data.tar.gz: 57d0f1897109c30d5f1e3a3084e8277ad826916b0b6e767947053d0c5c390e429f490f7fc1e0dd18d2b504c6bab63734b01de2e939919e81808e10d7e31bcdd4
+  metadata.gz: e53a18f7868588de15cb06dfc0b6dbcf9c89bca28ea6694047bbd68fb2fb4e6b26eb950cafb24c0aa39689535e7ced3bde9f378380168a3982d49fbf1e57fb9f
+  data.tar.gz: 0a711e5ab7c218d6274c94d2886e51814e15407cff9648dd08d8e337092ef7feea7775aaf0e0568c728bbb441309cb5d0db03f8dffc33463c701588315cefb87

data/README.md

@@ -1,7 +1,7 @@
-Surf-N-Perf 
+Surf-N-Perf
 ==============
 
-Micro-library for gathering frontend web page performance data. 
+Micro-library for gathering frontend web page performance data.
 
 Surf-N-Perf provides a simple to use API to gather [User Timing](http://www.w3.org/TR/user-timing/) and other important performance data in any browser.
 
@@ -41,6 +41,42 @@ There are 2 pieces of code that need to be included in your webpage:
     }
   }
 
+  SURF_N_PERF.visibility = {
+    initialState: document.visibilityState,
+    stateUpdates: [],
+    hiddenProperty: null,
+    stateProperty: null,
+    eventName: null,
+    markChange: function() {
+      var markName = 'visibility' + SURF_N_PERF.visibility.stateUpdates.length;
+
+      if (window.performance) {
+        if (window.performance.mark) {
+          window.performance.mark(markName);
+        }
+
+        if (window.performance.now) {
+          SURF_N_PERF.highResMarks[markName] = window.performance.now();
+        }
+      }
+
+      SURF_N_PERF.marks[markName] = new Date().getTime();
+
+      SURF_N_PERF.visibility.stateUpdates.push(document[SURF_N_PERF.visibility.stateProperty]);
+    },
+  };
+
+  if('hidden' in document) {
+    SURF_N_PERF.visibility.hiddenProperty = 'hidden';
+    SURF_N_PERF.visibility.stateProperty = 'visibilityState';
+    SURF_N_PERF.visibility.eventName = 'visibilitychange';
+  } else if('webkitHidden' in document) {
+    SURF_N_PERF.visibility.hiddenProperty = 'webkitHidden';
+    SURF_N_PERF.visibility.stateProperty = 'webkitVisibilityState';
+    SURF_N_PERF.visibility.eventName = 'webkitvisibilitychange';
+    SURF_N_PERF.visibility.initialState = document[SURF_N_PERF.visibility.stateProperty];
+  }
+
   SURF_N_PERF.setPageLoad = function() {
     SURF_N_PERF.marks.loadEventEnd = (new Date()).getTime();
 
@@ -54,7 +90,7 @@ There are 2 pieces of code that need to be included in your webpage:
 
     if(window.performance && window.performance.now) {
       SURF_N_PERF.highResMarks.firstPaintFrame = window.performance.now();
-      
+
       if(window.performance.mark) {
         window.performance.mark('firstPaintFrame');
       }
@@ -62,6 +98,9 @@ There are 2 pieces of code that need to be included in your webpage:
   };
 
   if(window.addEventListener) {
+    if (SURF_N_PERF.visibility.stateProperty) {
+      document.addEventListener(SURF_N_PERF.visibility.eventName, SURF_N_PERF.visibility.markChange, false);
+    }
     window.addEventListener('load', SURF_N_PERF.setPageLoad, false);
   } else {
     window.attachEvent('onload', SURF_N_PERF.setPageLoad);
@@ -73,11 +112,13 @@ There are 2 pieces of code that need to be included in your webpage:
 ```
 
 That provides support for the following:
-- A "pageStart" mark for browsers that do not support [Navigation Timing](http://www.w3.org/TR/navigation-timing/) which can be used to compute durations from when the page first started loading (specifically, this mark falls between the [domLoading](http://www.w3.org/TR/navigation-timing/#dom-performancetiming-domloading) and [domInteractive](http://www.w3.org/TR/navigation-timing/#dom-performancetiming-dominteractive) attributes of Navigation Timing)
-- "pageStart" marks for browsers that support [High Resolution Time](http://www.w3.org/TR/hr-time/) and/or [User Timing](http://www.w3.org/TR/user-timing/) so that "pageStart" can be used as a consistent starting point for duration calculations across all browsers regardless of their supported features
-- A "loadEventEnd" mark for browsers that do not support [Navigation Timing](http://www.w3.org/TR/navigation-timing/) which can be used to compute durations from when the load event of the document is completed ([loadEventEnd](http://www.w3.org/TR/navigation-timing/#dom-performancetiming-loadend))
-- A "loadEventEnd" [DOMHighResTimeStamp](http://www.w3.org/TR/hr-time/#sec-DOMHighResTimeStamp) mark for calculating high resolution durations between a Navigation Timing mark and a user mark in browsers that support [High Resolution Time](http://www.w3.org/TR/hr-time/) but don't support [User Timing](http://www.w3.org/TR/user-timing/)
-- A "firstPaintFrame" mark (available in the best possible format for the browser, either a [User Timing Mark](http://www.w3.org/TR/user-timing/#performancemark), [DOMHighResTimeStamp](http://www.w3.org/TR/hr-time/#sec-DOMHighResTimeStamp), or [DOMTimeStamp](https://developer.mozilla.org/en-US/docs/Web/API/DOMTimeStamp)) that approximates the Time To First Paint in browsers that [support `window.requestAnimationFrame`](http://caniuse.com/#feat=requestanimationframe).
+
+- A `"pageStart"` mark for browsers that do not support [Navigation Timing](http://www.w3.org/TR/navigation-timing/) which can be used to compute durations from when the page first started loading (specifically, this mark falls between the [`domLoading`](http://www.w3.org/TR/navigation-timing/#dom-performancetiming-domloading) and [`domInteractive`](http://www.w3.org/TR/navigation-timing/#dom-performancetiming-dominteractive) attributes of Navigation Timing)
+- `"pageStart"` marks for browsers that support [High Resolution Time](http://www.w3.org/TR/hr-time/) and/or [User Timing](http://www.w3.org/TR/user-timing/) so that `"pageStart"` can be used as a consistent starting point for duration calculations across all browsers regardless of their supported features
+- A `"loadEventEnd"` mark for browsers that do not support [Navigation Timing](http://www.w3.org/TR/navigation-timing/) which can be used to compute durations from when the load event of the document is completed ([`loadEventEnd`](http://www.w3.org/TR/navigation-timing/#dom-performancetiming-loadend))
+- A `"loadEventEnd"` [DOMHighResTimeStamp](http://www.w3.org/TR/hr-time/#sec-DOMHighResTimeStamp) mark for calculating high resolution durations between a Navigation Timing mark and a user mark in browsers that support [High Resolution Time](http://www.w3.org/TR/hr-time/) but don't support [User Timing](http://www.w3.org/TR/user-timing/)
+- A `"firstPaintFrame"` mark (available in the best possible format for the browser, either a [User Timing Mark](http://www.w3.org/TR/user-timing/#performancemark), [DOMHighResTimeStamp](http://www.w3.org/TR/hr-time/#sec-DOMHighResTimeStamp), or [DOMTimeStamp](https://developer.mozilla.org/en-US/docs/Web/API/DOMTimeStamp)) that approximates the Time To First Paint in browsers that [support `window.requestAnimationFrame`](http://caniuse.com/#feat=requestanimationframe).
+- The initial `visibilityState` as well as listeners for the `"visibilitychange"` event, enabling the ability to calculate how much time the page was hidden when you call `surfnperf.getHiddenTime()`. This is of particular importance as [Chrome as of version 57](https://developers.google.com/web/updates/2017/03/background_tabs) and [Firefox as of version 57](https://blog.mozilla.org/blog/2017/09/26/firefox-quantum-beta-developer-edition/) limit the resources assigned to background (hidden) tabs.
 
 **2.** Then just drop the [surfnperf.min.js](https://github.com/Comcast/Surf-N-Perf/blob/master/surfnperf.min.js) in your codebase and reference that JavaScript file in your HTML document. If you're using [RequireJS](http://requirejs.org/) or [Browserify](http://browserify.org/), it registers itself as 'surfnperf'.
 

data/app/views/surfnperf/_head.html.erb

@@ -15,6 +15,42 @@
     }
   }
 
+  SURF_N_PERF.visibility = {
+    initialState: document.visibilityState,
+    stateUpdates: [],
+    hiddenProperty: null,
+    stateProperty: null,
+    eventName: null,
+    markChange: function() {
+      var markName = 'visibility' + SURF_N_PERF.visibility.stateUpdates.length;
+
+      if (window.performance) {
+        if (window.performance.mark) {
+          window.performance.mark(markName);
+        }
+
+        if (window.performance.now) {
+          SURF_N_PERF.highResMarks[markName] = window.performance.now();
+        }
+      }
+
+      SURF_N_PERF.marks[markName] = new Date().getTime();
+
+      SURF_N_PERF.visibility.stateUpdates.push(document[SURF_N_PERF.visibility.stateProperty]);
+    },
+  };
+
+  if('hidden' in document) {
+    SURF_N_PERF.visibility.hiddenProperty = 'hidden';
+    SURF_N_PERF.visibility.stateProperty = 'visibilityState';
+    SURF_N_PERF.visibility.eventName = 'visibilitychange';
+  } else if('webkitHidden' in document) {
+    SURF_N_PERF.visibility.hiddenProperty = 'webkitHidden';
+    SURF_N_PERF.visibility.stateProperty = 'webkitVisibilityState';
+    SURF_N_PERF.visibility.eventName = 'webkitvisibilitychange';
+    SURF_N_PERF.visibility.initialState = document[SURF_N_PERF.visibility.stateProperty];
+  }
+
   SURF_N_PERF.setPageLoad = function() {
     SURF_N_PERF.marks.loadEventEnd = (new Date()).getTime();
 
@@ -28,7 +64,7 @@
 
     if(window.performance && window.performance.now) {
       SURF_N_PERF.highResMarks.firstPaintFrame = window.performance.now();
-      
+
       if(window.performance.mark) {
         window.performance.mark('firstPaintFrame');
       }
@@ -36,13 +72,14 @@
   };
 
   if(window.addEventListener) {
+    if (SURF_N_PERF.visibility.stateProperty) {
+      document.addEventListener(SURF_N_PERF.visibility.eventName, SURF_N_PERF.visibility.markChange, false);
+    }
     window.addEventListener('load', SURF_N_PERF.setPageLoad, false);
   } else {
     window.attachEvent('onload', SURF_N_PERF.setPageLoad);
   }
-
   if (window.requestAnimationFrame) {
     window.requestAnimationFrame(SURF_N_PERF.setFirstPaint);
   }
-
 </script>

data/vendor/assets/javascripts/surfnperf.js

@@ -262,37 +262,59 @@
     return this._round(b - a, options);
   };
 
-  SNPProto._measureName = function(a, b) {
-    return '_SNP_' + a + '_TO_' + b;
+  SNPProto._measureName = function(startMark, endMark) {
+    return '_SNP_' + startMark + '_TO_' + endMark;
   };
 
-  SNPProto._setMeasure = function(a, b) {
+  SNPProto._setMeasure = function(startMark, endMark) {
     try {
-      this.userTiming().measure(this._measureName(a, b), a, b);
+      this.userTiming().measure(this._measureName(startMark, endMark), startMark, endMark);
     } catch(e) {
       if(window.console && window.console.error) {
         if(e && e.message) {
           console.error("Surf-N-Perf Exception:", e.message);
         } else {
-          console.error("Surf-N-Perf Exception: at least one of these events/marks is not available yet", a, b);
+          console.error("Surf-N-Perf Exception: at least one of these events/marks is not available yet", startMark, endMark);
         }
       }
     }
   };
 
-  SNPProto._getMeasureDuration = function(a, b) {
-    var measure = this.userTiming().getEntriesByName(this._measureName(a, b))[0] || {};
+  SNPProto._getMeasureDuration = function(startMark, endMark) {
+    var measure = this.userTiming().getEntriesByName(this._measureName(startMark, endMark))[0] || {};
     return measure.duration;
   };
 
-  SNPProto.duration = function(a, b, options) {
+  /**
+   * Marks the current time
+   *
+   * @returns {String} name generated for the mark
+   * @memberOf SurfNPerf
+   */
+  SNPProto.markNow = function() {
+    var eventKey = '_NOW_' + this.now('DOM');
+    this.mark(eventKey);
+    return eventKey;
+  };
+
+  /**
+   * Returns the duration between two marks
+   *
+   * @param {String} startMark name of the first mark
+   * @param {String} [endMark] optional name of the second mark
+   * @returns {Number} duration between the two specified marks. If the endMark is not specified, returns the duration between the startMark and the current time
+   * @memberOf SurfNPerf
+   */
+  SNPProto.duration = function(startMark, endMark, options) {
+    endMark = endMark || this.markNow();
+
     if(this._userTiming) {
-      this._setMeasure(a, b);
-      return this._round(this._getMeasureDuration(a, b), options);
-    } else if(this._highResTime && a === 'navigationStart' && !this._isTimingMark(b)) {
-      return this._round(this.getMark(b), options);
+      this._setMeasure(startMark, endMark);
+      return this._round(this._getMeasureDuration(startMark, endMark), options);
+    } else if(this._highResTime && startMark === 'navigationStart' && !this._isTimingMark(endMark)) {
+      return this._round(this.getMark(endMark), options);
     } else {
-      return this._roundedDuration(this._getDurationMark(a), this._getDurationMark(b), options);
+      return this._roundedDuration(this._getDurationMark(startMark), this._getDurationMark(endMark), options);
     }
   };
 
@@ -446,6 +468,56 @@
     }
   };
 
+  /**
+   * Is the page hidden or not, as reported by the Page Visibility API
+   *
+   * @returns {boolean} true if the page is in a state considered to be hidden to the user, and false otherwise.
+   * @memberOf SurfNPerf
+   */
+  SNPProto.isHidden = function() {
+    if(SURF_N_PERF.visibility && SURF_N_PERF.visibility.hiddenProperty) {
+      return document[SURF_N_PERF.visibility.hiddenProperty];
+    } else {
+      return null;
+    }
+  };
+
+  /**
+   * Total time a page is not visible, as reported by the Page Visibility API
+   *
+   * @returns {integer} time in ms
+   * @memberOf SurfNPerf
+   */
+  SNPProto.getHiddenTime = function(options) {
+    var total = 0,
+      states = [],
+      i,
+      length,
+      getMarkName = function(index) {
+        return index === 0 ? 'navigationStart' : 'visibility' + (index - 1);
+      };
+
+    if(SURF_N_PERF.visibility && SURF_N_PERF.visibility.initialState && SURF_N_PERF.visibility.stateUpdates) {
+      states = states.concat(SURF_N_PERF.visibility.initialState, SURF_N_PERF.visibility.stateUpdates);
+      length = states.length;
+      for(i = 1; i < length; i++) {
+        if(states[i - 1] !== 'visible' && states[i] === 'visible') {
+          total += this.duration(getMarkName(i - 1), getMarkName(i), {
+            decimalPlaces: 10
+          });
+        }
+      }
+      if(states[length - 1] !== 'visible') {
+        total += this.duration(getMarkName(length - 1), null, {
+          decimalPlaces: 10
+        });
+      }
+      return this._round(total, options);
+    } else {
+      return null;
+    }
+  };
+
   return new SurfNPerf();
 
 }));

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: surfnperf
 version: !ruby/object:Gem::Version
-  version: 1.4.0
+  version: 1.5.0
 platform: ruby
 authors:
 - John Riviello
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-02-06 00:00:00.000000000 Z
+date: 2017-10-13 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -73,7 +73,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.6.10
+rubygems_version: 2.6.13
 signing_key: 
 specification_version: 4
 summary: Micro-library for gathering frontend web page performance data