Fork me on GitHub

前端性能优化与原理实践之【性能检测的工具】

前端性能优化与原理实践之防抖和节流!

一、Performance 面板

Performance 面板是谷歌浏览器自带性能检测工具,它可以运用到实时运行的网页中测试性能。

当我们检测某一个交互操作时,我们直接点击实心的按钮就可以,圆箭头的按钮是重新加载页面。为了避免其他谷歌插件对页面的影响,我们一般开启无痕模式

三个参数的作用:

  • FPS:这是一个和动画性能密切相关的指标,它表示每一秒的帧数。图中绿色柱状越高表示帧率越高,体验就越流畅。若出现红色块,则代表长时间帧,很可能会出现卡顿。图中以绿色为主,偶尔出现红块,说明网页性能并不糟糕,但仍有可优化的空间。
  • CPU:表示CPU的使用情况,不同的颜色片段代表着消耗CPU资源的不同事件类型。这部分的图像和下文详情面板中的Summary内容有对应关系,我们可以结合这两者挖掘性能瓶颈。
  • NET:粗略的展示了各请求的耗时与前后顺序。

img

主要去看 Main 栏目下的火焰图和 Summary 提供给我们的饼图——这两者和概述面板中的 CPU 一栏结合

img

  • CPU 图表中,我们可以根据颜色填充的饱满程度,确定 CPU 的忙闲。

  • Summary 饼图则以一种直观的方式告诉了我们,哪个类型的任务最耗时(从本例来看是脚本执行过程)。

火焰图:

它展示了整个运行时主进程所做的每一件事情(包括加载、脚本运行、渲染、布局、绘制等),Main 火焰图则将粒度细化到了每一个函数的调用。

  • x 轴表示随时间的记录。
  • 每个长条就代表一个活动。
  • y 轴表示调用堆栈,我们可以看到事件是相互堆叠的,上层的事件触发了下层的事件。

二、LightHouse

Lighthouse 是一个开源的自动化工具,用于改进网络应用的质量。 你可以将其作为一个 Chrome 扩展程序运行,或从命令行运行。 为Lighthouse 提供一个需要审查的网址,它将针对此页面运行一连串的测试,然后生成一个有关页面性能的报告。

img

  • 页面性能
  • PWA(渐进式 Web 应用)
  • 可访问性(无障碍)
  • 最佳实践
  • SEO 五项指标的跑分。

命令行使用:

1
2
npm install -g lighthouse
lighthouse https://juejin.im/books

三、Performance API

W3C 规范为我们提供了 Performance 相关的接口。它允许我们获取到用户访问一个页面的每个阶段的精确时间。

1
window.performance

时间戳和整个页面流程的加载一一对应关系如下:求两个时间戳的差值就可以求出某个过程花费的时间。

img

img

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// firstbyte:首包时间	
timing.responseStart – timing.domainLookupStart

// fpt:First Paint Time, 首次渲染时间 / 白屏时间
timing.responseEnd – timing.fetchStart

// tti:Time to Interact,首次可交互时间
timing.domInteractive – timing.fetchStart

// ready:HTML 加载完成时间,即 DOM 就位的时间
timing.domContentLoaded – timing.fetchStart

// load:页面完全加载时间
timing.loadEventStart – timing.fetchStart