2023 思考
性能优化：
why？ 性能优化的话，
背景
选品系统 是面向 橙心优选采购 业务，从 供应链 视角打通上下游的业务支撑系统。 但是前期 工期紧，任务重，倒排期
性能优化被搁置
而这个也是整个部门的kpi
优化之前是什么样子？
当时FCP平均时间在2000ms左右，LCP平均时间在4000ms左右，
怎么定的目标
根据集团统一的性能优化目标， FCP：800ms以内占比 75% 以上 LCP：2000ms以内占比 75% 以上
衡量指标是什么
通过集团统一的性能（错误）监控平台，指标包括：
怎么监控的
OMGH5Performance，实际上就是performance.getEntry的原始数据 采集上报链路是sdk采集->Omega行为分析->MAS，这里我们都是全量采样的。 上报为全量上报，
指标度量&采集：
之后是OMGH5Performance，实际上就是performance.getEntry的原始数据
FCP： performance.timing.navigationStart ，或者直接获取 pertormance 中关于 paint 的两个数据，都可以直接作为白屏数据，这两个数据一般差别不大。
LCP： PerformanceObserver设置entryType 为 largest-contentful-paint 即可。
采集上报链路是sdk采集->Omega行为分析->MAS，这里我们都是全量采样的。
how
得之前的一位前辈同事说过一句前端优化的话：前端优化就是权衡各种利弊后做的一种妥协 性能优化思路：
-
特例分析，找出阻塞点
之后是我们推荐的性能分析方法：归纳起来就是多维度聚合->维度事件采样->慢会话分析 1.通过mas选中要排查的维度：页面、时间范围、版本…… 2.通过维度聚合数据去分析慢会话的宏观比例和在不同维度间的差异，看看是否在某个维度上有问题 3.之后是在具体维度中进行分层统计，分析不同会话速度的差异 4.在分层中采样，找到具体事件，之后通过事件中的网络分析和区间耗时，去看看具体是哪个地方影响了性能。
通过这两点梳理出来的性能优化措施： DNS预解析： 在 html 的 head 标签中通过 meta 标签指定开启DNS 预解析和添加预解析的域名
在html模板文件中添加域名 DNS 预解析代码块，使浏览器提前预解析需要加载的静态文件的域名。当需要下载静态资源时，加快静态文件的下载速度
延时执行影响页面渲染的代码： 比如水印js，监控js，其实我们的业务场景在页面渲染出来之前是不需要这些js的执行结果的，那我们为什么不能将这些js做成异步加载呢？