Qooxdoo table 工具提示性能

Question

我正在使用 qooxdoo 5.0.1，table header 工具提示出现性能问题。

现在 Table 只有 49 列，我得到了 44 列的工具提示。

仅创建 table 格式化其中的列大约需要 40 秒。

没有 table header 工具提示大约需要 2 秒。

这是我的部分创作方法。

createTable  : function (pAryTableHeaderData) {
   this.debug("createTable");

   this._tableModel = new qx.ui.table.model.Simple();
   this._tableModel.setColumns(this.__tableHeaders, this.__tableIDs);

   this._table = new qx.ui.table.Table(this._tableModel);

   // Setzen der Spalteneigenschaften
   for (var i = 0; i < pAryTableHeaderData["length"]; i++) {

    var tableColumnModel = this._table.getTableColumnModel();

    // Setzen Tooltips für die Spaltenüberschriften
    if (pAryTableHeaderData[i][6]) {
     var cellHeader = new qx.ui.table.headerrenderer.Default();
     cellHeader.setToolTip(pAryTableHeaderData[i][6]);
     tableColumnModel.setHeaderCellRenderer(
      i,
      cellHeader
     );
    }
   }

   return this._table;
  },

我也把这部分代码分开了。单独约 35 秒。

谁能告诉我问题所在？还是我做错了什么？

Answer 1

这是一个工作示例，您可以在 playground (http://www.qooxdoo.org/current/playground) 中运行添加 50 列，每列都有一个工具提示 - 它在 Chrome 56 的 1.5 秒内完成在 Mac 上超过 1.5 秒，在 Chrome 上超过 1.5 秒，在 Windows 上超过 54 秒。它基于您的代码，但由于您的样本不完整，我不得不为 headers 等添加样本数据

this.debug("createTable");

var tableHeaders = [];
var tableIDs = [];
for (var i = 0; i < 50; i++) {
  tableHeaders.push("Header #" + i);
  tableIDs.push("id" + i);
}

var tableModel = new qx.ui.table.model.Simple();
tableModel.setColumns(tableHeaders, tableIDs);

var table = new qx.ui.table.Table(tableModel);
var tableColumnModel = table.getTableColumnModel();


// Setzen der Spalteneigenschaften
for (var i = 0; i < 50; i++) {
    var cellHeader = new qx.ui.table.headerrenderer.Default();
    cellHeader.setToolTip("Tooltip #" + i);
    tableColumnModel.setHeaderCellRenderer(
        i,
        cellHeader
    );
}

var doc = this.getRoot();
doc.add(table,
{
  left : 10,
  top  : 10
});

速度上的差异可能是由于您使用的数据不同造成的 - 请尝试使用 playground 创建一个可重现的问题示例，并说明您使用的是什么浏览器 - 您可以 post在这里或在 Gitter 上谈论它 (https://gitter.im/qooxdoo/qooxdoo)

Answer 2

感谢您回答@johnspackman。我现在用我的数据创建了一个可运行的游乐场示例：

var tableHeaders = [
  "R-Nr",  "Rech-Dat",  "Sammelr",  "Kunden-Nr",  "R-Empf",  "Art",  "Auf-Nr",  "Auf-Dat",  "Anz-Pos.",  "Wert Brutto",
  "Wert netto",  "Zu/Ab",  "R-Zuschl.",  "Nebenkosten",  "Skonto",  "Storniert",  "Ihre Zeichen",  "Unsere Zeichen",
  "Zahlart",  "Sofort",  "Stat-Upd",  "Bonus",  "MwSt-frei",  "MwSt-Betrag",  "Brutto-Pr",  "Rabatt-Dr",  "Rech-Addr-Nr",
  "Rechnungsadresse",  "Zahlungsfreigabe",  "Ertrag",  "IBAN",  "BIC",  "Lief-Bed",  "Lief-Text",  "Lief-Termin",
  "Lief-Addr-Nr",  "Lieferadresse",  "Zahl-Bed",  "Zahl-Text",  "Filiale",  "Filiale Name",  "Rech-KZ",  "Rech-Bez",
  "Sachb-Nr",  "Sachb-Kurzz",  "Sachb-Name",  "Vertr-Weg",  "Vertr-Bez",  "Form-Nr",  "Form-Bez"
  ];

var tableIDs = [
  "j_rnr",  "rk_dat",  "rk_sammel",  "j_kunr",  "rk_rekunr",  "rk_aufart",  "j_aufnr",  "rk_akdat",  "rk_anzpos",
  "rk_wertBrutto",  "rk_wertNetto",  "rk_srabatt",  "rk_klrzu",  "rk_fakost",  "rk_skbetrag",  "rk_storno",
  "rk_izei",  "rk_uzei",  "rk_zart",  "rk_sofort",  "rk_update",  "rk_bonus",  "rk_mwstfrei",  "z_stbetrag",
  "rk_brunet",  "rk_rabdr",  "rk_jrlfdnr",  "rech_name",  "j_gsnr",  "z_angwert",  "j_kto",  "j_blz",
  "j_lbnr",  "lb_text",  "rk_ltermin",  "rk_jllfdnr",  "lief_name",  "j_zab",  "zb_text",  "j_filial",  "fa1_name",
  "j_sammelkz",  "skz_bez",  "j_minr",  "mi_kurz",  "ad_name1",  "j_vwnr",  "vw_bez",  "j_fonr",  "fo_bez"
  ];

var toolTips = [
  "Rechnungsnummer",  "Rechnungsdatum",  "Sammelrechnung",  "Kundennummer",  "Rechnungsempfänger",  "Auftragsart",
  "Auftragsnummer",  "Auftragsdatum",  "Anzahl Positionen",  "Rechnungswert brutto",  "Rechnungswert netto",
  "Zu- und Abschlag in %",  "Rechnungs- bzw. Kleinrechnungszuschlag",  "",  "Skontobetrag",  "Rechnung storniert",
  "",  "",  "",  "Sofortrechnung",  "Statistikupdate",  "Bonusfähig",  "Mehrwertsteuerfrei",  "Mehrwertsteuerbetrag",
  "Bruttopreise",  "Rabattdruck",  "Rechnungsadresse",  "Rechnungsadresse",  "Zahlungsfreigabe",  "",  "",  "",
  "Lieferbedingung Schlüssel",  "Lieferbedingung Text",  "Liefertermin",  "Lieferadresse",  "Lieferadresse",
  "Zahlungsbedingung Schlüssel",  "Zahlungsbedingung Text",  "Filialnummer",  "Filialname",  "Rechnungskennzeichen",
  "Rechnungskennzeichen Bezeichnung",  "Sachbearbeiter Mitarbeiternummer",  "Sachbearbeiter Kurzzeichen",
  "Sachbearbeiter Name 1",  "Vertriebsweg",  "Vertriebsweg Bezeichnung",  "Formularnummer",  "Formularbezeichnung"
  ];

var tableModel = new qx.ui.table.model.Simple();
tableModel.setColumns(tableHeaders, tableIDs);

var table = new qx.ui.table.Table(tableModel);
var tableColumnModel = table.getTableColumnModel();

// Setzen der Spalteneigenschaften
for (var i = 0; i < toolTips["length"]; i++) {
    var cellHeader = new qx.ui.table.headerrenderer.Default();
    cellHeader.setToolTip(toolTips[i]);
    tableColumnModel.setHeaderCellRenderer(
        i,
        cellHeader
    );
}

var doc = this.getRoot();
doc.add(table,
{
  left : 10,
  top  : 10
});

为了开发，我在终端服务器上使用 Google Chrome 53。但我注意到终端服务器和我正在开发的虚拟化 PC 上不同浏览器的时间。

Win 终端服务器 2008：
Opera 便携式 41.0 = 10 秒
Chrome 53 = 45 秒
Firefox 43 = 7 秒

Win 10 PC：
Opera 41.0 = 10 秒
Chrome 54 = 12 秒
Firefox 50 = 8 秒
Edge = SyntaxError: 未终止的字符串常量

Answer 3

还有另一个答案，提供了一种优化，可带来巨大的性能提升。

窗格 header (qx.ui.table.pane.Header) 远未针对 header 更新进行优化。每次添加新的 header 单元格渲染器时，都会重新计算和重新绘制完整的 table，每次都会删除并再次添加所有列。

我遇到了同样的问题并创建了一个解决方案，该解决方案会阻止 header 更新，直到列的添加结束。

该解决方案需要您从 qx.ui.table.pane.Header 和 qx.ui.table.Table 派生自己的子类。关键方法是 qx.ui.table.pane.Header 中的 _updateContent，它最终导致 table 在添加的每一列上都被重建。

为了避免这种行为，我添加了一个属性 blockHeaderUpdate，当设置为 true 时，它会禁止永久重建并在再次设置为 false 时更新 table。

请参阅

上的 playground 示例

https://gist.github.com/level420/1ca8f4d5b40c9c11c4088965eae57375

并将其内容粘贴到

http://www.qooxdoo.org/devel/playground/

table 几乎立即出现。

Qooxdoo table 工具提示性能

Qooxdoo table tooltips performance

javascript

jquery

qooxdoo