Skip to main content

Profile 设置

可以配置测试网站的条件。平台可以模拟流行的设备(例如 iPhone,iPad 和 Nexus 手机),限制网络连接。

所有项目被创建的时候都会有一个默认 Profile:Desktop, Network throttling 是 unlimit。

danger

删除 profile 的时候,所有 使用该 profile 生成的 snapshot report 也会被一并删除。

profiles

edit profile

模拟设备 (Device emulation)

我们利用 Google Chrome 设备模拟以及其他一些机制来确保体验尽可能接近真实设备。

平台提供了以下设备的模拟:

  • iPhone 6
  • iPhone 8
  • iPhone X
  • Nexus 5X
  • Nexus 6P
  • Pixel 2 XL
  • iPad
  • iPad Pro

当配置了该参数,会有如下影响:

  • 设备的 viewport 发生改变;
  • 会设置该设备对应的 User-Agent;
  • CPU 会被设备的硬件条件影响而变慢;(CPU slowdown multiplier)

模拟网络连接速度(Connection speed)

通过使用预配置网络速度选项来限制浏览器可用的带宽。

预配置网络速度选项如下:

LabelLatencyDownloadUploadRTT
No bandwidth throttling----
Slow 3G400ms40.00 KB/s40.00 KB/s300ms
Good 3G150ms196.61 KB/s96.00 KB/s300ms
Regular 4G170ms1.52 MB/s392.22 KB/s80ms
4G LTE70ms3.00 MB/s3.00 MB/s80ms
WiFi10ms3.93 MB/s1.97 MB/s40ms
Cable20ms5.00 MB/s5.00 MB/s0ms

React Profiling

开启这个功能,会在 Lab 分析阶段收集 React 应用每个组件渲染时间等信息。分析报告中会展示组件火焰图,帮助我们分析 React 应用性能瓶颈。

这个功能是基于 React Profiler API 实现的,但 Profier API 在生产环境是关闭的。我们通过拦截 react-don 对应资源的请求,并将其替换成 profiling build 来解决这个问题。

Request Proxy

开启这个选项之后,启动一个 TCP server 来代理部分请求,可以降低网络引起的波动,让性能分析结果更加稳定可靠。

我们会在预热阶段缓存所有静态资源请求和部分 API 请求,在运行 lab 分析时如果请求命中了缓存,则会直接返回结果。