Authored by htoooth

add perf

  1 +var cookies = require('../cookie');
  2 +var reporter = require('./reporter');
  3 +
  4 +var perfKey = '_perfLog';
  5 +
  6 +var navigatorPerf = require('./perf/navigator'),
  7 + resourcePerf = require('./perf/resource'),
  8 + screenPerf = require('./perf/screen'),
  9 + timingPerf = require('./perf/timing');
  10 +
  11 +var perfReporter = {
  12 + init: function() {
  13 + navigatorPerf.init();
  14 + resourcePerf.init();
  15 + screenPerf.init();
  16 + timingPerf.init();
  17 +
  18 + this.report();
  19 + },
  20 + collect: function() {
  21 + var navPerfData = navigatorPerf.collect();
  22 + var screenPerfData = screenPerf.collect();
  23 + var timingPerfData = timingPerf.collect();
  24 + var resourcePerfData = resourcePerfData.collect();
  25 +
  26 + this.write(navPerfData);
  27 + this.write(screenPerfData);
  28 + this.write(timingPerfData);
  29 + this.write(resourcePerfData);
  30 + },
  31 + write: function(item) {
  32 + var perfList = JSON.parse(cookies(perfKey) || '[]');
  33 +
  34 + perfList.push(item);
  35 +
  36 + cookies(perfKey, JSON.stringify(perfList));
  37 +
  38 + if (perfList.length >= 5) {
  39 + this.report();
  40 + }
  41 + },
  42 + report: function() {
  43 + var self = this;
  44 + var perfList = JSON.parse(cookies(perfKey) || '[]');
  45 + var perfStr = reporter.stringify(perfList);
  46 +
  47 + reporter.report(perfStr, function() {
  48 + self.clear();
  49 + });
  50 + },
  51 + clear: function() {
  52 + cookies(perfKey, '[]');
  53 + }
  54 +};
  55 +
  56 +if (window._perfEnable_) {
  57 + perfReporter.init();
  58 + perfReporter.collect();
  59 +}
  1 +
  2 +var navigatorReporter = {
  3 + init: function() {
  4 + if ( !('navigator' in window)) {
  5 + return;
  6 + }
  7 + },
  8 +
  9 + collect: function() {
  10 + }
  11 +};
  12 +
  13 +module.exports = navigatorReporter;
  1 +var resourceReporter = {
  2 + init: function() {
  3 + if (!('performance' in window) ||
  4 + !('getEntriesByType' in window.performance) ||
  5 + !(window.performance.getEntriesByType('resource') instanceof Array)
  6 + ) {
  7 + document.getElementById('rt-unsupported').classList.remove('hidden');
  8 + } else {
  9 + window.addEventListener('load', function() {
  10 + var resources = window.performance.getEntriesByType('resource');
  11 + for (var obj in resources) {
  12 + var list = '';
  13 + for (var properties in resources[obj]) {
  14 + list += '<li>' + properties + ': <span class="value">' + resources[obj][properties] + '</span></li>';
  15 + }
  16 + document.getElementById(resources[obj].initiatorType + '-list').innerHTML = list;
  17 + }
  18 + });
  19 + }
  20 + },
  21 + collect: function() {
  22 +
  23 + }
  24 +};
  25 +
  26 +module.exports = resourceReporter;
  1 +
  2 +var screenReporter = {
  3 + init: function() {
  4 + if ( !('screen' in window)) {
  5 + return;
  6 + }
  7 + },
  8 + collect: function() {
  9 +
  10 + }
  11 +};
  12 +
  13 +module.exports = screenReporter;
  1 +var timingReporter = function() {
  2 + var loggerPool = [],
  3 + _pTime = Date.now() - performance.timing.navigationStart || 0,
  4 + _redirTime = performance.timing.redirectEnd - performance.timing.redirectStart || 0,
  5 + _cacheTime = performance.timing.domainLookupStart - performance.timing.fetchStart || 0,
  6 + _dnsTime = performance.timing.domainLookupEnd - performance.timing.domainLookupStart || 0,
  7 + _tcpTime = performance.timing.connectEnd - performance.timing.connectStart || 0,
  8 + _roundtripTime = performance.timing.responseEnd - performance.timing.connectStart || 0,
  9 + _renderTime = Date.now() - performance.timing.domLoading || 0;
  10 +
  11 + function TestResults() {
  12 + };
  13 + TestResults.prototype.perceivedTime = _pTime;
  14 + TestResults.prototype.redirectTime = _redirTime;
  15 + TestResults.prototype.cacheTime = _cacheTime;
  16 + TestResults.prototype.dnsLookupTime = _dnsTime;
  17 + TestResults.prototype.tcpConnectionTime = _tcpTime;
  18 + TestResults.prototype.roundTripTime = _roundtripTime;
  19 + TestResults.prototype.pageRenderTime = _renderTime;
  20 +
  21 + function jsonConcat(object1, object2) {
  22 + for (var key in object2) {
  23 + object1[key] = object2[key];
  24 + }
  25 + return object1;
  26 + }
  27 +
  28 + function setResultsMetaData(id) {
  29 + loggerPool[id].url = encodeURIComponent(window.location.href);
  30 + loggerPool[id].useragent = encodeURIComponent(navigator.userAgent);
  31 + }
  32 +
  33 + function drawToDebugScreen(id) {
  34 + var debug = document.getElementById("debug");
  35 + var output = formatDebugInfo(id);
  36 + if (!debug) {
  37 + var divTag = document.createElement("div");
  38 + divTag.id = "debug";
  39 + divTag.innerHTML = output;
  40 + document.body.appendChild(divTag);
  41 + } else {
  42 + debug.innerHTML += output;
  43 + }
  44 + }
  45 +
  46 + function formatDebugInfo(id) {
  47 + var debuginfo = "<p>";
  48 + debuginfo += "pref object : " + JSON.stringify(jsonConcat(loggerPool[id], TestResults.prototype)) + "<br/>";
  49 +
  50 + debuginfo += "path: " + decodeURIComponent(loggerPool[id].url) + "<br/>";
  51 + debuginfo += "useragent: " + decodeURIComponent(loggerPool[id].useragent) + "<br/>";
  52 + debuginfo += "</p>";
  53 + return debuginfo
  54 + }
  55 +
  56 + return {
  57 + startTimeLogging: function(id) {
  58 + loggerPool[id] = new TestResults();
  59 + loggerPool[id].id = id;
  60 + loggerPool[id].startTime = performance.now();
  61 + },
  62 +
  63 + stopTimeLogging: function(id) {
  64 + loggerPool[id].stopTime = performance.now();
  65 + setResultsMetaData(id);
  66 + },
  67 +
  68 + collect: function() {
  69 + var id = Math.random();
  70 +
  71 + this.id = id;
  72 + this.startTimeLogging(id);
  73 + this.stopTimeLogging(id);
  74 + return jsonConcat(loggerPool[id],TestResults.prototype);
  75 + },
  76 +
  77 + debug: function() {
  78 + drawToDebugScreen(this.id);
  79 + },
  80 +
  81 + //expose derived performance data
  82 + perceivedTime: function() {
  83 + return _pTime;
  84 + },
  85 + redirectTime: function() {
  86 + _redirTime;
  87 + },
  88 + cacheTime: function() {
  89 + return _cacheTime;
  90 + },
  91 + dnsLookupTime: function() {
  92 + return _dnsTime;
  93 + },
  94 + tcpConnectionTime: function() {
  95 + return _tcpTime;
  96 + },
  97 + roundTripTime: function() {
  98 + return _roundtripTime;
  99 + },
  100 + pageRenderTime: function() {
  101 + return _renderTime;
  102 + }
  103 + }
  104 +};
  105 +
  106 +performance.now = (function() {
  107 + return performance.now ||
  108 + performance.mozNow ||
  109 + performance.msNow ||
  110 + performance.oNow ||
  111 + performance.webkitNow ||
  112 + function() {
  113 + return new Date().getTime();
  114 + };
  115 +})();
  116 +
  117 +var reporter = {
  118 + init: function() {
  119 + this.enable = true;
  120 + if (!('performance' in window)) {
  121 + this.enable = false;
  122 + return;
  123 + }
  124 + },
  125 + collect: function(debug) {
  126 + if (!this.enable) {
  127 + return;
  128 + }
  129 +
  130 + var perf = timingReporter();
  131 + var data = perf.collect();
  132 +
  133 + if (debug) {
  134 + perf.debug();
  135 + }
  136 +
  137 + return data;
  138 + }
  139 +};
  140 +
  141 +module.exports = reporter;
@@ -10,7 +10,8 @@ const os = require('os'); @@ -10,7 +10,8 @@ const os = require('os');
10 module.exports = { 10 module.exports = {
11 entry: { 11 entry: {
12 'yas': './yas.js', 12 'yas': './yas.js',
13 - 'reporter': './src/reporter/index.js' 13 + 'reporter': './src/reporter/index.js',
  14 + 'perf': './src/reporter/perf-reporter.js'
14 }, 15 },
15 output: { 16 output: {
16 path: path.join('dist', 'yas-jssdk', version), // absolute path 17 path: path.join('dist', 'yas-jssdk', version), // absolute path