1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 | import {initMetric} from './lib/initMetric.js';
|
18 | import {observe, PerformanceEntryHandler} from './lib/observe.js';
|
19 | import {onHidden} from './lib/onHidden.js';
|
20 | import {onBFCacheRestore} from './lib/onBFCacheRestore.js';
|
21 | import {bindReporter} from './lib/bindReporter.js';
|
22 | import {ReportHandler} from './types.js';
|
23 |
|
24 |
|
25 |
|
26 | interface LayoutShift extends PerformanceEntry {
|
27 | value: number;
|
28 | hadRecentInput: boolean;
|
29 | }
|
30 |
|
31 | export const getCLS = (onReport: ReportHandler, reportAllChanges?: boolean) => {
|
32 | let metric = initMetric('CLS', 0);
|
33 | let report: ReturnType<typeof bindReporter>;
|
34 |
|
35 | const entryHandler = (entry: LayoutShift) => {
|
36 |
|
37 | if (!entry.hadRecentInput) {
|
38 | (metric.value as number) += entry.value;
|
39 | metric.entries.push(entry);
|
40 | report();
|
41 | }
|
42 | };
|
43 |
|
44 | const po = observe('layout-shift', entryHandler as PerformanceEntryHandler);
|
45 | if (po) {
|
46 | report = bindReporter(onReport, metric, reportAllChanges);
|
47 |
|
48 | onHidden(() => {
|
49 | po.takeRecords().map(entryHandler as PerformanceEntryHandler);
|
50 | report();
|
51 | });
|
52 |
|
53 | onBFCacheRestore(() => {
|
54 | metric = initMetric('CLS', 0);
|
55 | report = bindReporter(onReport, metric, reportAllChanges);
|
56 | });
|
57 | }
|
58 | };
|