QWebEngineView渲染含大数据的Bokeh可视化交互卡顿问题排查

问题背景 #

在PySide6应用中用QWebEngineView加载Bokeh生成的静态HTML时，可视化渲染正常，但缩放、平移等交互操作极度卡顿；同一HTML在Firefox中打开则交互流畅。可视化包含2个各8760个数据点的时间序列。

最小复现示例 #

from argparse import ArgumentParser
from pathlib import Path

from PySide6.QtCore import QUrl, QSize
from PySide6.QtWidgets import QApplication, QMainWindow
from PySide6.QtWebEngineWidgets import QWebEngineView


class MainWindow(QMainWindow):
    def __init__(self, path: str = "", *args, **kwargs):
        super().__init__(*args, **kwargs)

        if path:
            self.browser = QWebEngineView()
            self.browser.setUrl(QUrl.fromLocalFile(Path(path).absolute()))
            self.setCentralWidget(self.browser)
            self.resize(QSize(800, 500))


if __name__ == "__main__":
    # Bokeh生成的示例HTML：dump-viz.html
    parser = ArgumentParser()
    parser.add_argument("file")
    opts = parser.parse_args()

    app = QApplication()
    window = MainWindow(opts.file)
    window.show()
    app.exec()

运行方式：

1. 创建虚拟环境并安装依赖：pip install PySide6
2. 执行脚本：python pyside-qwebengine-slow.py qwebengine-ex-viz.html

Bokeh可视化生成代码 #

def make_plot(data_list):
    """`data_list`: 代表时间序列的数据类列表；包含data.y, data.labels等属性"""
    palette = TolRainbow[10]
    cds = ColumnDataSource(data=pd.DataFrame({data.labels[0]: data.y for data in data_list}))
    legend_items = {}
    fig = figure(x_axis_label="x_label", y_axis_label="y_label", title="title", height=400, width=800)
    for idx, data in enumerate(data_list):
        line = fig.line("index", data.labels[0], source=cds, color=palette[idx])
        point = fig.scatter("index", data.labels[0], source=cds, color=palette[idx], size=7)
        legend_items[data.labels[0]] = [line, point]

    legend = Legend(items=list(legend_items.items()))
    fig.add_layout(legend, "right")
    fig.legend.click_policy = "hide"
    return fig

fig = make_plot(data_list)
html = file_html(fig, INLINE, title)

卡顿原因分析 #

1. QWebEngine默认性能限制：Qt的QWebEngineView基于Chromium，但默认配置为轻量化，关闭了部分硬件加速、JS即时编译（JIT）等性能特性；而桌面浏览器（如Firefox）默认启用这些优化，交互效率更高。
2. 线程资源竞争：QWebEngine的JS线程与Qt主线程可能存在资源竞争，当Qt应用有其他任务时，交互事件的响应优先级被压低，导致卡顿。
3. 引擎适配差异：Bokeh的前端JS代码在不同浏览器引擎上执行效率有差异，Qt WebEngine的Chromium版本可能较旧，对部分JS特性或渲染API的支持不够高效。

解决办法 #

1. 启用QWebEngine性能优化 #

在应用启动前配置环境变量，或调整QWebEngineSettings开启关键性能特性：

from PySide6.QtWebEngineCore import QWebEngineSettings

# 启动前设置Chromium优化参数
import os
os.environ["QTWEBENGINE_CHROMIUM_FLAGS"] = "--enable-gpu-rasterization --enable-native-gpu-memory-buffers"

app = QApplication()

# 配置WebEngine核心设置
settings = QWebEngineSettings.defaultSettings()
settings.setAttribute(QWebEngineSettings.JavascriptEnabled, True)
settings.setAttribute(QWebEngineSettings.WebGLEnabled, True)
settings.setAttribute(QWebEngineSettings.Accelerated2dCanvasEnabled, True)
settings.setAttribute(QWebEngineSettings.JavascriptJitEnabled, True)

2. 优化Bokeh可视化减少渲染负载 #

• 降采样数据：对时间序列进行降采样，降低总数据点数量，或使用Bokeh内置的downsample变换：

  from bokeh.transform import downsample
  
  line = fig.line("index", downsample(data.labels[0]), source=cds, color=palette[idx])
  

• 简化图层：如果不需要散点标记，移除scatter图层；或减小散点的size值，降低渲染压力。
• 改用Bokeh Server模式：替代静态HTML，通过Bokeh Server实时渲染，减少前端JS计算负载，同时可通过bokehqt直接集成到PySide应用，避免QWebEngine的中转开销。

3. 调整Qt应用线程策略 #

避免在Qt主线程执行耗时任务，确保QWebEngine的渲染线程有足够资源；若应用逻辑复杂，可将非UI的耗时操作移至子线程处理。

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