-
Notifications
You must be signed in to change notification settings - Fork 0
/
send.html
123 lines (102 loc) · 3.21 KB
/
send.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<html>
<head>
<title>Send metrics exampple</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
.square {
width: 100px;
height: 100px;
margin-bottom: 20px;
background-color: red;
}
.row {
margin: 2px;
}
div.black {
background-color: black;
}
</style>
<!-- <script>
let i = 0
while (i !== 1e5) {
setTimeout(() => i++, 200)
i++
}
</script> -->
</head>
<body>
<div class="square"></div>
<div class="results"></div>
<div id="fact"></div>
<button id="fact-button">get dog fact</button>
<script src="static/send.js"></script>
<script src="static/uuid.js"></script>
<script src="static/platform-detector.js"></script>
<script>
const mutationObserverCallback = function () {
// первый раз рендерится loadin...
// второй раз - текст факта
let mutationsCount = 0
const start = performance.now()
return function (mutationsList, observer) {
if (mutationsCount) {
for (const mutation of mutationsList) {
if (mutation.type === 'childList') {
counter.send('fid', performance.now() - start); // first input delay
mutationObserver.disconnect()
}
}
}
mutationsCount++
}
}
const mutationObserver = new MutationObserver(mutationObserverCallback());
mutationObserver.observe(document.getElementById('fact'), { childList: true });
const paintObserver = new PerformanceObserver(function (entry_list) {
for (const entry of entry_list.getEntriesByName('first-contentful-paint')) {
counter.send('fcp', entry.startTime); // first contentful paint
}
});
paintObserver.observe({ type: 'paint', buffered: true });
let counter = new Counter();
const uuid = CreateUUID();
counter.init(uuid, String(Math.random()).substr(2, 12), 'send test');
counter.setAdditionalParams({
env: 'production',
platform: detectPlatfrom(),
date: new Date().toLocaleDateString()
});
const originalFetch = window.fetch;
window.fetch = (function (originalFetch) {
// переопределяем фетч для отправки статистики
return function (fn) {
const start = performance.now()
return originalFetch.apply(this, arguments).then(response => {
counter.send('content-response', performance.now() - start)
return response;
}).catch(err => {
counter.send('content-response', performance.now() - start)
return err
});
};
})(originalFetch);
counter.send('response', performance.timing.responseEnd - performance.timing.requestStart); // connect
counter.send('ttfb', performance.timing.responseEnd - performance.timing.requestStart); // time to first byte
let timeStart = Date.now();
setTimeout(function () {
document.querySelector('.square').classList.add('black');
counter.send('square', Date.now() - timeStart);
}, Math.random() * 1000 + 500);
function getFact() {
const block = document.getElementById('fact')
block.innerText = 'Loading fact...'
return fetch('/fact')
.then(res => res.json())
.then(({ facts }) => block.innerText = facts[0])
}
document.getElementById('fact-button').onclick = getFact
getFact()
</script>
</body>
</html>