Блог

У меня проблема при использовании таблицы GridTable (sap.ui.table.Таблица) в SAPUI5. Когда пользователь изменяет размер любого из столбцов, браузер зависает на срок до 30 секунд, пока размер столбца не будет фактически изменен.

Интересно то, что когда одна и та же таблица заполняется разными данными (но все равно (почти) одинаковыми столбцами), эта проблема не возникает.

Проблемная таблица:

Рабочий стол:

Я попытался изменить очевидные различия (значок/цвет в первой строке, строка с заголовком «Текст», содержимое ячеек), но проблема постоянно возникает при загрузке проблемной таблицы. С рабочей таблицей это всегда работает нормально, даже при перезагрузке страницы.

Я начал анализировать производительность двух таблиц при изменении размера столбцов. Для проблемной таблицы огромная часть производительности уходит на это:

On the other hand with the working table that operation only takes a few 100ms.

When looking at the «Recalculate Style» operation it says «Forced reflow is a likely performance bottleneck.». When looking at the code at that position the only thing happening is setting a few classes like sapUiTableColRsz and sapUiTable sapUiTableSelModeSingle sapUiTableCHdr sapUiTableM sapUiTableVScr sapUiTableEdt sapUiTableHScr . So it seems like the same operations are done for both but one table consistently takes more than 100 times the amount of time. The most likely reason is the amount of rows in both tables. But the table with the performance issues has at most 5 times as many rows which is not in proportion to the longer time it takes.

This is how the table is generated:

 var oTable = new sap.ui.table.Table({ 
    selectionBehavior: "RowOnly",
    selectionMode: "Single",
    enableGrouping: true,
    visibleRowCount: 18,
});
// creating a single column
oTable.addColumn(new sap.ui.table.Column({
    label: sLabel,
    template: new sap.m.Label({
        text: {
            path: aKeys[i],
            formatter: function(sValue) {
                if (sValue amp;amp; typeof sValue === "string" amp;amp; sValue.indexOf("∑") != -1)
                    this.setDesign("Bold");
                else this.setDesign(null);
                    return sValue;
            } 
        }
    }),
    width: sWidth,
    sortProperty: aKeys[i],
    visible: bVisible
}) );
 

У кого-нибудь есть какие-либо идеи о том, как можно решить эту проблему с производительностью?