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 },

Iはまた、コードのこの部分を分離します。それだけで約35秒です。

誰でも問題を教えてもらえますか？または私は何か間違っているのですか？

Answer 1

もう一つの答えは、パフォーマンスを大幅に向上させる最適化です。

ペインヘッダー（qx.ui.table.pane.Header）は、ヘッダーの更新に関する最適化から遠ざかっています。新しいヘッダーセルレンダラーを追加するたびに、完全な表が再計算され再描画され、すべての列が削除されて再び追加されます。

私は同じ問題を抱え、列の追加が終了するまでヘッダーの更新をブロックするソリューションを作成しました。

解決策は、qx.ui.table.pane.Headerとqx.ui.table.Tableから独自のサブクラスを派生させる必要があります。重要な方法はに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）で実行できる実例があります。これはMacのChrome 56では1.5秒、WindowsではChrome 54ではわずか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 
}); 

私はTerminal-ServerでGoogle Chrome 53を使用しています。しかし、私は、Terminal-Serverと私の開発している仮想化されたPC上の異なるブラウザの時間に注意します。

勝利ターミナル・サーバー2008：
オペラポータブル41.0 = 10秒
クローム53 = 45秒
のFirefox 43 = 7秒

勝利10 PC：
オペラ41.0 = 10秒
Chrome 54 = 12秒
Firefox 50 = 8秒
Edge = SyntaxError：終了しない文字列定数