前言当被问及优化性能的方式时，都会提到合并文件、压缩资源等，但对性能衡量标准却各执一词；衡量标准有很多，本文将介绍最具代表性和应用最广泛的性能代表。页面加载过程要了解性能指标，首先要了解页面加载过程，了解浏览器加载页面。这张图按照时间顺序详细阐述了浏览器加载页面触发的所有行为（hooks）的流程：BrowseLocalbehaviorofthedevice1.Promptforunload：提示卸载。打开新页面的那一刻，就可以卸载上一页的文档（如果有的话）。紧接着记录时间为navigationStartredirect(unload):重定向，如果发生网络重定向，直接跳转到DNS解析，如果发生本地重定向，则寻找本地强制缓存资源。同时卸载上一页，回收内存。App缓存：读取本地缓存，减少网络IO开销（有缓存直接跳转到Processing）网络行为DNS：无缓存，去网络，DNS解析找到对应IP。DNS解析发送UDP包。TCP：建立TCP连接请求：HTTP通信响应：服务器响应浏览器的本地行为处理：浏览器解析DOM并处理一系列的响应和渲染行为。详见渲染机制onLoad：loadingcomplete。性能指的是什么我们都听说过性能的重要性。但是，当我们谈论性能并使网站“更快”时，我们究竟指的是什么？其实性能是相对的：一个网站可能对一个用户来说很快（网速快，设备强大），但对另一个用户来说可能就慢（网速慢，设备低端）。案件）。两个站点可能需要相同的时间来加载，但一个似乎加载得更快（如果站点以增量方式加载内容，而不是等到最后一起显示它们）。网站可能看起来加载速度很快，但随后对用户交互的响应却很慢（或根本不响应）。因此，在谈论绩效时，重要的是要准确，并根据可以定量衡量的客观标准来谈论绩效。这些标准是指标。指标类型感知加载速度感知加载速度：页面在屏幕上加载并呈现所有视觉元素的速度。加载响应：页面加载和执行任何必需的JavaScript代码以使组件快速响应用户交互的速度。Runtimeresponsiveness运行时响应：页面加载后，它对用户交互的响应速度。视觉稳定性：页面上的元素是否会意外移动并可能干扰用户交互？平滑度：转场和动画在页面状态切换时是否有稳定的帧率和流畅的流动性。性能指标介绍。渲染过程FP(FirstPaint)第一次绘制页面从加载开始到页面任意像素第一次绘制TimeFirstContentfulPaint(FCP)第一次内容绘制页面从加载开始到页面任意部分内容在屏幕上完成渲染时间（渲染DOM内容的时间）LargestContentfulPaint(LCP)最大内容绘图页面开始加载到最大文本块或图像元素完全呈现在屏幕上的时间；如果元素在屏幕外，或者元素被遮挡溢出被裁剪掉，这些部分不计入LCP的元素大小。时间长的原因：css和js阻塞了dom的渲染，最大元素加载资源慢。FirstScreenPaint(FSP)需要很长时间才能呈现所有内容。原因：资源加载慢，js执行时间过长等速度指数（SI）首屏平均页面显示指标如何优化首屏平均得分减少渲染阻塞资源JavaScript执行时间是提高首屏显示平均分的最佳途径之一。呈现阻止资源是优先阻止您网站的其他部分加载的脚本和代码。与同时加载不同元素的站点不同，某些元素会暂停所有其他元素，直到它们完成。FirstInputDelay(FID)从用户第一次与网站交互到浏览器真正能够响应交互所经过的时间；用户等待响应，例如单击按钮、输入数据交互时间(TTI)交互时间页面开始加载到视觉上完成渲染、Chef脚本完成加载并能够响应所需的时间userinputquicklyandreliableTotalBlockingTime(TBT)TotalBlockingTimeFCPtototalblockingtimesforalllongtasksinTTI(长任务执行时间超过50ms的部分称为阻塞时间)CumulativeLayoutShift(CLS)CumulativeLayoutShift(CLS)页面意外位移波动元素偏移：元素可见且元素起始位置发生变化元素偏移值=影响范围*初始位置变化值一次偏移窗口：5s内，其元素的偏移值之和offset时间间隔小于1s累计布局偏移量：MaximumoffsetwindowFramesPerSecond(FPS)Transmissionframespersecond每秒可以重绘的帧数FPSis太低会导致页面卡顿
