前端监控各目的含意 怎样监控怎样提升

目的含意与提升

缩小主线程上的阻塞操作，确保阅读器能够及时响运行户的输入。

经常使用Web Workers等技术将计算密集型义务移至后盾线程口头。

计算形式：

const observer = new PerformanceObserver((list) => {for (const entry of list.getEntries()) {console.log('fid', entry.processingStart - entry.startTime);}});observer.observe({type: 'first-input', buffer: true});

提升主机照应速度，缩小页面加载期间。

经常使用CDN等技术减速静态资源的加载。

缩小页面中的非关键资源恳求，提高首屏加载速度。

计算形式：

const fcp = performance.getEntriesByType('paint').filter(entry => entry.name == 'first-contentful-paint')[0].startTime;

防止在页面加载环节中灵活扭转元素的尺寸或位置。

经常使用CSS的width和height属性为元素设置固定的尺寸。

经常使用position: fixed或position: sticky来固定元素的位置。

计算形式：

import {getCLS} from 'web-vitals';getCLS(console.log);

优先加载和渲染页面的关键内容。

经常使用懒加载技术提前加载非关键内容。

提升图片和视频的加载战略，如经常使用适当的格局、尺寸和紧缩技术。

计算：

new PerformanceObserver((entryList) => {for (const entry of entryList.getEntries()) {console.log('LCP candidate:', entry.startTime, entry);}}).observe({type: 'largest-contentful-paint', buffered: true});

为了监控这些目的并启动性能提升，你可以思考经常使用以下工具和方法：

在提升前端性能时，还须要留意以下几点：

其余目的

除了之前提到的FID、FCP、CLS和LCP等性能监控目的外，还有其余一些与前端性能关系的关键目的。以下是其中一些关键的目的：

为了监控和提升这些性能目的，你可以经常使用阅读器的开发者工具、第三方性能监控工具或前端性能监控库。这些工具可以协助你搜集和剖析性能数据，识别性能瓶颈，并提供提升倡导。在提升前端性能时，须要留意缩小HTTP恳求、紧缩和提升资源、应用缓存、防止阻塞渲染、提升DOM操作等战略。