1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 | import { initMetric } from './lib/initMetric.js';
|
17 | import { observe } from './lib/observe.js';
|
18 | import { onHidden } from './lib/onHidden.js';
|
19 | import { onBFCacheRestore } from './lib/onBFCacheRestore.js';
|
20 | import { bindReporter } from './lib/bindReporter.js';
|
21 | import { getFCP } from './getFCP.js';
|
22 | let isMonitoringFCP = false;
|
23 | let fcpValue = -1;
|
24 | export const getCLS = (onReport, reportAllChanges) => {
|
25 |
|
26 |
|
27 | if (!isMonitoringFCP) {
|
28 | getFCP((metric) => {
|
29 | fcpValue = metric.value;
|
30 | });
|
31 | isMonitoringFCP = true;
|
32 | }
|
33 | const onReportWrapped = (arg) => {
|
34 | if (fcpValue > -1) {
|
35 | onReport(arg);
|
36 | }
|
37 | };
|
38 | let metric = initMetric('CLS', 0);
|
39 | let report;
|
40 | let sessionValue = 0;
|
41 | let sessionEntries = [];
|
42 | const entryHandler = (entry) => {
|
43 |
|
44 | if (!entry.hadRecentInput) {
|
45 | const firstSessionEntry = sessionEntries[0];
|
46 | const lastSessionEntry = sessionEntries[sessionEntries.length - 1];
|
47 |
|
48 |
|
49 |
|
50 | if (sessionValue &&
|
51 | entry.startTime - lastSessionEntry.startTime < 1000 &&
|
52 | entry.startTime - firstSessionEntry.startTime < 5000) {
|
53 | sessionValue += entry.value;
|
54 | sessionEntries.push(entry);
|
55 | }
|
56 | else {
|
57 | sessionValue = entry.value;
|
58 | sessionEntries = [entry];
|
59 | }
|
60 |
|
61 |
|
62 | if (sessionValue > metric.value) {
|
63 | metric.value = sessionValue;
|
64 | metric.entries = sessionEntries;
|
65 | report();
|
66 | }
|
67 | }
|
68 | };
|
69 | const po = observe('layout-shift', entryHandler);
|
70 | if (po) {
|
71 | report = bindReporter(onReportWrapped, metric, reportAllChanges);
|
72 | onHidden(() => {
|
73 | po.takeRecords().map(entryHandler);
|
74 | report();
|
75 | });
|
76 | onBFCacheRestore(() => {
|
77 | sessionValue = 0;
|
78 | fcpValue = -1;
|
79 | metric = initMetric('CLS', 0);
|
80 | report = bindReporter(onReportWrapped, metric, reportAllChanges);
|
81 | });
|
82 | }
|
83 | };
|