72 lines
2.9 KiB
JavaScript
72 lines
2.9 KiB
JavaScript
#include html.js
|
|
|
|
(() => {
|
|
const perfs = <div class="msz-perfs"/>;
|
|
perfs.ondblclick = () => {
|
|
perfs.classList.toggle('msz-perfs-right');
|
|
};
|
|
|
|
const appendReal = elem => {
|
|
$appendChild(perfs, elem);
|
|
};
|
|
|
|
let append = elem => {
|
|
append = appendReal;
|
|
$appendChild(document.body, perfs);
|
|
appendReal(elem);
|
|
};
|
|
|
|
(new PerformanceObserver(list => {
|
|
for(const entry of list.getEntries()) {
|
|
if(entry.serverTiming.length < 1)
|
|
break;
|
|
|
|
const url = new URL(entry.name);
|
|
|
|
let total = 0;
|
|
let queries = -1;
|
|
const timings = <table class="msz-perf-timings"/>;
|
|
for(const timing of entry.serverTiming) {
|
|
if(timing.name === 'msz-queries') {
|
|
queries = Math.ceil(timing.duration);
|
|
continue;
|
|
}
|
|
|
|
total += timing.duration;
|
|
$appendChild(timings, <tr class="msz-perf-timing">
|
|
<td class="msz-perf-timing-name">{timing.name}</td>
|
|
<td class="msz-perf-timing-comment">{decodeURIComponent(timing.description)}</td>
|
|
<td class="msz-perf-timing-duration">
|
|
<span class="msz-perf-number">{timing.duration}</span>
|
|
<span class="msz-perf-unit">ms</span>
|
|
</td>
|
|
</tr>);
|
|
}
|
|
|
|
append(<div class="msz-perf">
|
|
<div class="msz-perf-header">
|
|
<div class={`msz-perf-type msz-perf-type-${entry instanceof PerformanceNavigationTiming ? 'navigation' : 'other'}`}>
|
|
{entry instanceof PerformanceNavigationTiming ? entry.type : (
|
|
entry.initiatorType === 'xmlhttprequest' ? 'xhr' : entry.initiatorType
|
|
)}
|
|
</div>
|
|
<div class="msz-perf-target">
|
|
{url.host !== location.host ? <div class="msz-perf-target-host">{url.host}</div> : null}
|
|
<div class="msz-perf-target-path">{url.pathname}</div>
|
|
{url.search !== '' ? <div class="msz-perf-target-query">{url.search}</div> : null}
|
|
</div>
|
|
{queries > 0 ? <div class="msz-perf-total">
|
|
<span class="msz-perf-number">{queries}</span>
|
|
{' '}
|
|
<span class="msz-perf-unit">{queries === 1 ? 'query' : 'queries'}</span>
|
|
</div> : null}
|
|
<div class="msz-perf-total">
|
|
<span class="msz-perf-number">{total.toFixed(5)}</span>
|
|
<span class="msz-perf-unit">ms</span>
|
|
</div>
|
|
</div>
|
|
{timings}
|
|
</div>);
|
|
}
|
|
})).observe({ entryTypes: ['navigation', 'resource'] });
|
|
})();
|