Как увеличить производительность d c -tableview. js (D C. js, Crossfilter, data tables, ajax)?

Question

Я использую d c -tableview таблицу на основе таблиц данных с примерно 1000 строк и 20 столбцов (большинство из них - небольшие целые числа), но таблица занимает в основном от 3 до 6 секунд для загрузки при загрузке страницы.

DeferRender активирован (true) для отображения только текущей страницы (5 строк).

В качестве источника данных I используйте размеры кроссфильтра (доступ осуществляется через .columns ([data: "...")]) Данные в настоящее время сохраняются в javascript csv-строке и используются кросс-фильтром. Я использую ajax для загрузки страницы.

Есть ли какие-либо другие оптимизации производительности для таблицы d c -tableview?

Изменить : я мог бы немного увеличить производительность. На данный момент тайминги выглядят так ( DOM: 1,48 с, Загрузка 4,36 с ):

I have no big timings in network tab (cordova.js is missing in browser).

The dc-tableview.js table takes about 500ms to 1000ms to load (when I log it in the console). So this is 1/3 to 1/2 of the whole DOM-Render time.

Peformance Record looks like this:

введите описание изображения здесь

Как вы думаете, это еще можно улучшить? Есть другие идеи?

Код довольно сложный, поэтому мне нужно знать, какую часть кода вам нужно увидеть.

Answer 1

Хорошо, я нашел некоторые оптимизации для общей нагрузки.

Таблица занимает около 500 мс для загрузки, что не так много, но все же число - вероятно, из-за большого d c -tableview.bs.min. js файл ( 100'000 + строк без минификации).

Я спрашиваю себя, можно ли и насколько легко его очистить (возможно, удалите неиспользуемые функции, такие как кнопки экспорта и прочее). Существует более легкая версия. js, доступная на github , но мне нужна функция «перемещения столбца», которая доступна только в полном режиме.

Вот как Я мог оптимизировать производительность:

1. Используйте события , чтобы отложить загрузку некритических функций (загружается после первого рендеринга):

для браузера:

window.addEventListener("load", function(){
...
});

для мобильного (кордова):

document.addEventListener("deviceready", function (event){
...
});

Поместите все (исходные данные, которые анализируются) в кеш , поэтому его нужно анализировать только один раз.

Minify все. js и. css

Изменить размер изображения и оптимизировать сжатие

Уменьшить количество d c -tableview столбцов по возможности

Есть другие рекомендации?