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

Question

假设我有一个网络应用程序很慢，我想找出可能的瓶颈。我首先进入网络选项卡，看看服务器是否有问题，如果网络通话没问题，那么我应该继续性能和内存标签吗？

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

Answer 1

  

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

效果面板为您提供录制过程中页面性能的完整视图。这包括网络请求，JS执行，解析，渲染，绘画等。

内存面板为您提供有关页面如何使用内存的详细视图。人们大多使用它来调试内存问题。当您使用页面时页面逐渐变慢，这有时会导致内存泄漏。当页面一直很慢时，有时候页面会占用太多内存。

  

假设我有一个网络应用程序很慢，我想找出可能的瓶颈。我首先进入网络标签...

实际上，我建议从效果面板开始。它可以显示网络活动，以及一堆其他页面活动。在您发现问题是网络问题后，请转到“网络”面板。

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

在您录制完成后，效果面板上的一系列不同部分可以帮助您发现各种瓶颈：

• Network section可以帮助您发现network bottlenecks。
• Memory section可以帮助您查看内存使用情况。
• Main section向您展示JS，解析，渲染和绘画活动。

有关效果面板的更多信息，请参阅Performance Analysis Reference。