使用Python&Streamlit开发Web应用，如何解读Chrome Performance面板？

核心面板区域说明 #

1. 顶部控制栏 #

• 录制按钮：点击圆形按钮开始录制，期间操作你的Streamlit应用，完成后点击停止或按Ctrl+E。可勾选Memory选项，同时捕获内存占用数据，方便排查内存泄漏。
• 筛选器：输入streamlit或python能快速定位和应用相关的进程，过滤掉浏览器自身的无关进程。

2. 时间轴概览（Overview） #

• 三个波形图从下到上分别是：
  • FPS（帧率）：绿色柱越高帧率越高，红色块表示卡顿，重点关注Streamlit页面渲染、交互（比如按钮点击后刷新）时的帧率波动。
  • CPU使用率：蓝色块对应浏览器进程，黄色是渲染引擎，紫色是脚本执行。如果CPU拉满，说明应用的某个操作（比如数据计算、组件渲染）占用了过多资源。
  • NET（网络请求）：每条彩色横线代表一个网络请求，Streamlit应用可能会有静态资源加载、后端接口请求（比如st.experimental_memo缓存的资源），长横线表示请求耗时久。

3. 主详情区（Main Thread） #

这是核心分析区域，Streamlit的前端渲染、后端返回数据后的页面更新都在主线程执行：

• 每个彩色块代表一个任务，鼠标悬停能看到任务名称、耗时：
  • 紫色（Scripting）：JavaScript脚本执行，比如Streamlit的前端逻辑处理、组件渲染脚本。如果有大块紫色且耗时超过100ms，说明脚本执行慢，可能是组件初始化或数据解析耗时久。
  • 蓝色（Rendering）：页面布局计算（Layout）和绘制（Paint），Streamlit动态更新页面时会触发重排重绘，大块蓝色说明页面元素频繁变更导致渲染压力大。
  • 绿色（Painting）：像素绘制到屏幕，连续的绿色块可能是页面滚动、组件刷新时的重复绘制。
  • 灰色（Idle）：主线程空闲，这部分占比越高说明应用越流畅。
• 点击任务块可展开详情，查看调用栈，定位到具体的函数或代码片段，比如Streamlit的某个组件渲染函数。

4. 调用栈分析 #

定位到耗时任务后，展开调用栈：

• 找到和应用逻辑相关的调用（比如包含streamlit标识的函数），看哪个函数占用时间最长。比如如果是数据加载后渲染表格组件耗时久，可能需要优化数据格式或分页加载。
• 注意Long Tasks（耗时超过50ms的任务），这些是导致页面卡顿的主要原因，Streamlit应用中常见于大数据量的组件渲染、未缓存的复杂计算。

针对Streamlit应用的重点排查方向 #

• 关注页面初始化时的CPU峰值：如果启动时CPU拉满，检查是否有未缓存的全局计算（比如没加st.experimental_memo的函数）。
• 交互操作后的任务：比如点击按钮触发页面刷新，看主线程是否有长时间的Scripting任务，排查是后端数据返回慢还是前端渲染卡顿。
• 内存面板联动：如果同时录制了内存，看内存占用是否持续上升，排查是否有未释放的资源（比如未关闭的文件句柄、全局变量累积的数据）。

内容的提问来源于stack exchange，提问作者MYK