前端性能优化的指标

性能优化指标的出现，谷歌在2020年提出的Core Web Vitals 和 Web Vitals
了解谷歌浏览器自带的性能调试工具DCL、L、FP、FCP、LCP，图层（有layout布局就是回流，painting绘制就是重绘）
回流和重绘的理解
页面第一次打开一定回流和重绘，回流一定重绘，回流出现一般是位置改变（如margin，padding，定位）；重绘出现是颜色，背景颜色，font-size，在谷歌浏览器上有性能测试工具以分析看一下有布局和重绘.如 display: none;会产生回流和重绘
visibility: hidden;会产生重绘。

浏览器渲染流程
浏览器会向 DNS（域名系统）服务器发送一个请求,下载解析资源在浏览器上，将网页内容展示在浏览器的过程，其实就是 渲染引擎完成的，渲染引擎有好几种，我们以webkit为例

从上面的图中我们可以看到，渲染流程为下：
1、解析HTML Source,生成DOM树
2、解析CSS Source,生成css树
3、将DOM和CCSOM 树结合，去除不可见元素，生成渲染元素树。
4、Layout(布局) 根据生成的渲染树，进行布局，得到节点的几何信息(宽、高、位置等)
5、Painting(重绘) 根据渲染树以及布局得到的几何信息，将Render Tree的每个像素渲染到屏幕上。