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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
|
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
// Supported test types
const TEST_BENCHMARK = "benchmark";
const TEST_PAGE_LOAD = "pageload";
// content script for use with pageload tests
var perfData = window.performance;
var gRetryCounter = 0;
// measure hero element; must exist inside test page;
// supported on: Firefox, Chromium, Geckoview
// default only; this is set via control server settings json
var getHero = false;
var heroesToCapture = [];
// measure time-to-first-non-blank-paint
// supported on: Firefox, Geckoview
// note: this browser pref must be enabled:
// dom.performance.time_to_non_blank_paint.enabled = True
// default only; this is set via control server settings json
var getFNBPaint = false;
// measure time-to-first-contentful-paint
// supported on: Firefox, Chromium, Geckoview
// note: this browser pref must be enabled:
// dom.performance.time_to_contentful_paint.enabled = True
// default only; this is set via control server settings json
var getFCP = false;
// measure domContentFlushed
// supported on: Firefox, Geckoview
// note: this browser pref must be enabled:
// dom.performance.time_to_dom_content_flushed.enabled = True
// default only; this is set via control server settings json
var getDCF = false;
// measure TTFI
// supported on: Firefox, Geckoview
// note: this browser pref must be enabled:
// dom.performance.time_to_first_interactive.enabled = True
// default only; this is set via control server settings json
var getTTFI = false;
// supported on: Firefox, Chromium, Geckoview
// default only; this is set via control server settings json
var getLoadTime = false;
// performance.timing measurement used as 'starttime'
var startMeasure = "fetchStart";
async function raptorContentHandler() {
raptorLog("pageloadjs raptorContentHandler!");
// let the main raptor runner know that we (pageloadjs) is ready!
await sendPageloadReady();
// retrieve test settings from local ext storage
let settings;
if (typeof browser !== "undefined") {
({ settings } = await browser.storage.local.get("settings"));
} else {
({ settings } = await new Promise(resolve => {
chrome.storage.local.get("settings", resolve);
}));
}
setup(settings);
}
function setup(settings) {
if (settings.type != TEST_PAGE_LOAD) {
return;
}
if (settings.measure == undefined) {
raptorLog("abort: 'measure' key not found in test settings");
return;
}
if (settings.measure.fnbpaint !== undefined) {
getFNBPaint = settings.measure.fnbpaint;
if (getFNBPaint) {
raptorLog("will be measuring fnbpaint");
measureFNBPaint();
}
}
if (settings.measure.dcf !== undefined) {
getDCF = settings.measure.dcf;
if (getDCF) {
raptorLog("will be measuring dcf");
measureDCF();
}
}
if (settings.measure.fcp !== undefined) {
getFCP = settings.measure.fcp;
if (getFCP) {
raptorLog("will be measuring first-contentful-paint");
measureFCP();
}
}
if (settings.measure.hero !== undefined) {
if (settings.measure.hero.length !== 0) {
getHero = true;
heroesToCapture = settings.measure.hero;
raptorLog(`hero elements to measure: ${heroesToCapture}`);
measureHero();
}
}
if (settings.measure.ttfi !== undefined) {
getTTFI = settings.measure.ttfi;
if (getTTFI) {
raptorLog("will be measuring ttfi");
measureTTFI();
}
}
if (settings.measure.loadtime !== undefined) {
getLoadTime = settings.measure.loadtime;
if (getLoadTime) {
raptorLog("will be measuring loadtime");
measureLoadTime();
}
}
}
function measureHero() {
let obs;
const heroElementsFound = window.document.querySelectorAll("[elementtiming]");
raptorLog(`found ${heroElementsFound.length} hero elements in the page`);
if (heroElementsFound) {
async function callbackHero(entries, observer) {
for (const entry in entries) {
const heroFound = entry.target.getAttribute("elementtiming");
// mark the time now as when hero element received
perfData.mark(heroFound);
const resultType = `hero:${heroFound}`;
raptorLog(`found ${resultType}`);
// calculcate result: performance.timing.fetchStart - time when we got hero element
perfData.measure(
(name = resultType),
(startMark = startMeasure),
(endMark = heroFound)
);
const perfResult = perfData.getEntriesByName(resultType);
const _result = Math.round(perfResult[0].duration);
await sendResult(resultType, _result);
perfData.clearMarks();
perfData.clearMeasures();
obs.disconnect();
}
}
// we want the element 100% visible on the viewport
const options = { root: null, rootMargin: "0px", threshold: [1] };
try {
obs = new window.IntersectionObserver(callbackHero, options);
heroElementsFound.forEach(function (el) {
// if hero element is one we want to measure, add it to the observer
if (heroesToCapture.indexOf(el.getAttribute("elementtiming")) > -1) {
obs.observe(el);
}
});
} catch (err) {
raptorLog(err);
}
} else {
raptorLog("couldn't find hero element");
}
}
async function measureFNBPaint() {
const x = window.performance.timing.timeToNonBlankPaint;
if (typeof x == "undefined") {
raptorLog(
"timeToNonBlankPaint is undefined; ensure the pref is enabled",
"error"
);
return;
}
if (x > 0) {
raptorLog("got fnbpaint");
gRetryCounter = 0;
const startTime = perfData.timing.fetchStart;
await sendResult("fnbpaint", x - startTime);
} else {
gRetryCounter += 1;
if (gRetryCounter <= 10) {
raptorLog(
`fnbpaint is not yet available, retry number ${gRetryCounter}...`
);
window.setTimeout(measureFNBPaint, 100);
} else {
raptorLog(
`unable to get a value for fnbpaint after ${gRetryCounter} retries`
);
}
}
}
async function measureDCF() {
const x = window.performance.timing.timeToDOMContentFlushed;
if (typeof x == "undefined") {
raptorLog(
"domContentFlushed is undefined; ensure the pref is enabled",
"error"
);
return;
}
if (x > 0) {
raptorLog(`got domContentFlushed: ${x}`);
gRetryCounter = 0;
const startTime = perfData.timing.fetchStart;
await sendResult("dcf", x - startTime);
} else {
gRetryCounter += 1;
if (gRetryCounter <= 10) {
raptorLog(
`dcf is not yet available (0), retry number ${gRetryCounter}...`
);
window.setTimeout(measureDCF, 100);
} else {
raptorLog(`unable to get a value for dcf after ${gRetryCounter} retries`);
}
}
}
async function measureTTFI() {
const x = window.performance.timing.timeToFirstInteractive;
if (typeof x == "undefined") {
raptorLog(
"timeToFirstInteractive is undefined; ensure the pref is enabled",
"error"
);
return;
}
if (x > 0) {
raptorLog(`got timeToFirstInteractive: ${x}`);
gRetryCounter = 0;
const startTime = perfData.timing.fetchStart;
await sendResult("ttfi", x - startTime);
} else {
gRetryCounter += 1;
// NOTE: currently the gecko implementation doesn't look at network
// requests, so this is closer to TimeToFirstInteractive than
// TimeToInteractive. TTFI/TTI requires running at least 5 seconds
// past last "busy" point, give 25 seconds here (overall the harness
// times out at 30 seconds). Some pages will never get 5 seconds
// without a busy period!
if (gRetryCounter <= 25 * (1000 / 200)) {
raptorLog(
`TTFI is not yet available (0), retry number ${gRetryCounter}...`
);
window.setTimeout(measureTTFI, 200);
} else {
// unable to get a value for TTFI - negative value will be filtered out later
raptorLog("TTFI was not available for this pageload");
await sendResult("ttfi", -1);
}
}
}
async function measureFCP() {
// see https://developer.mozilla.org/en-US/docs/Web/API/PerformancePaintTiming
let result = window.performance.timing.timeToContentfulPaint;
// Firefox implementation of FCP is not yet spec-compliant (see Bug 1519410)
if (typeof result == "undefined") {
// we're on chromium
result = 0;
const perfEntries = perfData.getEntriesByType("paint");
if (perfEntries.length >= 2) {
if (
perfEntries[1].name == "first-contentful-paint" &&
perfEntries[1].startTime != undefined
) {
// this value is actually the final measurement / time to get the FCP event in MS
result = perfEntries[1].startTime;
}
}
}
if (result > 0) {
raptorLog("got time to first-contentful-paint");
if (typeof browser !== "undefined") {
// Firefox returns a timestamp, not the actual measurement in MS; need to calculate result
const startTime = perfData.timing.fetchStart;
result = result - startTime;
}
await sendResult("fcp", result);
perfData.clearMarks();
perfData.clearMeasures();
} else {
gRetryCounter += 1;
if (gRetryCounter <= 10) {
raptorLog(
`time to first-contentful-paint is not yet available (0), retry number ${gRetryCounter}...`
);
window.setTimeout(measureFCP, 100);
} else {
raptorLog(
`unable to get a value for time-to-fcp after ${gRetryCounter} retries`
);
}
}
}
async function measureLoadTime() {
const x = window.performance.timing.loadEventStart;
if (typeof x == "undefined") {
raptorLog("loadEventStart is undefined", "error");
return;
}
if (x > 0) {
raptorLog(`got loadEventStart: ${x}`);
gRetryCounter = 0;
const startTime = perfData.timing.fetchStart;
await sendResult("loadtime", x - startTime);
} else {
gRetryCounter += 1;
if (gRetryCounter <= 40 * (1000 / 200)) {
raptorLog(
`loadEventStart is not yet available (0), retry number ${gRetryCounter}...`
);
window.setTimeout(measureLoadTime, 100);
} else {
raptorLog(
`unable to get a value for loadEventStart after ${gRetryCounter} retries`
);
}
}
}
/**
* Send message to runnerjs indicating pageloadjs is ready to start getting measures
*/
async function sendPageloadReady() {
raptorLog("sending pageloadjs-ready message to runnerjs");
let response;
if (typeof browser !== "undefined") {
response = await browser.runtime.sendMessage({ type: "pageloadjs-ready" });
} else {
response = await new Promise(resolve => {
chrome.runtime.sendMessage({ type: "pageloadjs-ready" }, resolve);
});
}
if (response) {
raptorLog(`Response: ${response.text}`);
}
}
/**
* Send result back to background runner script
*/
async function sendResult(type, value) {
raptorLog(`sending result back to runner: ${type} ${value}`);
let response;
if (typeof browser !== "undefined") {
response = await browser.runtime.sendMessage({ type, value });
} else {
response = await new Promise(resolve => {
chrome.runtime.sendMessage({ type, value }, resolve);
});
}
if (response) {
raptorLog(`Response: ${response.text}`);
}
}
function raptorLog(text, level = "info") {
let prefix = "";
if (level == "error") {
prefix = "ERROR: ";
}
console[level](`${prefix}[raptor-pageloadjs] ${text}`);
}
if (window.addEventListener) {
window.addEventListener("load", raptorContentHandler);
}
|