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：未終止的字符串常量