如何知道何时使用 Chrome 开发工具:性能与内存选项卡
How to know when to use Chrome Dev Tools: Performance vs Memory tab
假设我有一个速度很慢的 Web 应用程序,我想找出可能的瓶颈。我首先会进入网络选项卡,看看服务器是否有问题,如果网络调用没问题,那么我应该继续 performance 和 memory选项卡?
性能选项卡的用例和内存选项卡的用例是什么?
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。确定问题是网络问题后,转到“网络”面板。
- 请参阅 Get Started With Runtime Performance 以熟悉 性能 面板。
- Record the page load.
获得录音后,性能 面板上有许多不同的部分可以帮助您发现各种瓶颈:
- Network section can help you spot network bottlenecks.
- Memory section 可以帮助您查看内存使用情况。
- Main section 向您展示了 JS、解析、渲染和绘制 activity。
有关 性能 面板的更多信息,请参阅 Performance Analysis Reference。
假设我有一个速度很慢的 Web 应用程序,我想找出可能的瓶颈。我首先会进入网络选项卡,看看服务器是否有问题,如果网络调用没问题,那么我应该继续 performance 和 memory选项卡?
性能选项卡的用例和内存选项卡的用例是什么?
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。确定问题是网络问题后,转到“网络”面板。
- 请参阅 Get Started With Runtime Performance 以熟悉 性能 面板。
- Record the page load.
获得录音后,性能 面板上有许多不同的部分可以帮助您发现各种瓶颈:
- Network section can help you spot network bottlenecks.
- Memory section 可以帮助您查看内存使用情况。
- Main section 向您展示了 JS、解析、渲染和绘制 activity。
有关 性能 面板的更多信息,请参阅 Performance Analysis Reference。