Devtool Performance

模拟移动设备的CPU

点击Capture Setting按钮,选择Enable advaced paint instrumentation(slow)并在右侧选择降速倍数

打开FPS面板

  • 按下 Command+Shift+P(Mac)或者 Control+Shift+P(Windows, Linux) 打开命令菜单
  • Show frames per second (FPS) meter

展开Main图表,Devtools展示了主线程运行状况。X轴代表着时间。每个长条代表着一个event。长条越长就代表这个event花费的时间越长。Y轴代表了调用栈(call stack)。在栈里,上面的event调用了下面的event。

  1. 在事件长条的右上角出,如果出现了红色小三角,说明这个事件是存在问题的,需要特别注意。
  2. 双击这个带有红色小三角的的事件。在Summary面板会看到详细信息。注意reveal这个链接,双击它会让高亮触发这个事件的event。如果点击了app.js:94这个链接,就会跳转到对应的代码处。

results for ""

    No results matching ""