Question

我使用的是qooxdoo 5.0.1，表头工具提示存在性能问题。

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

只有创建表格，内部列的格式化大约需要40秒。

没有表头工具提示大概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

这里有一个工作示例，你可以在操场上运行（http://www.qooxdoo.org/current/playground），它增加了50个列，每个列都有一个工具提示 - 它在1.5秒内在Mac上的Chrome 56上完成，仅需1.5秒在Windows上的Chrome 54上。它基于您的代码，但由于您的示例不完整，我必须为标题等添加示例数据。

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
});

速度的差异可能是由于您使用的数据不同造成的 - 请尝试使用游乐场创建问题的可重现示例并说出您正在使用的浏览器 - 您可以在此处发布或聊天关于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 Terminal-Server 2008：
Opera便携式41.0 = 10秒左右 Chrome 53 = 45秒 Firefox 43 = 7秒

赢得10台PC：
Opera 41.0 = 10秒左右 Chrome 54 = 12秒 Firefox 50 = 8秒左右 Edge = SyntaxError：未终止的字符串常量

Answer 3

另一个答案是，提供可以带来巨大性能提升的优化。

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

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

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

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

请参阅

的游乐场示例

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

并将其内容粘贴到

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

该表几乎立即出现。

Qooxdoo表工具提示性能

3 个答案: