surfnperf 1.1.0 → 1.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 0c65e50b4eeb919e418862f9841b3f3ed7e6dd80
-  data.tar.gz: 6e81022eac756e5eac332ebd2ed73a939f8d5488
+  metadata.gz: 3e499ab1d6b9b7d29973f1e10d460d421321cfb9
+  data.tar.gz: 1fcf4b9dd3948674360a60ec588978dafd2b227a
 SHA512:
-  metadata.gz: 2c411bcec8cf7ac6d148d0addb2074612ffac622078e9d0ba09cc363e1fabaa73dd80b74a99cea64c7e301abe86510b0167dc144b4b8e1143a1f107a40574062
-  data.tar.gz: 4f847eb324ef4a10c62a6c25d7bd3ebc8a30ea4083b34af78324f6126953677b0fd4725fd16836f03c46c8d128bb834e748ef4dd399351e7e402e8c587b4ab34
+  metadata.gz: 5cde83613540a1fefe3e35aa643468fd7b49e5097c32aaa1494b15b84a4e3955865452ab67237feb7254e572b546425f78f80b4355f80dfcb74733e362600756
+  data.tar.gz: f5a81ee7bd8296abd6968fd9f2f3306c6e3d761c76aa5fb1bf7330fd013b78deea3f798bf8a8e3de2713b1554e6a7120f189fa8bb5761976519b88bf10c76e8e

data/README.md

@@ -49,11 +49,26 @@ There are 2 pieces of code that need to be included in your webpage:
     }
   };
 
+  SURF_N_PERF.setFirstPaint = function() {
+    SURF_N_PERF.marks.firstPaintFrame = (new Date()).getTime();
+
+    if(window.performance && window.performance.now) {
+      SURF_N_PERF.highResMarks.firstPaintFrame = window.performance.now();
+      
+      if(window.performance.mark) {
+        window.performance.mark('firstPaintFrame');
+      }
+    }
+  };
+
   if(window.addEventListener) {
     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>
 ```
 
@@ -62,6 +77,7 @@ That provides support for the following:
 - "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).
 
 **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

@@ -23,9 +23,26 @@
     }
   };
 
+  SURF_N_PERF.setFirstPaint = function() {
+    SURF_N_PERF.marks.firstPaintFrame = (new Date()).getTime();
+
+    if(window.performance && window.performance.now) {
+      SURF_N_PERF.highResMarks.firstPaintFrame = window.performance.now();
+      
+      if(window.performance.mark) {
+        window.performance.mark('firstPaintFrame');
+      }
+    }
+  };
+
   if(window.addEventListener) {
     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

@@ -356,6 +356,52 @@
     return this.duration('navigationStart', 'loadEventEnd');
   };
 
+  /**
+   * Time to first paint (browser-reported time for the first pixels to be rendered on the page)
+   *
+   * @returns {integer} time in ms
+   * @memberOf SurfNPerf
+   */
+  SNPProto.getFirstPaint = function(options) {
+    if(this.chromeLoadTimes()) {
+      return this._roundedDuration(this.getTimingMark('navigationStart', 'DOM'), this.chromeLoadTimes().firstPaintTime * 1000, options);
+    } else if(this.msFirstPaint()) {
+      return this._roundedDuration(this.getTimingMark('navigationStart', 'DOM'), this.msFirstPaint(), options);
+    } else {
+      return null;
+    }
+  };
+
+  /**
+   * Time to first paint (Time calculated based on window.requestAnimationFrame() for the first pixels to be rendered on the page)
+   *
+   * @returns {integer} time in ms
+   * @memberOf SurfNPerf
+   */
+  SNPProto.getFirstPaintFrame = function(options) {
+    if(window.requestAnimationFrame) {
+      return this.duration('navigationStart', 'firstPaintFrame', options);
+    } else {
+      return null;
+    }
+  };
+
+  SNPProto.chromeLoadTimes = function() {
+    if(window.chrome && window.chrome.loadTimes) {
+      return window.chrome.loadTimes();
+    } else {
+      return undefined;
+    }
+  };
+
+  SNPProto.msFirstPaint = function() {
+    if(window.performance && window.performance.timing && window.performance.timing.msFirstPaint) {
+      return window.performance.timing.msFirstPaint;
+    } else {
+      return undefined;
+    }
+  };
+
   return new SurfNPerf();
 
 }));

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: surfnperf
 version: !ruby/object:Gem::Version
-  version: 1.1.0
+  version: 1.2.0
 platform: ruby
 authors:
 - John Riviello
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2015-11-13 00:00:00.000000000 Z
+date: 2015-12-03 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler