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
|
<script>
const addText = (element_id) => {
const paragraph = document.createElement('p');
paragraph.id = element_id;
paragraph.innerHTML = 'This is a text larger in size than the green-16x16.png.';
document.body.appendChild(paragraph);
}
const addImage = async (url, element_id) => {
await new Promise(resolve => {
const img = document.createElement('img');
img.id = element_id;
img.addEventListener('load', resolve);
img.src = url;
document.body.appendChild(img);
});
}
const getLCP = async (id) => {
let expected_entries = [];
return await new Promise(resolve => {
new PerformanceObserver((list, observer) => {
list.getEntries().forEach(e => {
if (e.id == id) {
observer.disconnect();
resolve(e.startTime);
}
});
}).observe({ type: "largest-contentful-paint", buffered: true });
});
};
let resource_timing;
const getResourceTimingEntry = async (url) => {
if (resource_timing) {
return resource_timing;
}
resource_timing = await new Promise(resolve => {
new PerformanceObserver((list, observer) => {
list.getEntries().forEach(entry => {
if (entry.name.includes(url)) {
observer.disconnect();
resolve(entry);
}
});
}).observe({ 'type': 'resource', 'buffered': true });
});
return resource_timing;
}
const getRequestStart = async (url) => {
return (await getResourceTimingEntry(url)).requestStart;
}
const getResponseEnd = async (url) => {
return (await getResourceTimingEntry(url)).responseEnd;
}
</script>
|
