如何知道何时使用Chrome开发工具:“性能与内存"标签 [英] How to know when to use Chrome Dev Tools: Performance vs Memory tab

问题描述

让我们说我的网络应用程序运行缓慢，我想确定可能的瓶颈.我首先进入网络"选项卡，查看服务器是否有问题，如果网络调用正常，那么我应该继续使用"性能"和"内存"选项卡吗?

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 and see if the server is the problem, if network calls are okay then I should proceed with performance and memory tabs?

性能"标签的用例和内存"标签的用例是什么?

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

推荐答案

性能"标签的用例和内存"标签的用例是什么?

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

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

The Performance panel gives you a complete view of the performance of a page during a recording. This includes network requests, JS execution, parsing, rendering, painting, etc.

内存面板为您提供有关页面如何使用内存的详细视图.人们大多使用它来调试内存问题.当页面使用时逐渐变慢时，有时会导致内存泄漏.当页面持续缓慢时，有时就是页面使用了过多的内存.

The Memory panel gives you detailed views into how a page is using memory. People mostly use it to debug memory issues. When a page gets progressively slower as you use it, that's sometimes a memory leak. When a page is consistently slow, that's sometimes a page that is using too much memory.

让我们说我的网络应用程序运行缓慢，我想确定可能的瓶颈.我首先进入网络"标签...

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...

实际上，我建议从 Performance 面板开始.它可以显示网络活动以及其他许多页面活动.确定问题出在网络之后，请转到网络"面板.

Actually, I recommend starting with the Performance panel. It can show you network activity, as well as a bunch of other page activity. Go to the Network panel after you've identified that the problem is a network problem.

1. 请参阅运行时性能入门以熟悉使用性能面板.
2. 记录页面加载

1. See Get Started With Runtime Performance to get familiar with the Performance panel.
2. Record the page load.

一旦您有录音， Performance 面板上会有很多不同的部分，可帮助您发现各种瓶颈:

Once you've got a recording, there's a bunch of different sections on the Performance panel that can help you spot various bottlenecks:

• 网络部分可以帮助您发现网络瓶颈.
• 内存部分可以帮助您查看内存使用情况.
• 主要部分向您显示JS，解析，渲染和绘画活动.

• The Network section can help you spot network bottlenecks.
• The Memory section can help you see memory usage.
• The Main section shows you JS, parsing, rendering, and painting activity.

请参阅性能分析参考 Performance 面板上的更多内容.

See Performance Analysis Reference for lots more on the Performance panel.

这篇关于如何知道何时使用Chrome开发工具:“性能与内存"标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！