Showing
6 changed files
with
254 additions
and
1 deletions
src/reporter/perf-reporter.js
0 → 100644
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 | +} |
src/reporter/perf/navigator.js
0 → 100644
src/reporter/perf/resource.js
0 → 100644
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; |
src/reporter/perf/screen.js
0 → 100644
src/reporter/perf/timing.js
0 → 100644
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 |
-
Please register or login to post a comment