Streamlit实时绘图阻塞元素渲染问题及优化方案咨询

问题描述 #

原代码通过while True无限循环更新折线图，但这种方式会阻塞Streamlit的UI渲染流程，导致后续的toggle组件无法加载，同时引发页面响应迟缓。改用有限次数的for循环虽能缓解，但仍需等待循环结束才能交互，无法实现真正的实时响应。

解决方案 #

Streamlit的核心运行机制是每次用户交互或页面刷新时重新执行整个脚本，因此不能用阻塞式的无限循环。推荐以下两种无阻塞的实现方式：

方案1：使用st.autorefresh()（官方推荐，Streamlit 1.23+）

这是Streamlit官方提供的自动刷新API，可定时触发页面重新运行，既保证数据实时更新，又不阻塞其他UI组件的交互。

import streamlit as st
from random import random

# 初始化Session State，用于跨页面刷新保存数据
if "data" not in st.session_state:
    st.session_state.data = []

# 设置自动刷新，间隔0.1秒，关闭刷新开关可停止
autorefresh_enabled = st.toggle("开启实时刷新", value=True)
if autorefresh_enabled:
    st.autorefresh(interval=100, key="data_refresh")  # interval单位为毫秒

# 更新数据并绘制图表
st.session_state.data.append(random())
if len(st.session_state.data) > 30:
    st.session_state.data = st.session_state.data[-30:]
st.line_chart(st.session_state.data)

# 其他UI组件可正常交互
if st.toggle("Show message"):
    st.write("Meggase")

原理说明：

• st.session_state用于在页面多次刷新间保存数据，避免每次运行都重置列表
• st.autorefresh()定时触发页面重新执行脚本，每次运行都会更新数据并绘制图表，同时处理所有UI组件（包括toggle）
• 可通过开关控制是否开启自动刷新，灵活控制流程

方案2：使用st.rerun()配合Session State

如果使用旧版Streamlit（低于1.23），可通过st.rerun()手动触发页面刷新，结合Session State保存数据：

import streamlit as st
from random import random
from time import sleep

# 初始化Session State
if "data" not in st.session_state:
    st.session_state.data = []
if "refresh" not in st.session_state:
    st.session_state.refresh = True

# 控制刷新开关
st.session_state.refresh = st.toggle("开启实时刷新", value=True)

# 更新数据并绘图
st.session_state.data.append(random())
if len(st.session_state.data) > 30:
    st.session_state.data = st.session_state.data[-30:]
st.line_chart(st.session_state.data)

# 其他UI组件
if st.toggle("Show message"):
    st.write("Meggase")

# 自动触发刷新
if st.session_state.refresh:
    sleep(0.1)
    st.rerun()

注意：这种方式需要短暂的sleep，但不会阻塞UI，因为每次脚本执行完成后才会触发rerun，其他组件仍能正常响应。

关键要点 #

• 永远不要在Streamlit脚本中使用阻塞式的无限循环（如while True），这会中断UI渲染流程
• 利用st.session_state跨页面刷新保存状态数据
• 优先使用官方提供的st.autorefresh()，实现更简洁、性能更优的自动刷新

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