第130题如果一个H5很慢，如何排查性能问题

前端性能指标

FP(First Paint)：首次绘制，即首次绘制任何内容到屏幕上
FCP(First Content Paint)：首次内容绘制，即首次绘制非空白内容到屏幕上
FMP(First Meaning Paint)：首次有意义绘制，即首次绘制有意义的内容到屏幕上-已弃用，改用LCP
- FMP业务指标，没有统一标准
LCP(Largest Contentful Paint)：最大内容绘制，即最大的内容绘制到屏幕上
TTI(Time to Interactive)：可交互时间，即页面加载完成，可以进行交互的时间
TBT(Total Blocking Time)：总阻塞时间，即页面加载过程中，主线程被占用的时间
CLS(Cumulative Layout Shift)：累计布局偏移，即页面加载过程中，元素位置发生变化的程度
FCP、LCP、TTI、TBT、CLS都是web-vitals库提供的指标
DCL(DOM Content Loaded)：DOM加载完成，即页面DOM结构加载完成的时间
L(Load)：页面完全加载完成的时间

通过Chrome Performance分析

打开浏览器无痕模式，点击Performance > ScreenShot

如果加载很快就会很快就到达FP，在分析FCP、LCP、DCL、L看渲染时间

国内访问GitHub可以看到加载到FP非常慢，但是渲染很快

network > show overview 查看每个资源的加载时间，或者从waterfall查看

使用lighthouse分析

    # 通过node使用
    npm i lighthouse -g
    
    # 需要稍等一会就分析完毕输出报告
    lighthouse https://baidu.com --view --preset=desktop

通过工具就可以识别到问题

性能优化是一个循序渐进的过程，不像bug一次解决。持续跟进统计结果，再逐步分析性能瓶颈，持续优化。可使用第三方统计服务，如百度统计

第130题 如果一个H5很慢，如何排查性能问题