Dennis Dennis - 15 days ago 14
Javascript Question

Qooxdoo table tooltips performance

I am using qooxdoo 5.0.1 and I have a performance problem with the table header tooltips.

For now the Table has only 49 Columns an I got a tooltip for 44 Columns.

Only the creating of the table an formatting the columns inside takes something about 40 seconds.

Without table header tooltips it´s about 2 seconds.

Here is a part of my creating Method.



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





I also separate this part of code. Alone it´s about 35 seconds.

Can anyone tell me the problem? Or am I doing something wrong?

Answer

And another answer, offering an optimization which leads to tremendous performance gain.

The pane header (qx.ui.table.pane.Header) is far away from being optimized regarding header updates. Every time you add a new header cell renderer, the complete table gets recalculated and redrawn, where every time all columns get removed and added again.

I've suffered from the same problem and created a solution which blocks header updates until the addition of columns has ended.

The solution needs you to derive your own subclasses from qx.ui.table.pane.Header and qx.ui.table.Table. The crucial method is _updateContent in qx.ui.table.pane.Header, which causes in the end the table to be reconstructed on every column added.

To circumvent this behavior, I've added a property blockHeaderUpdate which, when set to true, inhibits the permanent reconstruction and updates the table when set to false again.

Please see the playground example at

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

and paste it's content to

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

The table shows up nearly instantly.