Увеличиваем скорость работы Tanstack Table быстрее в 1000 раз
В блоге Jp Camara статья с разбором проблемы с производительностью библиотеки Tanstack Table. Проблема была в том, что при использовании таблицы с группировкой столбцов, рендеринг 50к строк занимал 30-40 секунд. Использовать браузерный профайлер было невозможно из-за слишком медленной работы приложения. Поэтому для оценки скорости рендера и поиска проблемных мест использовался console.time.
Проблема была обнаружена внутри функции группировки библиотеки Tanstack Table:
function groupBy(rows, columnId) {
const groupMap = new Map<any, Row<TData>[]>()
return rows.reduce((map, row) => {
const resKey = `${row.getValue(columnId)}`
const previous = map.get(resKey)
if (!previous) {
map.set(resKey, [row])
} else {
map.set(resKey, [...previous, row])
}
return map
}, groupMap)
}
Здесь использовался спред оператор […previous, row] для конкатенации текущей строки в конец массива. Так как он использовался внутри другого цикла reduce, то сложность функции группировки была O(n^2). Поэтому для 50к строк выполнялось 2,5 миллиарда итераций.
jpcamara.com/2023/03…ble.html
