├── .gitignore
├── .npmignore
├── .travis.yml
├── _config.yml
├── dist
    └── time-to-interactive.min.js
├── index.html
├── index.js
├── package.json
├── readme.md
├── src
    └── index.js
└── webpack.config.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | webpack.config.js
3 | .travis.yml
4 | _config.yml
5 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 |   - 10
4 | 


--------------------------------------------------------------------------------
/_config.yml:
--------------------------------------------------------------------------------
1 | theme: jekyll-theme-slate


--------------------------------------------------------------------------------
/dist/time-to-interactive.min.js:
--------------------------------------------------------------------------------
1 | !function(n){var r={};function o(e){if(r[e])return r[e].exports;var t=r[e]={i:e,l:!1,exports:{}};return n[e].call(t.exports,t,t.exports,o),t.l=!0,t.exports}o.m=n,o.c=r,o.d=function(e,t,n){o.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(t,e){if(1&e&&(t=o(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(o.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)o.d(n,r,function(e){return t[e]}.bind(null,r));return n},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="",o(o.s=3)}([function(e,d,p){"use strict";(function(t){var e=p(2),n=setTimeout;function c(e){return Boolean(e&&void 0!==e.length)}function r(){}function i(e){if(!(this instanceof i))throw new TypeError("Promises must be constructed via new");if("function"!=typeof e)throw new TypeError("not a function");this._state=0,this._handled=!1,this._value=void 0,this._deferreds=[],l(e,this)}function o(n,r){for(;3===n._state;)n=n._value;0!==n._state?(n._handled=!0,i._immediateFn(function(){var e=1===n._state?r.onFulfilled:r.onRejected;if(null!==e){var t;try{t=e(n._value)}catch(e){return void u(r.promise,e)}a(r.promise,t)}else(1===n._state?a:u)(r.promise,n._value)})):n._deferreds.push(r)}function a(t,e){try{if(e===t)throw new TypeError("A promise cannot be resolved with itself.");if(e&&("object"==typeof e||"function"==typeof e)){var n=e.then;if(e instanceof i)return t._state=3,t._value=e,void s(t);if("function"==typeof n)return void l(function(e,t){return function(){e.apply(t,arguments)}}(n,e),t)}t._state=1,t._value=e,s(t)}catch(e){u(t,e)}}function u(e,t){e._state=2,e._value=t,s(e)}function s(e){2===e._state&&0===e._deferreds.length&&i._immediateFn(function(){e._handled||i._unhandledRejectionFn(e._value)});for(var t=0,n=e._deferreds.length;t<n;t++)o(e,e._deferreds[t]);e._deferreds=null}function f(e,t,n){this.onFulfilled="function"==typeof e?e:null,this.onRejected="function"==typeof t?t:null,this.promise=n}function l(e,t){var n=!1;try{e(function(e){n||(n=!0,a(t,e))},function(e){n||(n=!0,u(t,e))})}catch(e){if(n)return;n=!0,u(t,e)}}i.prototype.catch=function(e){return this.then(null,e)},i.prototype.then=function(e,t){var n=new this.constructor(r);return o(this,new f(e,t,n)),n},i.prototype.finally=e.a,i.all=function(t){return new i(function(r,o){if(!c(t))return o(new TypeError("Promise.all accepts an array"));var i=Array.prototype.slice.call(t);if(0===i.length)return r([]);var a=i.length;function u(t,e){try{if(e&&("object"==typeof e||"function"==typeof e)){var n=e.then;if("function"==typeof n)return void n.call(e,function(e){u(t,e)},o)}i[t]=e,0==--a&&r(i)}catch(e){o(e)}}for(var e=0;e<i.length;e++)u(e,i[e])})},i.resolve=function(t){return t&&"object"==typeof t&&t.constructor===i?t:new i(function(e){e(t)})},i.reject=function(n){return new i(function(e,t){t(n)})},i.race=function(o){return new i(function(e,t){if(!c(o))return t(new TypeError("Promise.race accepts an array"));for(var n=0,r=o.length;n<r;n++)i.resolve(o[n]).then(e,t)})},i._immediateFn="function"==typeof t&&function(e){t(e)}||function(e){n(e,0)},i._unhandledRejectionFn=function(e){"undefined"!=typeof console&&console&&console.warn("Possible Unhandled Promise Rejection:",e)},d.a=i}).call(this,p(4).setImmediate)},function(e,t){var n;n=function(){return this}();try{n=n||new Function("return this")()}catch(e){"object"==typeof window&&(n=window)}e.exports=n},function(e,t,n){"use strict";t.a=function(t){var n=this.constructor;return this.then(function(e){return n.resolve(t()).then(function(){return e})},function(e){return n.resolve(t()).then(function(){return n.reject(e)})})}},function(e,t,n){"use strict";n.r(t);var s,r,f=n(0),o=n(7);function l(){return parseFloat(r.loadEventEnd-r.navigationStart).toFixed(0)}function i(){var n=null,r=0,o=null,i=0,a=0,u=0,c=null;return new f.a(function(e,t){n=window.performance.now(),o=setInterval(function(){u++,55<window.performance.now()-n?(i=0,a++):0<parseInt(l())&&(100*parseInt(a/u)<=10?i++:i=0,i===s&&(r=u-i,clearInterval(o),c=parseInt(50*r),e(c))),n=window.performance.now()},50),setTimeout(function(){clearInterval(o),c||t()},6e4)})}s=parseInt(10),r=window.performance.timing,window.getReferentialTTI||(window.getReferentialTTI=function(){return new f.a(function(t,e){i().then(function(e){t(e)}).catch(function(){e("Could not calculate TTI within 60000ms")})})}),window.getPageTTI||(window.getPageTTI=new f.a(function(t,e){var n;"PerformanceLongTaskTiming"in window&&PerformanceObserver in window?((n=window.__tti={e:[]}).o=new PerformanceObserver(function(e){n.e=n.e.concat(e.getEntries())}),n.o.observe({entryTypes:["longtask"]}),o.getFirstConsistentlyInteractive().then(function(e){t(Math.max(e,l()))}).catch(function(){e("Could not calculate TTI within 60000ms")})):i().then(function(e){t(parseInt(l())+parseInt(e))}).catch(function(){e("Could not calculate TTI within 60000ms")})}))},function(e,o,i){(function(e){var t=void 0!==e&&e||"undefined"!=typeof self&&self||window,n=Function.prototype.apply;function r(e,t){this._id=e,this._clearFn=t}o.setTimeout=function(){return new r(n.call(setTimeout,t,arguments),clearTimeout)},o.setInterval=function(){return new r(n.call(setInterval,t,arguments),clearInterval)},o.clearTimeout=o.clearInterval=function(e){e&&e.close()},r.prototype.unref=r.prototype.ref=function(){},r.prototype.close=function(){this._clearFn.call(t,this._id)},o.enroll=function(e,t){clearTimeout(e._idleTimeoutId),e._idleTimeout=t},o.unenroll=function(e){clearTimeout(e._idleTimeoutId),e._idleTimeout=-1},o._unrefActive=o.active=function(e){clearTimeout(e._idleTimeoutId);var t=e._idleTimeout;0<=t&&(e._idleTimeoutId=setTimeout(function(){e._onTimeout&&e._onTimeout()},t))},i(5),o.setImmediate="undefined"!=typeof self&&self.setImmediate||void 0!==e&&e.setImmediate||this&&this.setImmediate,o.clearImmediate="undefined"!=typeof self&&self.clearImmediate||void 0!==e&&e.clearImmediate||this&&this.clearImmediate}).call(this,i(1))},function(e,t,n){(function(e,h){!function(n,r){"use strict";if(!n.setImmediate){var o,i,t,a,u=1,c={},s=!1,f=n.document,e=Object.getPrototypeOf&&Object.getPrototypeOf(n);e=e&&e.setTimeout?e:n,o="[object process]"==={}.toString.call(n.process)?function(e){h.nextTick(function(){d(e)})}:function(){if(n.postMessage&&!n.importScripts){var e=!0,t=n.onmessage;return n.onmessage=function(){e=!1},n.postMessage("","*"),n.onmessage=t,e}}()?(a="setImmediate$"+Math.random()+"$",n.addEventListener?n.addEventListener("message",p,!1):n.attachEvent("onmessage",p),function(e){n.postMessage(a+e,"*")}):n.MessageChannel?((t=new MessageChannel).port1.onmessage=function(e){d(e.data)},function(e){t.port2.postMessage(e)}):f&&"onreadystatechange"in f.createElement("script")?(i=f.documentElement,function(e){var t=f.createElement("script");t.onreadystatechange=function(){d(e),t.onreadystatechange=null,i.removeChild(t),t=null},i.appendChild(t)}):function(e){setTimeout(d,0,e)},e.setImmediate=function(e){"function"!=typeof e&&(e=new Function(""+e));for(var t=new Array(arguments.length-1),n=0;n<t.length;n++)t[n]=arguments[n+1];var r={callback:e,args:t};return c[u]=r,o(u),u++},e.clearImmediate=l}function l(e){delete c[e]}function d(e){if(s)setTimeout(d,0,e);else{var t=c[e];if(t){s=!0;try{!function(e){var t=e.callback,n=e.args;switch(n.length){case 0:t();break;case 1:t(n[0]);break;case 2:t(n[0],n[1]);break;case 3:t(n[0],n[1],n[2]);break;default:t.apply(r,n)}}(t)}finally{l(e),s=!1}}}}function p(e){e.source===n&&"string"==typeof e.data&&0===e.data.indexOf(a)&&d(+e.data.slice(a.length))}}("undefined"==typeof self?void 0===e?this:e:self)}).call(this,n(1),n(6))},function(e,t){var n,r,o=e.exports={};function i(){throw new Error("setTimeout has not been defined")}function a(){throw new Error("clearTimeout has not been defined")}function u(t){if(n===setTimeout)return setTimeout(t,0);if((n===i||!n)&&setTimeout)return n=setTimeout,setTimeout(t,0);try{return n(t,0)}catch(e){try{return n.call(null,t,0)}catch(e){return n.call(this,t,0)}}}!function(){try{n="function"==typeof setTimeout?setTimeout:i}catch(e){n=i}try{r="function"==typeof clearTimeout?clearTimeout:a}catch(e){r=a}}();var c,s=[],f=!1,l=-1;function d(){f&&c&&(f=!1,c.length?s=c.concat(s):l=-1,s.length&&p())}function p(){if(!f){var e=u(d);f=!0;for(var t=s.length;t;){for(c=s,s=[];++l<t;)c&&c[l].run();l=-1,t=s.length}c=null,f=!1,function(t){if(r===clearTimeout)return clearTimeout(t);if((r===a||!r)&&clearTimeout)return r=clearTimeout,clearTimeout(t);try{r(t)}catch(e){try{return r.call(null,t)}catch(e){return r.call(this,t)}}}(e)}}function h(e,t){this.fun=e,this.array=t}function m(){}o.nextTick=function(e){var t=new Array(arguments.length-1);if(1<arguments.length)for(var n=1;n<arguments.length;n++)t[n-1]=arguments[n];s.push(new h(e,t)),1!==s.length||f||u(p)},h.prototype.run=function(){this.fun.apply(null,this.array)},o.title="browser",o.browser=!0,o.env={},o.argv=[],o.version="",o.versions={},o.on=m,o.addListener=m,o.once=m,o.off=m,o.removeListener=m,o.removeAllListeners=m,o.emit=m,o.prependListener=m,o.prependOnceListener=m,o.listeners=function(e){return[]},o.binding=function(e){throw new Error("process.binding is not supported")},o.cwd=function(){return"/"},o.chdir=function(e){throw new Error("process.chdir is not supported")},o.umask=function(){return 0}},function(g,T,e){(function(y){var w;!function(){var n="undefined"!=typeof window&&window===this?this:void 0!==y&&null!=y?y:this,t="function"==typeof Object.defineProperties?Object.defineProperty:function(e,t,n){e!=Array.prototype&&e!=Object.prototype&&(e[t]=n.value)};function r(){r=function(){},n.Symbol||(n.Symbol=e)}var o=0;function e(e){return"jscomp_symbol_"+(e||"")+o++}function i(){r();var e=n.Symbol.iterator;e=e||(n.Symbol.iterator=n.Symbol("iterator")),"function"!=typeof Array.prototype[e]&&t(Array.prototype,e,{configurable:!0,writable:!0,value:function(){return a(this)}}),i=function(){}}function a(e){var t=0;return function(e){return i(),(e={next:e})[n.Symbol.iterator]=function(){return this},e}(function(){return t<e.length?{done:!1,value:e[t++]}:{done:!0}})}function u(e){i();var t=e[Symbol.iterator];return t?t.call(e):a(e)}function c(e){if(!(e instanceof Array)){e=u(e);for(var t,n=[];!(t=e.next()).done;)n.push(t.value);e=n}return e}var s=0;var f="img script iframe link audio video source".split(" ");function l(e,t){for(var n=(e=u(e)).next();!n.done;n=e.next())if(n=n.value,t.includes(n.nodeName.toLowerCase())||l(n.children,t))return!0;return!1}function d(e,t){if(2<e.length)return performance.now();for(var n=[],r=(t=u(t)).next();!r.done;r=t.next())r=r.value,n.push({timestamp:r.start,type:"requestStart"}),n.push({timestamp:r.end,type:"requestEnd"});for(r=(t=u(e)).next();!r.done;r=t.next())n.push({timestamp:r.value,type:"requestStart"});for(n.sort(function(e,t){return e.timestamp-t.timestamp}),e=e.length,t=n.length-1;0<=t;t--)switch(r=n[t],r.type){case"requestStart":e--;break;case"requestEnd":if(2<++e)return r.timestamp;break;default:throw Error("Internal Error: This should never happen")}return 0}function p(e){e=e||{},this.w=!!e.useMutationObserver,this.u=e.minValue||null,e=window.__tti&&window.__tti.e;var t=window.__tti&&window.__tti.o;this.a=e?e.map(function(e){return{start:e.startTime,end:e.startTime+e.duration}}):[],t&&t.disconnect(),this.b=[],this.f=new Map,this.j=null,this.v=-1/0,this.i=!1,this.h=this.c=this.s=null,function(o,i){var a=XMLHttpRequest.prototype.send,u=s++;XMLHttpRequest.prototype.send=function(e){for(var t=[],n=0;n<arguments.length;++n)t[n-0]=arguments[n];var r=this;return o(u),this.addEventListener("readystatechange",function(){4===r.readyState&&i(u)}),a.apply(this,t)}}(this.m.bind(this),this.l.bind(this)),function(i,a){var u=fetch;fetch=function(e){for(var o=[],t=0;t<arguments.length;++t)o[t-0]=arguments[t];return new Promise(function(t,n){var r=s++;i(r),u.apply(null,[].concat(c(o))).then(function(e){a(r),t(e)},function(e){a(e),n(e)})})}}(this.m.bind(this),this.l.bind(this)),function(r){r.c=new PerformanceObserver(function(e){for(var t=(e=u(e.getEntries())).next();!t.done;t=e.next())if("resource"===(t=t.value).entryType&&(r.b.push({start:t.fetchStart,end:t.responseEnd}),m(r,d(r.g,r.b)+5e3)),"longtask"===t.entryType){var n=t.startTime+t.duration;r.a.push({start:t.startTime,end:n}),m(r,n+5e3)}}),r.c.observe({entryTypes:["longtask","resource"]})}(this),this.w&&(this.h=function(n){var e=new MutationObserver(function(e){for(var t=(e=u(e)).next();!t.done;t=e.next())"childList"==(t=t.value).type&&l(t.addedNodes,f)?n(t):"attributes"==t.type&&f.includes(t.target.tagName.toLowerCase())&&n(t)});return e.observe(document,{attributes:!0,childList:!0,subtree:!0,attributeFilter:["href","src"]}),e}(this.B.bind(this)))}function h(e){e.i=!0;var t=0<e.a.length?e.a[e.a.length-1].end:0,n=d(e.g,e.b);m(e,Math.max(n+5e3,t))}function m(i,e){!i.i||i.v>e||(clearTimeout(i.j),i.j=setTimeout(function(){var e=performance.timing.navigationStart,t=d(i.g,i.b);e=(window.a&&window.a.A?1e3*window.a.A().C-e:0)||performance.timing.domContentLoadedEventEnd-e;if(i.u)var n=i.u;else n=performance.timing.domContentLoadedEventEnd?(n=performance.timing).domContentLoadedEventEnd-n.navigationStart:null;var r=performance.now();null===n&&m(i,Math.max(t+5e3,r+1e3));var o=i.a;(t=r-t<5e3?null:r-(t=o.length?o[o.length-1].end:e)<5e3?null:Math.max(t,n))&&(i.s(t),clearTimeout(i.j),i.i=!1,i.c&&i.c.disconnect(),i.h&&i.h.disconnect()),m(i,performance.now()+1e3)},e-performance.now()),i.v=e)}p.prototype.getFirstConsistentlyInteractive=function(){var t=this;return new Promise(function(e){t.s=e,"complete"==document.readyState?h(t):window.addEventListener("load",function(){h(t)})})},p.prototype.m=function(e){this.f.set(e,performance.now())},p.prototype.l=function(e){this.f.delete(e)},p.prototype.B=function(){m(this,performance.now()+5e3)},n.Object.defineProperties(p.prototype,{g:{configurable:!0,enumerable:!0,get:function(){return[].concat(c(this.f.values()))}}});var v={getFirstConsistentlyInteractive:function(e){return e=e||{},"PerformanceLongTaskTiming"in window?new p(e).getFirstConsistentlyInteractive():Promise.resolve(null)}};g.exports?g.exports=v:void 0===(w=function(){return v}.apply(T,[]))||(g.exports=w)}()}).call(this,e(1))}]);


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 
 3 | <head>
 4 |   <script src="dist/time-to-interactive.min.js"></script>
 5 |   <title>Time To Interactive</title>
 6 |   <style>
 7 |     body {
 8 |       padding: 0;
 9 |       margin: 0;
10 |     }
11 | 
12 |     header,
13 |     .page-header {
14 |       background: #000;
15 |       color: #fff;
16 |       width: calc(100% - 40px);
17 |       height: auto;
18 |       font-size: 16px;
19 |       padding: 20px;
20 |     }
21 | 
22 |     .content{
23 |       padding: 20px;
24 |     }
25 | 
26 |     footer {
27 |       position: absolute;
28 |       left: 0;
29 |       bottom: 0;
30 |       height: 30px;
31 |       width: 100%;
32 |       text-align: center;
33 |       background-color: #000;
34 |       color: #FFF;
35 |       padding: 10px;
36 |     }
37 |   </style>
38 | </head>
39 | 
40 | <body>
41 |   <div class="page-header">Time to Interactive</div>
42 |   <header>
43 |     Demo uses two APIs exposed in UMD fashion:<br /><br />
44 |     1. <strong>getPageTTI</strong>: This is the time to interactive value reported for the entire page.<br />
45 |     2. <strong>getReferentialTTI</strong>: This is the time to interactive value reported for an action, this could be
46 |     a click action, route navigation for single page applications etc.
47 |   </header>
48 |   <div class="content">
49 |     <div>Time to Interactive for the page: </div><span id='tti'></span>
50 |     <br /><br />
51 |     <div>Time to Interacive for the action: </div><span id='rtti'></span>
52 |     <br /><br />
53 |     <button onclick="changeFrame()" style="height: 25px; width: auto">Perform Action</button>
54 |     <br /><br />
55 |     <div id='frameContent'>
56 |       <iframe width="560" height="315" src="https://www.youtube.com/embed/lWtMjkAQa9w" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
57 |         allowfullscreen></iframe>
58 |     </div>
59 |     <script>
60 |       window.getPageTTI.then(function (e) {
61 |         document.querySelector('#tti').innerHTML = e + "ms";
62 |       });
63 |       var changeFrame = function () {
64 |         getReferentialTTI().then(function (e) {
65 |           document.querySelector('#rtti').innerHTML = e + "ms";
66 |         });
67 |         document.querySelector('#frameContent').innerHTML = '<iframe width="560" height="315" src="https://www.youtube.com/embed/jjJ7Qi1MLVQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';
68 |       }
69 |     </script>
70 |   </div>
71 |   <footer>
72 |     Source Code: <a style="color:#FFF" href="https://github.com/gauravbehere/time-to-interactive">https://github.com/gauravbehere/time-to-interactive</a>
73 |   </footer>
74 | </body>
75 | 
76 | </html>


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | !function(n){var r={};function o(e){if(r[e])return r[e].exports;var t=r[e]={i:e,l:!1,exports:{}};return n[e].call(t.exports,t,t.exports,o),t.l=!0,t.exports}o.m=n,o.c=r,o.d=function(e,t,n){o.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(t,e){if(1&e&&(t=o(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(o.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)o.d(n,r,function(e){return t[e]}.bind(null,r));return n},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="",o(o.s=3)}([function(e,d,p){"use strict";(function(t){var e=p(2),n=setTimeout;function c(e){return Boolean(e&&void 0!==e.length)}function r(){}function i(e){if(!(this instanceof i))throw new TypeError("Promises must be constructed via new");if("function"!=typeof e)throw new TypeError("not a function");this._state=0,this._handled=!1,this._value=void 0,this._deferreds=[],l(e,this)}function o(n,r){for(;3===n._state;)n=n._value;0!==n._state?(n._handled=!0,i._immediateFn(function(){var e=1===n._state?r.onFulfilled:r.onRejected;if(null!==e){var t;try{t=e(n._value)}catch(e){return void u(r.promise,e)}a(r.promise,t)}else(1===n._state?a:u)(r.promise,n._value)})):n._deferreds.push(r)}function a(t,e){try{if(e===t)throw new TypeError("A promise cannot be resolved with itself.");if(e&&("object"==typeof e||"function"==typeof e)){var n=e.then;if(e instanceof i)return t._state=3,t._value=e,void s(t);if("function"==typeof n)return void l(function(e,t){return function(){e.apply(t,arguments)}}(n,e),t)}t._state=1,t._value=e,s(t)}catch(e){u(t,e)}}function u(e,t){e._state=2,e._value=t,s(e)}function s(e){2===e._state&&0===e._deferreds.length&&i._immediateFn(function(){e._handled||i._unhandledRejectionFn(e._value)});for(var t=0,n=e._deferreds.length;t<n;t++)o(e,e._deferreds[t]);e._deferreds=null}function f(e,t,n){this.onFulfilled="function"==typeof e?e:null,this.onRejected="function"==typeof t?t:null,this.promise=n}function l(e,t){var n=!1;try{e(function(e){n||(n=!0,a(t,e))},function(e){n||(n=!0,u(t,e))})}catch(e){if(n)return;n=!0,u(t,e)}}i.prototype.catch=function(e){return this.then(null,e)},i.prototype.then=function(e,t){var n=new this.constructor(r);return o(this,new f(e,t,n)),n},i.prototype.finally=e.a,i.all=function(t){return new i(function(r,o){if(!c(t))return o(new TypeError("Promise.all accepts an array"));var i=Array.prototype.slice.call(t);if(0===i.length)return r([]);var a=i.length;function u(t,e){try{if(e&&("object"==typeof e||"function"==typeof e)){var n=e.then;if("function"==typeof n)return void n.call(e,function(e){u(t,e)},o)}i[t]=e,0==--a&&r(i)}catch(e){o(e)}}for(var e=0;e<i.length;e++)u(e,i[e])})},i.resolve=function(t){return t&&"object"==typeof t&&t.constructor===i?t:new i(function(e){e(t)})},i.reject=function(n){return new i(function(e,t){t(n)})},i.race=function(o){return new i(function(e,t){if(!c(o))return t(new TypeError("Promise.race accepts an array"));for(var n=0,r=o.length;n<r;n++)i.resolve(o[n]).then(e,t)})},i._immediateFn="function"==typeof t&&function(e){t(e)}||function(e){n(e,0)},i._unhandledRejectionFn=function(e){"undefined"!=typeof console&&console&&console.warn("Possible Unhandled Promise Rejection:",e)},d.a=i}).call(this,p(4).setImmediate)},function(e,t){var n;n=function(){return this}();try{n=n||new Function("return this")()}catch(e){"object"==typeof window&&(n=window)}e.exports=n},function(e,t,n){"use strict";t.a=function(t){var n=this.constructor;return this.then(function(e){return n.resolve(t()).then(function(){return e})},function(e){return n.resolve(t()).then(function(){return n.reject(e)})})}},function(e,t,n){"use strict";n.r(t);var s,r,f=n(0),o=n(7);function l(){return parseFloat(r.loadEventEnd-r.navigationStart).toFixed(0)}function i(){var n=null,r=0,o=null,i=0,a=0,u=0,c=null;return new f.a(function(e,t){n=window.performance.now(),o=setInterval(function(){u++,55<window.performance.now()-n?(i=0,a++):0<parseInt(l())&&(100*parseInt(a/u)<=10?i++:i=0,i===s&&(r=u-i,clearInterval(o),c=parseInt(50*r),e(c))),n=window.performance.now()},50),setTimeout(function(){clearInterval(o),c||t()},6e4)})}s=parseInt(10),r=window.performance.timing,window.getReferentialTTI||(window.getReferentialTTI=function(){return new f.a(function(t,e){i().then(function(e){t(e)}).catch(function(){e("Could not calculate TTI within 60000ms")})})}),window.getPageTTI||(window.getPageTTI=new f.a(function(t,e){var n;"PerformanceLongTaskTiming"in window&&PerformanceObserver in window?((n=window.__tti={e:[]}).o=new PerformanceObserver(function(e){n.e=n.e.concat(e.getEntries())}),n.o.observe({entryTypes:["longtask"]}),o.getFirstConsistentlyInteractive().then(function(e){t(Math.max(e,l()))}).catch(function(){e("Could not calculate TTI within 60000ms")})):i().then(function(e){t(parseInt(l())+parseInt(e))}).catch(function(){e("Could not calculate TTI within 60000ms")})}))},function(e,o,i){(function(e){var t=void 0!==e&&e||"undefined"!=typeof self&&self||window,n=Function.prototype.apply;function r(e,t){this._id=e,this._clearFn=t}o.setTimeout=function(){return new r(n.call(setTimeout,t,arguments),clearTimeout)},o.setInterval=function(){return new r(n.call(setInterval,t,arguments),clearInterval)},o.clearTimeout=o.clearInterval=function(e){e&&e.close()},r.prototype.unref=r.prototype.ref=function(){},r.prototype.close=function(){this._clearFn.call(t,this._id)},o.enroll=function(e,t){clearTimeout(e._idleTimeoutId),e._idleTimeout=t},o.unenroll=function(e){clearTimeout(e._idleTimeoutId),e._idleTimeout=-1},o._unrefActive=o.active=function(e){clearTimeout(e._idleTimeoutId);var t=e._idleTimeout;0<=t&&(e._idleTimeoutId=setTimeout(function(){e._onTimeout&&e._onTimeout()},t))},i(5),o.setImmediate="undefined"!=typeof self&&self.setImmediate||void 0!==e&&e.setImmediate||this&&this.setImmediate,o.clearImmediate="undefined"!=typeof self&&self.clearImmediate||void 0!==e&&e.clearImmediate||this&&this.clearImmediate}).call(this,i(1))},function(e,t,n){(function(e,h){!function(n,r){"use strict";if(!n.setImmediate){var o,i,t,a,u=1,c={},s=!1,f=n.document,e=Object.getPrototypeOf&&Object.getPrototypeOf(n);e=e&&e.setTimeout?e:n,o="[object process]"==={}.toString.call(n.process)?function(e){h.nextTick(function(){d(e)})}:function(){if(n.postMessage&&!n.importScripts){var e=!0,t=n.onmessage;return n.onmessage=function(){e=!1},n.postMessage("","*"),n.onmessage=t,e}}()?(a="setImmediate$"+Math.random()+"$",n.addEventListener?n.addEventListener("message",p,!1):n.attachEvent("onmessage",p),function(e){n.postMessage(a+e,"*")}):n.MessageChannel?((t=new MessageChannel).port1.onmessage=function(e){d(e.data)},function(e){t.port2.postMessage(e)}):f&&"onreadystatechange"in f.createElement("script")?(i=f.documentElement,function(e){var t=f.createElement("script");t.onreadystatechange=function(){d(e),t.onreadystatechange=null,i.removeChild(t),t=null},i.appendChild(t)}):function(e){setTimeout(d,0,e)},e.setImmediate=function(e){"function"!=typeof e&&(e=new Function(""+e));for(var t=new Array(arguments.length-1),n=0;n<t.length;n++)t[n]=arguments[n+1];var r={callback:e,args:t};return c[u]=r,o(u),u++},e.clearImmediate=l}function l(e){delete c[e]}function d(e){if(s)setTimeout(d,0,e);else{var t=c[e];if(t){s=!0;try{!function(e){var t=e.callback,n=e.args;switch(n.length){case 0:t();break;case 1:t(n[0]);break;case 2:t(n[0],n[1]);break;case 3:t(n[0],n[1],n[2]);break;default:t.apply(r,n)}}(t)}finally{l(e),s=!1}}}}function p(e){e.source===n&&"string"==typeof e.data&&0===e.data.indexOf(a)&&d(+e.data.slice(a.length))}}("undefined"==typeof self?void 0===e?this:e:self)}).call(this,n(1),n(6))},function(e,t){var n,r,o=e.exports={};function i(){throw new Error("setTimeout has not been defined")}function a(){throw new Error("clearTimeout has not been defined")}function u(t){if(n===setTimeout)return setTimeout(t,0);if((n===i||!n)&&setTimeout)return n=setTimeout,setTimeout(t,0);try{return n(t,0)}catch(e){try{return n.call(null,t,0)}catch(e){return n.call(this,t,0)}}}!function(){try{n="function"==typeof setTimeout?setTimeout:i}catch(e){n=i}try{r="function"==typeof clearTimeout?clearTimeout:a}catch(e){r=a}}();var c,s=[],f=!1,l=-1;function d(){f&&c&&(f=!1,c.length?s=c.concat(s):l=-1,s.length&&p())}function p(){if(!f){var e=u(d);f=!0;for(var t=s.length;t;){for(c=s,s=[];++l<t;)c&&c[l].run();l=-1,t=s.length}c=null,f=!1,function(t){if(r===clearTimeout)return clearTimeout(t);if((r===a||!r)&&clearTimeout)return r=clearTimeout,clearTimeout(t);try{r(t)}catch(e){try{return r.call(null,t)}catch(e){return r.call(this,t)}}}(e)}}function h(e,t){this.fun=e,this.array=t}function m(){}o.nextTick=function(e){var t=new Array(arguments.length-1);if(1<arguments.length)for(var n=1;n<arguments.length;n++)t[n-1]=arguments[n];s.push(new h(e,t)),1!==s.length||f||u(p)},h.prototype.run=function(){this.fun.apply(null,this.array)},o.title="browser",o.browser=!0,o.env={},o.argv=[],o.version="",o.versions={},o.on=m,o.addListener=m,o.once=m,o.off=m,o.removeListener=m,o.removeAllListeners=m,o.emit=m,o.prependListener=m,o.prependOnceListener=m,o.listeners=function(e){return[]},o.binding=function(e){throw new Error("process.binding is not supported")},o.cwd=function(){return"/"},o.chdir=function(e){throw new Error("process.chdir is not supported")},o.umask=function(){return 0}},function(g,T,e){(function(y){var w;!function(){var n="undefined"!=typeof window&&window===this?this:void 0!==y&&null!=y?y:this,t="function"==typeof Object.defineProperties?Object.defineProperty:function(e,t,n){e!=Array.prototype&&e!=Object.prototype&&(e[t]=n.value)};function r(){r=function(){},n.Symbol||(n.Symbol=e)}var o=0;function e(e){return"jscomp_symbol_"+(e||"")+o++}function i(){r();var e=n.Symbol.iterator;e=e||(n.Symbol.iterator=n.Symbol("iterator")),"function"!=typeof Array.prototype[e]&&t(Array.prototype,e,{configurable:!0,writable:!0,value:function(){return a(this)}}),i=function(){}}function a(e){var t=0;return function(e){return i(),(e={next:e})[n.Symbol.iterator]=function(){return this},e}(function(){return t<e.length?{done:!1,value:e[t++]}:{done:!0}})}function u(e){i();var t=e[Symbol.iterator];return t?t.call(e):a(e)}function c(e){if(!(e instanceof Array)){e=u(e);for(var t,n=[];!(t=e.next()).done;)n.push(t.value);e=n}return e}var s=0;var f="img script iframe link audio video source".split(" ");function l(e,t){for(var n=(e=u(e)).next();!n.done;n=e.next())if(n=n.value,t.includes(n.nodeName.toLowerCase())||l(n.children,t))return!0;return!1}function d(e,t){if(2<e.length)return performance.now();for(var n=[],r=(t=u(t)).next();!r.done;r=t.next())r=r.value,n.push({timestamp:r.start,type:"requestStart"}),n.push({timestamp:r.end,type:"requestEnd"});for(r=(t=u(e)).next();!r.done;r=t.next())n.push({timestamp:r.value,type:"requestStart"});for(n.sort(function(e,t){return e.timestamp-t.timestamp}),e=e.length,t=n.length-1;0<=t;t--)switch(r=n[t],r.type){case"requestStart":e--;break;case"requestEnd":if(2<++e)return r.timestamp;break;default:throw Error("Internal Error: This should never happen")}return 0}function p(e){e=e||{},this.w=!!e.useMutationObserver,this.u=e.minValue||null,e=window.__tti&&window.__tti.e;var t=window.__tti&&window.__tti.o;this.a=e?e.map(function(e){return{start:e.startTime,end:e.startTime+e.duration}}):[],t&&t.disconnect(),this.b=[],this.f=new Map,this.j=null,this.v=-1/0,this.i=!1,this.h=this.c=this.s=null,function(o,i){var a=XMLHttpRequest.prototype.send,u=s++;XMLHttpRequest.prototype.send=function(e){for(var t=[],n=0;n<arguments.length;++n)t[n-0]=arguments[n];var r=this;return o(u),this.addEventListener("readystatechange",function(){4===r.readyState&&i(u)}),a.apply(this,t)}}(this.m.bind(this),this.l.bind(this)),function(i,a){var u=fetch;fetch=function(e){for(var o=[],t=0;t<arguments.length;++t)o[t-0]=arguments[t];return new Promise(function(t,n){var r=s++;i(r),u.apply(null,[].concat(c(o))).then(function(e){a(r),t(e)},function(e){a(e),n(e)})})}}(this.m.bind(this),this.l.bind(this)),function(r){r.c=new PerformanceObserver(function(e){for(var t=(e=u(e.getEntries())).next();!t.done;t=e.next())if("resource"===(t=t.value).entryType&&(r.b.push({start:t.fetchStart,end:t.responseEnd}),m(r,d(r.g,r.b)+5e3)),"longtask"===t.entryType){var n=t.startTime+t.duration;r.a.push({start:t.startTime,end:n}),m(r,n+5e3)}}),r.c.observe({entryTypes:["longtask","resource"]})}(this),this.w&&(this.h=function(n){var e=new MutationObserver(function(e){for(var t=(e=u(e)).next();!t.done;t=e.next())"childList"==(t=t.value).type&&l(t.addedNodes,f)?n(t):"attributes"==t.type&&f.includes(t.target.tagName.toLowerCase())&&n(t)});return e.observe(document,{attributes:!0,childList:!0,subtree:!0,attributeFilter:["href","src"]}),e}(this.B.bind(this)))}function h(e){e.i=!0;var t=0<e.a.length?e.a[e.a.length-1].end:0,n=d(e.g,e.b);m(e,Math.max(n+5e3,t))}function m(i,e){!i.i||i.v>e||(clearTimeout(i.j),i.j=setTimeout(function(){var e=performance.timing.navigationStart,t=d(i.g,i.b);e=(window.a&&window.a.A?1e3*window.a.A().C-e:0)||performance.timing.domContentLoadedEventEnd-e;if(i.u)var n=i.u;else n=performance.timing.domContentLoadedEventEnd?(n=performance.timing).domContentLoadedEventEnd-n.navigationStart:null;var r=performance.now();null===n&&m(i,Math.max(t+5e3,r+1e3));var o=i.a;(t=r-t<5e3?null:r-(t=o.length?o[o.length-1].end:e)<5e3?null:Math.max(t,n))&&(i.s(t),clearTimeout(i.j),i.i=!1,i.c&&i.c.disconnect(),i.h&&i.h.disconnect()),m(i,performance.now()+1e3)},e-performance.now()),i.v=e)}p.prototype.getFirstConsistentlyInteractive=function(){var t=this;return new Promise(function(e){t.s=e,"complete"==document.readyState?h(t):window.addEventListener("load",function(){h(t)})})},p.prototype.m=function(e){this.f.set(e,performance.now())},p.prototype.l=function(e){this.f.delete(e)},p.prototype.B=function(){m(this,performance.now()+5e3)},n.Object.defineProperties(p.prototype,{g:{configurable:!0,enumerable:!0,get:function(){return[].concat(c(this.f.values()))}}});var v={getFirstConsistentlyInteractive:function(e){return e=e||{},"PerformanceLongTaskTiming"in window?new p(e).getFirstConsistentlyInteractive():Promise.resolve(null)}};g.exports?g.exports=v:void 0===(w=function(){return v}.apply(T,[]))||(g.exports=w)}()}).call(this,e(1))}]);


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "time-to-interactive",
 3 |   "version": "3.0.0",
 4 |   "description": "Utility to report time to interactive for Real User Monitoring (RUM)",
 5 |   "main": "index.js",
 6 |   "repository": {
 7 |     "type": "git",
 8 |     "url": "https://github.com/gauravbehere/time-to-interactive.git"
 9 |   },
10 |   "homepage": "https://gauravbehere.github.io/time-to-interactive/",
11 |   "keywords": [
12 |     "time to interactive",
13 |     "performance mertic",
14 |     "RUM",
15 |     "Real User Monitoring",
16 |     "web performance",
17 |     "cpu busy cycles"
18 |   ],
19 |   "scripts": {
20 |     "test":  "npm run build",
21 |     "build": "webpack"
22 |   },
23 |   "author": "Gaurav Behere, gaurav.techgeek@gmail.com",
24 |   "email": "gaurav.techgeek@gmail.com",
25 |   "license": "ISC",
26 |   "dependencies": {
27 |     "promise-polyfill": "^8.1.3",
28 |     "tti-polyfill": "^0.2.2"
29 |   },
30 |   "devDependencies": {
31 |     "@babel/core": "^7.5.5",
32 |     "@babel/preset-env": "^7.5.5",
33 |     "babel-loader": "^8.0.6",
34 |     "filemanager-webpack-plugin": "^2.0.5",
35 |     "uglifyjs-webpack-plugin": "^2.2.0",
36 |     "webpack": "^4.39.3",
37 |     "webpack-cli": "^3.3.7"
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
 1 | # time-to-interactive
 2 | ![alt text](https://www.zauca.com/wp-content/uploads/Why-Webpage-Speed-is-Important-Factor.png)
 3 | 
 4 | ---
 5 | 
 6 | Utility to report time to interactive(tti) for Real User Monitoring (RUM) for web applications
 7 | 
 8 | [![npm version](https://badge.fury.io/js/time-to-interactive.svg)](https://badge.fury.io/js/time-to-interactive)
 9 | [![Build Status](https://travis-ci.org/gauravbehere/time-to-interactive.svg?branch=master)](https://travis-ci.org/gauravbehere/time-to-interactive)
10 | 
11 | #### Demo
12 | https://gauravbehere.github.io/time-to-interactive/
13 | 
14 | ###  APIs
15 | #### window.getPageTTI
16 | Contains a promise which on resolution reports the TTI value for the page.
17 | #### window.getReferentialTTI()
18 | Calling this on an event returns a promise which on resolution reports TTI for that event.
19 | > Referential TTI can be fired from the click event, route navigations when you render a component or an event after which you want to check how much is the time to interactive for that action
20 | 
21 | ### Algorithm
22 | Basic idea is to make use of LongTask API to see if CPU was busy & report time to interactive based on 
23 | the number of CPU cycles for which CPU was busy.
24 | ##### Steps:
25 |  1. First attempt is to see if PerformanceLongTaskTiming is available in window.
26 |  2. If it is available we report TTI as reported by tti-polyfill.
27 |  3. There are instances where TTI reported by tti-polyfill is less than time for loadEventEnd, thus we return max of the two.
28 | 4. If PerformanceLongTaskTiming is not available we fall back to manual polling to check if CPU is busy.
29 | 5. As we get a window of 500ms for which CPU was idle, we report TTI based on the number of cycles we had to wait to see an idle 500ms window.
30 | 6. We look for the idle window after loadEventEnd has happened so that we are also waiting for network idle state.
31 | 
32 | 
33 | ### Usage
34 | 
35 | ##### Including the library
36 | ___
37 | ```javascript
38 | <script src="/path/to/time-to-interactive.min.js"></script>
39 | ```
40 | or
41 | ```javascript
42 | npm i "time-to-interactive"
43 | require('time-to-interactive');
44 | ```
45 | ##### Consuming the APIs
46 | ___
47 | ```javascript
48 |  window.getPageTTI.then(data => //data is the TTI value for the page)
49 |  ```
50 |  ```javascript
51 |  window.getReferentialTTI().then(data => //data is the TTI value for a section/component)
52 |  ```
53 | 
54 | #### This metrics can be send to custom analytics integrations like Google Analytics to capture RUM data at large scale.
55 | 
56 | 
57 | 
58 | ### Browser Compatibility
59 | As it includes polyfill for Promises & tti-polyfill, there is no browser based compatibility matrix as such.
60 | Tested with Chrome, Mozilla Firefox, Safari, Edge & IE
61 | 
62 | 
63 | 
64 | ### A word from the author
65 | The term, time to interactive can be subjective & there could be different ways to approach it.
66 | I have tried to get a balance between how Google Chrome's lighthouse does it & how it is done by Akamai's Boomerang. Research & analysis of statstics reported as TTI suggests that, it can vary drastically between browses & platforms. As the LongTaskAPI is yet to be standardized by the browsers, we rely on manual polling to see if CPU was busy.
67 | I also recommend usage of another metric which is "first-input-delay", which is quite a standard now.
68 | 
69 | #### Licence
70 | MIT
71 | 
72 | Author: Gaurav Behere, gaurav.techgeek@gmail.com
73 | 
74 | Feel free to raise a PR, if you see a scope of improvement :)
75 | 
76 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Time to interactive
  3 |  * Utility to report time to interactive for Real User Monitoring (RUM)
  4 |  * 
  5 |  * Usage: 
  6 |  * window.getPageTTI.then(data => //data is the TTI value for the page)
  7 |  * window.getReferentialTTI().then(data => //data is the TTI value for a section/component)
  8 |  * 
  9 |  * Referential TTI can be fired from the click event, route navigations when you render a component or an event 
 10 |  * after which you want to check how much is the time to interactive for that action
 11 |  * 
 12 |  * Basic idea is to make use of LongTask API to see if CPU was busy & report time to interactive based on 
 13 |  * the number of CPU cycles for which CPU was busy.
 14 |  * 
 15 |  * Algorithm:
 16 |  * 1. First attempt is to see if PerformanceLongTaskTiming is available in window.
 17 |  * 2. If it is available we report TTI as max of time to load & TTI reported by tti-polyfill.
 18 |  * 3. There are instances where TTI reported by tti-polyfill is less than time for loadEventEnd, thus we return a max of the two.
 19 |  * 4. If PerformanceLongTaskTiming is not available we fall back to manual polling to check if CPU is busy.
 20 |  * 5. As we get a window of 500ms for which CPU was idle, 
 21 |  *    we report TTI based on the number of cycles we had to wait to see a idle 500ms window.
 22 |  * 6. We look for the idle window after loadEventEnd has happened so that we are also waiting network idle state.
 23 |  */
 24 | 
 25 | import Promise from 'promise-polyfill';
 26 | const ttiPolyfill = require('tti-polyfill/tti-polyfill');
 27 | 
 28 | (function () {
 29 | 
 30 |   // Time threshold, if met we declare that we are not able to report TTI
 31 |   const TTI_THRESHOLD_TIME = 60000;
 32 | 
 33 |   /**
 34 |    * https://w3c.github.io/longtasks/#report-long-tasks
 35 |    */
 36 |   const CPU_BUSY_POLLING_INTERVAL = 50;
 37 | 
 38 |   // Adding a margin to allow IE/EDGE to clamp polling
 39 |   const CPU_BUSY_ALLOWED_DEVIATION = 5;
 40 | 
 41 |   /**
 42 |    * https://developer.akamai.com/tools/boomerang/docs/BOOMR.plugins.Continuity.html#toc10__anchor
 43 |    */
 44 |   const CPU_IDLE_TTI_WINDOW = 500;
 45 | 
 46 |   const MIN_CPU_IDLE_INTERVALS = parseInt(CPU_IDLE_TTI_WINDOW / CPU_BUSY_POLLING_INTERVAL);
 47 | 
 48 |   const timing = window.performance.timing;
 49 | 
 50 |   const getLoadTime = function () {
 51 |     //If load has not happened, the returned value will be negative
 52 |     return parseFloat(timing.loadEventEnd - timing.navigationStart).toFixed(0);
 53 |   }
 54 | 
 55 |   /**
 56 |    * Utility to check for how much time CPU is busy
 57 |    */
 58 |   const getCPUBusyInterval = () => {
 59 |     let previousHit = null;
 60 |     let noOfCyclesCPUWasBusy = 0;
 61 |     let longTaskPollInterval = null;
 62 |     let successIntervals = 0;
 63 |     let busyIntervals = 0;
 64 |     let totalIntervals = 0;
 65 |     let busyTime = null;
 66 |     return new Promise((resolve, reject) => {
 67 |       const checkIfCPUIsBusy = () => {
 68 |         totalIntervals++;
 69 |         let timeDiff = window.performance.now() - previousHit;
 70 |         if (timeDiff > (CPU_BUSY_POLLING_INTERVAL + CPU_BUSY_ALLOWED_DEVIATION)) {
 71 |           successIntervals = 0;
 72 |           busyIntervals++;
 73 |         }
 74 |         else {
 75 |           //If load has not happened, getLoadTime() will be negative, we need to continue polling 
 76 |           if (parseInt(getLoadTime()) > 0) {
 77 | 
 78 |             // If CPU busy % is <= 10%, we report success
 79 |             if (parseInt(busyIntervals / totalIntervals) * 100 <= 10) {
 80 |               successIntervals++;
 81 |             }
 82 |             else {
 83 |               successIntervals = 0;
 84 |             }
 85 | 
 86 |             if (successIntervals === MIN_CPU_IDLE_INTERVALS) {
 87 |               // For last successIntervals, CPU was idle & we need to subtract those intervals
 88 |               noOfCyclesCPUWasBusy = totalIntervals - successIntervals;
 89 |               clearInterval(longTaskPollInterval);
 90 |               busyTime = parseInt(noOfCyclesCPUWasBusy * CPU_BUSY_POLLING_INTERVAL);
 91 |               resolve(busyTime);
 92 |             }
 93 |           }
 94 |         }
 95 |         previousHit = window.performance.now();
 96 |       }
 97 |       previousHit = window.performance.now();
 98 |       longTaskPollInterval = setInterval(checkIfCPUIsBusy, CPU_BUSY_POLLING_INTERVAL);
 99 | 
100 |       setTimeout(() => {
101 |         clearInterval(longTaskPollInterval);
102 |         if (!busyTime) reject();
103 |       }, TTI_THRESHOLD_TIME);
104 |     });
105 |   }
106 | 
107 | 
108 |   /**
109 |    * adding getReferentialTTI to window, if not already present
110 |    */
111 |   if (!window.getReferentialTTI) {
112 |     window.getReferentialTTI = () => {
113 |       return new Promise((resolve, reject) => {
114 |         getCPUBusyInterval().then((busyTime) => {
115 |           resolve(busyTime);
116 |         }).catch(() => {
117 |           reject("Could not calculate TTI within " + TTI_THRESHOLD_TIME + "ms");
118 |         });
119 |       })
120 |     };
121 |   };
122 | 
123 | 
124 |   /**
125 |    * adding getPageTTI to window, if not already present
126 |    */
127 |   if (!window.getPageTTI) {
128 |     window.getPageTTI = (() => {
129 |       /*
130 |       * Using LongTask API if supported
131 |       */
132 |       return new Promise((resolve, reject) => {
133 |         if ('PerformanceLongTaskTiming' in window && PerformanceObserver in window) {
134 |           !function () {
135 |             let g = window.__tti = { e: [] };
136 |             g.o = new PerformanceObserver(function (l) { g.e = g.e.concat(l.getEntries()) });
137 |             g.o.observe({ entryTypes: ['longtask'] })
138 |           }();
139 |           ttiPolyfill.getFirstConsistentlyInteractive()
140 |             .then((data) => {
141 |               // This calculation makes sure that TTI can't be lesser than time for load(loadEventEnd)
142 |               resolve(Math.max(data, getLoadTime()));
143 |             }).catch(() => {
144 |               reject("Could not calculate TTI within " + TTI_THRESHOLD_TIME + "ms");
145 |             });;
146 |         }
147 |         else {
148 |           /**
149 |            * Falling back to manually polling for long tasks.
150 |            */
151 |           getCPUBusyInterval().then((busyTime) => {
152 |             // This calculation makes sure that TTI can't be lesser than time for load(loadEventEnd)
153 |             resolve(parseInt(getLoadTime()) + parseInt(busyTime));
154 |           }).catch(() => {
155 |             reject("Could not calculate TTI within " + TTI_THRESHOLD_TIME + "ms");
156 |           });
157 |         }
158 |       });
159 |     }
160 |     )();
161 |   }
162 | })();
163 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | const deployPath = path.resolve(__dirname, './dist');
 3 | const commonJSDeployPath = path.resolve(__dirname, '.');
 4 | const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 5 | const deployFile = 'time-to-interactive.min.js';
 6 | const FileManagerPlugin = require('filemanager-webpack-plugin');
 7 | 
 8 | module.exports = {
 9 |   entry: './src/index.js',
10 |   output: {
11 |     path: deployPath,
12 |     filename: deployFile
13 |   },
14 |   devtool: false,
15 |   mode: 'production',
16 |   module: {
17 |     rules: [
18 |       {
19 |         test: /\.js$/,
20 |         exclude: /node_modules/,
21 |         loader: 'babel-loader',
22 |         query: {
23 |           presets: ["@babel/preset-env"]
24 |         }
25 |       }
26 |     ]
27 |   },
28 |   optimization: {
29 |     minimizer: [new UglifyJsPlugin()],
30 |   },
31 |   plugins: [
32 |     new FileManagerPlugin({
33 |       onEnd: {
34 |         copy: [
35 |           { source: deployPath + '/' +  deployFile, destination: commonJSDeployPath + '/index.js' }
36 |         ]
37 |       }
38 |     })
39 |   ]
40 | }
41 | 


--------------------------------------------------------------------------------