[译]前端性能优化指标-累积布局偏移(CLS)

2.什么是CLS

8.如何测量CLS

8.1线上测量工具

8.2开发测量工具

// Sends the passed data to an analytics endpoint. This code
// uses `/analytics`; you can replace it with your own URL.
function sendToAnalytics(data) {
const body = JSON.stringify(data);
console.log(body);
// Use `navigator.sendBeacon()` if available, falling back to `fetch()`.
// (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
// fetch('/analytics', { body, method: 'POST', keepalive: true });
}
// Use a try/catch instead of feature detecting `layout-shift`
// support, since some browsers throw when using the new `type` option.
// https://bugs.webkit.org/show_bug.cgi?id=209216
try {
// Store the current layout shift score for the page.
let cls = 0;
function onLayoutShiftEntry(entry) {
console.log(entry);
// Only count layout shifts without recent user input.
if (!entry.hadRecentInput) {
cls += entry.value;
}
}
// Create a PerformanceObserver that calls `onLayoutShiftEntry` for each entry.
const po = new PerformanceObserver((entryList, po) => {
entryList.getEntries().forEach((entry) => onLayoutShiftEntry(entry, po));
});
// Observe entries of type `layout-shift`, including buffered entries,
// i.e. entries that occurred before calling `observe()` below.
po.observe({
type: 'layout-shift',
buffered: true,
});
// Log the current CLS score any time the
// page's lifecycle state changes to hidden.
document.addEventListener('visibilitychange', () => {
if (document.visibilityState === 'hidden') {
// Include any pending records not yet dispatched,
// and send the CLS value to an analytics endpoint.
po.takeRecords().forEach((entry) => onLayoutShiftEntry(entry, po));
sendToAnalytics({ cls });
}
});
} catch (e) {
console.log(e);
// Do nothing if the browser doesn't support this API.
}

9.如何改善CLS