在PyQt中嵌入Plotly时WebGL禁用导致的性能问题排查

问题描述 #

将Plotly可视化嵌入PyQt5 GUI时，出现以下问题：

• 单独运行Plotly代码处理大量数据时性能正常，但嵌入PyQt后性能显著下降
• 收到WebGL未激活的性能警告，手动添加self.browser.page().settings().setAttribute(QtWebEngineWidgets.QWebEngineSettings.WebGLEnabled, True)启用WebGL后无效果

原代码 #

from PyQt5 import QtCore, QtWidgets, QtWebEngineWidgets

import numpy          as np
import pandas         as pd
import plotly.express as px

class Widget(QtWidgets.QWidget):
    def __init__(self, df, parent=None):
        super().__init__(parent)
        self.browser = QtWebEngineWidgets.QWebEngineView(self)
        
        # WebGL enabled: this line appears to be useless
        self.browser.page().settings().setAttribute(QtWebEngineWidgets.QWebEngineSettings.WebGLEnabled, True)
        
        vlayout = QtWidgets.QVBoxLayout(self)
        vlayout.addWidget(self.browser)

        fig = px.scatter(df, x='x', y='y', color='lambda', log_x=True, log_y=True, opacity=0.10)
        self.browser.setHtml(fig.to_html(include_plotlyjs='cdn'))
        
        self.resize(1000,800)

if __name__ == "__main__":
    
    N = 20000
    
    col0 = 400 + 400 * np.random.random(N)
    col1 = np.linspace(1,N,N) * np.random.normal(1,0.5,N)
    col2 = np.linspace(1,N,N) * np.random.normal(1,5,N)
    result = np.array([col0, col1, col2]).T
    df = pd.DataFrame(result, columns=['lambda', 'x', 'y'])
    
    app = QtWidgets.QApplication([])
    widget = Widget(df)
    widget.show()
    app.exec()

报错信息 #

[1784:7704:1202/161033.541:ERROR:gles2_cmd_decoder.cc(10941)] [.WebGL-000001AB7779E4D0]PERFORMANCE WARNING: Attribute 0 is disabled. This has significant performance penalty
js: [.WebGL-000001AB7779E4D0]PERFORMANCE WARNING: Attribute 0 is disabled. This has significant performance penalty

解决方案 #

1. 修正WebGL启用时机 #

当前设置WebGL的时机过早，QWebEngineView的page尚未完全初始化，导致设置无效。可通过两种方式修复：

方式一：全局配置WebGL

在创建QApplication后，全局设置默认WebEngineProfile的WebGL属性：

if __name__ == "__main__":
    app = QtWidgets.QApplication([])
    # 全局启用WebGL
    profile = QtWebEngineWidgets.QWebEngineProfile.defaultProfile()
    profile.settings().setAttribute(QtWebEngineWidgets.QWebEngineSettings.WebGLEnabled, True)
    
    # 后续代码不变
    N = 20000
    # ...生成数据...
    widget = Widget(df)
    widget.show()
    app.exec()

方式二：页面加载完成后启用

通过loadFinished信号触发WebGL设置：

class Widget(QtWidgets.QWidget):
    def __init__(self, df, parent=None):
        super().__init__(parent)
        self.browser = QtWebEngineWidgets.QWebEngineView(self)
        vlayout = QtWidgets.QVBoxLayout(self)
        vlayout.addWidget(self.browser)

        fig = px.scatter(df, x='x', y='y', color='lambda', log_x=True, log_y=True, opacity=0.10)
        self.browser.setHtml(fig.to_html(include_plotlyjs='cdn'))
        # 绑定加载完成信号
        self.browser.loadFinished.connect(self.enable_webgl)
        
        self.resize(1000,800)
    
    def enable_webgl(self):
        self.browser.page().settings().setAttribute(QtWebEngineWidgets.QWebEngineSettings.WebGLEnabled, True)

2. 使用Plotly WebGL优化图表 #

Plotly提供了专门针对大数据量的gl系列图表，利用WebGL加速渲染，替换普通散点图为scatter_gl：

fig = px.scatter_gl(df, x='x', y='y', color='lambda', log_x=True, log_y=True, opacity=0.10)

该图表对十万级以上数据的渲染性能远高于普通散点图，且会自动利用WebGL能力。

3. 其他性能优化建议 #

• 本地引入plotly.js：使用include_plotlyjs='directory'（需提前下载plotly.js到本地目录）或指定本地文件路径，避免CDN网络加载延迟：

  fig.to_html(include_plotlyjs='./plotly.min.js')
  

• 数据采样：如果业务允许，对大数据集进行采样，减少渲染的数据量：

  sampled_df = df.sample(n=10000, random_state=42)  # 采样10000条数据
  

• 异步生成图表：将图表生成逻辑放到子线程，避免阻塞GUI主线程，提升界面响应性：

  from PyQt5.QtCore import QThread, pyqtSignal
  
  class PlotWorker(QThread):
      html_ready = pyqtSignal(str)
      
      def __init__(self, df):
          super().__init__()
          self.df = df
      
      def run(self):
          fig = px.scatter_gl(self.df, x='x', y='y', color='lambda', log_x=True, log_y=True, opacity=0.10)
          html = fig.to_html(include_plotlyjs='cdn')
          self.html_ready.emit(html)
  
  class Widget(QtWidgets.QWidget):
      def __init__(self, df, parent=None):
          super().__init__(parent)
          self.browser = QtWebEngineWidgets.QWebEngineView(self)
          vlayout = QtWidgets.QVBoxLayout(self)
          vlayout.addWidget(self.browser)
          
          # 启动子线程生成图表
          self.worker = PlotWorker(df)
          self.worker.html_ready.connect(self.browser.setHtml)
          self.worker.start()
          
          self.resize(1000,800)
  

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