如何知道何时使用 Chrome 开发工具:性能与内存选项卡

How to know when to use Chrome Dev Tools: Performance vs Memory tab

假设我有一个速度很慢的 Web 应用程序,我想找出可能的瓶颈。我首先会进入网络选项卡,看看服务器是否有问题,如果网络调用没问题,那么我应该继续 performancememory选项卡?

性能选项卡的用例和内存选项卡的用例是什么?

What is the use case of the performance tab and the use cases of the memory tab?

性能 面板可让您全面了解记录期间页面的性能。这包括网络请求、JS执行、解析、渲染、绘制等

内存 面板可让您详细了解页面如何使用内存。人们主要用它来调试内存问题。当您使用某个页面时,它会逐渐变慢,这有时就是内存泄漏。如果某个页面一直很慢,则有时是该页面使用了太多内存。

Lets say I have a web app which is slow and I want to identify possible bottlenecks. I First would go into the network tab...

实际上,我建议从 性能 面板开始。它可以向您显示网络 activity,以及一堆其他页面 activity。确定问题是网络问题后,转到“网络”面板。

  1. 请参阅 Get Started With Runtime Performance 以熟悉 性能 面板。
  2. Record the page load.

获得录音后,性能 面板上有许多不同的部分可以帮助您发现各种瓶颈:

有关 性能 面板的更多信息,请参阅 Performance Analysis Reference