Qooxdoo表工具提示性能

Question

我正在使用qooxdoo 5.0.1，并且我对表头标题工具提示有性能问题。

现在，表格只有49列，我有44列的工具提示。

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

没有表标题工具提示它大约2秒。

这是我创建方法的一部分。

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

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

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

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

 
\t \t \t \t var tableColumnModel = this._table.getTableColumnModel(); 
 

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

 
\t \t \t return this._table; 
 
\t \t },

我还分离这部分代码。单独它大约35秒。

谁能告诉我这个问题吗？或者我做错了什么？

Answer 1

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

窗格标题（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/

表几乎是立刻显示出来。

Answer 2

这里，你可以在其中添加了50列，每一个工具提示操场（http://www.qooxdoo.org/current/playground）运行工作的例子 - 它完成了超过1.5秒的Chrome 56在Mac以及Chrome 54在Windows上刚刚超过1.5秒。它是基于你的代码，但作为您的样品是不完整的，我不得不添加样本数据报头等等

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 3

感谢您的回答@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 
}); 

对于终端服务器上使用谷歌浏览器开发53 I'm。但我注意到终端服务器和我开发的虚拟化PC上不同浏览器的时间。

赢终端服务器2008：
歌剧便携式41.0 = 10秒
铬53 = 45秒
火狐43 = 7秒

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