前端开发中的几个性能指标(通过chrome观察指标)

根据现状，使用ChromeDevTool作为基础的性能分析工具，观察页面性能情况
Network：观察网络资源加载耗时及顺序
Performace：观察页面渲染表现及JS执行情况
Lighthouse：对网站进行整体评分，找出可优化项
下面以企鹅辅导课程详情页为案例进行分析，找出潜在的优化项
（注意使用Chrome 隐身窗口并禁用插件，移除其他加载项对页面的影响）

1. Network 分析

通常进行网络分析需要禁用缓存、启用网络限速（4g/3g） 模拟移动端弱网情况下的加载情况，因为wifi网络可能会抹平性能差距。

可以看到DOMContentLoaded的时间在 6.03s ，但onload的时间却在 20.92s
先观察 DOMContentLoaded 阶段，发现最长请求路径在 vendor.js ，JS大小为170kB，花费时间为 4.32s
继续观察 DOMContentLoaded 到 onload 的这段时间

可以发现onload事件被大量媒体资源阻塞了，关于 onload 事件的影响因素，可以参考这篇文章
结论是 浏览器认为资源完全加载完成（HTML解析的资源 和 动态加载的资源）才会触发 onload
结合上图 可以发现加载了图片、视频、iFrame等资源，阻塞了 onload 事件的触发

Network 总结

1. DOM的解析受JS加载和执行的影响，尽量对JS进行压缩、拆分处理（HTTP2下），能减少 DOMContentLoaded 时间
2. 图片、视频、iFrame等资源，会阻塞 onload 事件的触发，需要优化资源的加载时机，尽快触发onload

2. Performance 分析

使用Performance模拟移动端注意手机处理器能力比PC差，所以一般将 CPU 设置为 4x slowdown 或 6x slowdown 进行模拟


观察几个核心的数据

Web Vitals ( FP / FCP / LCP / Layout Shift ) 核心页面指标 和 Timings 时长

可以看到 LCP、DCL和 Onload Event 时间较长，且出现了多次 Layout Shift。
要 LCP 尽量早触发，需要减少页面大块元素的渲染时间，观察 Frames 或ScreenShots 的截图，关注页面的元素渲染情况。
可以通过在 Experience 行点击Layout Shift ，在 Summary 面板找到具体的偏移内容。

Main Long Tasks 长任务数量和时长

可以看到页面有大量的Long Tasks需要进行优化，其中couse.js(页面代码)的解析执行时间长达800ms。
处理Long Tasks，可以在开发环境进行录制，这样在 Main Timeline 能看到具体的代码执行文件和消耗时长。

Performance 总结

1. 页面LCP触发时间较晚，且出现多次布局偏移，影响用户体验，需要尽早渲染内容和减少布局偏移
2. 页面 Long Tasks 较多，需要对 JS进行合理拆分和加载，减少 Long Tasks 数量，特别是 影响 DCL 和
   Onload Event 的 Task

3. Lighthouse 分析

使用ChromeDevTool 内置 lighthouse 对页面进行跑分

分数较低，可以看到 Metrics 给出了核心的数据指标，这边显示的是 TTI SI TBT 不合格，LCP 需要提升，FCP 和 CLS 达到了良好的标准，可以查看分数计算标准
同时 lighthouse 会提供一些 优化建议，在 Oppotunities 和 Diagnostics 项，能看到具体的操作指南，如 图片大小、移除无用JS等，可以根据指南进行项目的优化。
lighthouse 的评分内容是根据项目整体加载项目进行打分的，审查出的问题同样包含Network、Performance的内容，所以也可以看作是对 Network、Performance问题的优化建议。
Lighthouse 总结

1. 根据评分，可以看出 TTI、SI、TBT、LCP这四项指标需要提高，可以参考lighthouse 文档进行优化。
2. Oppotunities 和 Diagnostics 提供了具体的优化建议，可以参考进行改善。

4. 环境准备

刚才是对线上网页就行初步的问题分析，要实际进行优化和观察，需要进行环境的模拟，让优化效果能更真实在测试环境中体现。
代理使用：whistle、charles、fiddler等
本地环境、测试环境模拟：nginx、nohost、stke等
数据上报：IMLOG、TAM、RUM等
前端代码打包分析：webpack-bundle-analyzer 、rollup-plugin-visualizer等
分析问题时使用本地代码，本地模拟线上环境验证优化效果，最后再部署到测试环境验证，提高开发效率。