性能定位的几种方式

用户2517052020845
454 阅读3分钟

- 常见的性能指标

  1. FP(first paint): 从页面开始加载到浏览器检测到渲染时被触发，也叫做白屏时间
  2. FCP(first content paint): 从页面开始加载到浏览器检测到任何部分呈现在屏幕上的时间，也叫做首屏时间
  3. FMP(first meaningful paint): 首次有效绘制，表示页面的主要内容呈现在屏幕上的时间，但是这个主要内容难以界定，一般和业务逻辑相关
  4. LCP(largest contentful paint): 视图最大可见图片或文本块的渲染时间,一般用来衡量网站首次加载的速度
  5. 长任务(long task): 任务执行时间超过50ms的任务称为长任务
  6. TTI(time to internative): 从页面开始到它的主要子资源加载到能够快速响应用户输入的时间
  7. FID(first input delay): 用户第一次与页面交互到浏览器实际能够处理的时间，用来衡量网站的互动速度
  8. TBT(total blocking time): 衡量从FCP到TTI之间主线程被阻塞时长的总和
  9. DCL(dom content load): html加载和解析完成时触发，不管样式和js的加载
  10. L(onloaded): 页面所依赖的所有资源都加载完毕时触发
  11. CLS(cumulative layout shift): 所有布局偏移分数的汇总，计算：不稳定元素的可见区域的总和除以总的视图大小

- 性能定位方式

  • npm包 web-vitals

    npm install web-vitals 安装web-vitals

    在页面中使用，可以查看指定的性能指标，更多指标详见web-vitals

    image.png

  • performance API

    performance.getEntries()可以获取所有资源请求的时间数据

    image.png performance.getEntriesByName(name)，获取指定指标的时间数据

    image.png performanceTiming提供了在加载和使用当前页面期间发生的各种事件的性能计时信息详见MDN文档

    image.png 推荐使用PerformanceObserver构造函数

    image.png 使用 observe 方法来指定要观察的性能条目的类型。在这个示例中，我们观察了导航、绘制（paint）和资源（resource）类型的性能条目，但还有其他类型，如 longtask、measure 等

  • 谷歌浏览器performance面板

    工具栏

    image.png 总览

    image.png 火焰图(Network、Frames、Timings、Main)

    image.png

    image.png

    image.png

    image.png

    总体报告

    image.png

- lighthouse跑分

作用：一般用于分析页面首屏加载时间

image.png

performance 分析各项性能指标，并且分指标提供一些优化建议

image.png

image.png Accessibility 网站可用性分析，对于一些特殊用户(如视障)的支持性

image.png

SEO

image.png

Best Practices 最佳实践

image.png

- 内存泄漏分析

内存泄漏的原因

  1. 事件没有取消监听
  2. 定时器没有及时销毁
  3. 大量使用闭包
  4. 使用完临时Dom没有销毁
  5. 两个或多个对象之间互相引用

performance面板的memory

image.png

memory面板

Heap snapshot 通过快照的方式分析，较为灵活，可以进行某些操作后再生成一次快照来进行对比分析

image.png

image.png

Allocation instrumentation on timeline 基于时间线对内存分配进行跟踪

image.png

Allocation sampling 使用抽样技术来监测内存分配

avatar
文章
阅读
粉丝