Табулятор вертикальной прокрутки медленный и рывковый

Question

Я использую табулятор с большим количеством строк и столбцов.Вертикальная прокрутка медленная в любом браузере и: в Chrome она очень резкая - то есть останавливается и двигается, останавливается и двигается.В Firefox он мигает - т. Е. Весь табличный вид мигает белым - серый, а затем заполняется содержимым.Я не могу уловить это поведение на скриншотах, но вот подрядчик таблицы:

    var table = new Tabulator("#report-table", {
        ajaxURL:"getReportsFromDB.jsp",   // ajax URL
        ajaxParams:{'<%= DEVICE_ID_PARAM %>' : '<%= device_id %>',
                    '<%= DEVICE_ID_ARRAY_PARAM %>' : '<%= idArrayJSON %>',
                    '<%= DEVICE_NAME_PARAM %>' : '<%= device_name %>',
                    '<%= NUM_RECORDS_PARAM %>' : '<%= num_records %>',
                    '<%= WINDOW_NAME_PARAM %>' : '<%= window_name %>',
                    '<%= FROM_SELECT_REPORT_PARAM %>' : '<%= from_select_report %>',
                    '<%= START_DATE_PARAM %>' : '<%= start_date %>',
                    '<%= START_TIME_PARAM %>' : '<%= start_time %>',
                    '<%= STOP_DATE_PARAM %>' : '<%= stop_date %>',
                    '<%= STOP_TIME_PARAM %>' : '<%= stop_time %>',
                    '<%= NUM_WEEKS_PARAM %>' : '<%= num_weeks %>',
                    '<%= NUM_DAYS_PARAM %>' : '<%= num_days %>',
                    '<%= NUM_HOURS_PARAM %>' : '<%= num_hours %>',
                    '<%= EVENT_ARRAY_PARAM %>' : '<%= eventArrayJSON %>',
                    '<%= REPORTS_FROM_FILE_PARAM %>' : '<%= reports_from_file %>',
                    '<%= INSTALLER_PARAM %>' : '<%= installer %>',
                    'hiddenSelectDevice' : '<%= hiddenSelectDevice %>',
                    '<%= MODEL_PARAM %>' : '<%= device_model %>',
                    '<%= PREDEFINED_REPORT_INDEX_PARAM %>' : <%= predefined_report_index %>,
                    'first_report' : '<%= first_report %>',
                    '<%= ORDER_ID_PARAM %>' : '<%= order_id %>'}, //ajax parameters
        ajaxResponse:function(url, params, response){
            if (response.ERROR != null) {
                var messageDiv = document.getElementById("messageModalBody");
                messageDiv.innerHTML = "<p><mark class=\"red\">" + response.ERROR + "</mark></p>";
                message_modal.style.display = "block";
                console.log("response = " + response.ERROR);
            }
            return response; //return the tableData property of a response json object
        },
        ajaxError:function(xhr, textStatus, errorThrown){
            var messageDiv = document.getElementById("messageModalBody");
            messageDiv.innerHTML = "<p><mark class=\"red\">" + errorThrown + "</mark></p>";
            message_modal.style.display = "block";
        },
        // height:"100%",
        height:"800px",
        layout:"fitDataFill", //"fitColumns",
        selectable:true, //make rows selectable
        selectableRangeMode:"click",  // for multiple rows selection via shift button
        //selectableRollingSelection:true, // enable rolling selection for rows (default)
        selectablePersistence:true, // enable persistence of selection when view changes (Scroll) (default)
        persistentLayout: true,  // Enable layout persistence
        persistentSort: true,   // Enable sort persistence
        persistentFilter:true, //Enable filter persistence
        persistenceID:"examplePersistence",
        persistenceMode:"cookie", //store persistence information in a cookie
        tooltips:true,
        progressiveRender: true,
        progressiveRenderSize: 5,
        progressiveRenderMargin: 100,
        rowSelectionChanged:function(data, rows){
            selectedRows = rows;
            if ((rows !== undefined) && (rows !== null) && (rows.length > 0)) {
                console.log("rowSelectionChanged: Selected " + rows.length + " rows");
            }
        },
        columns:[
            {title:"<%= COUNTER %>", field:"id", sortable:false, /*cellClick:counterClick,*/ tooltip:"Click for selecting row for map"},
            {title:"<%= ID %>", field:"deviceID", sorter:"alphanum", width:"100", headerFilter:"input", cellClick:deviceIDClick, tooltip:"Click for further Device Options"},
            {title:"<%= EVENT %>", field:"eventType", sorter:"alphanum", headerFilter:"input", tooltip:false},
            {title:"<%= RECEIVE_TIME %>", field:"dateReceived", formatter:"datetime",
                formatterParams:{inputFormat:"MM/DD/YYYY hh:mm:ss", outputFormat:"YYYY/MM/DD hh:mm:ss", invalidPlaceholder:"Invalid Date", tooltip:false}, /*headerFilter:dateFilterEditor, headerFilterFunc:dateFilterFunction*/},
            {title:"<%= SEQ %>", field:"sequenceNumStr", sorter:"number", headerFilter:"input", formatter:sqlNumberFormatter, tooltip:false},
            {title:"<%= RTC_TIME %>", field:"dateRT", formatter:"datetime", formatterParams:{inputFormat:"MM/DD/YYYY hh:mm:ss", outputFormat:"YYYY/MM/DD hh:mm:ss", invalidPlaceholder:"Invalid Date"}, tooltip:false},
            {title:"<%= GPS_TIME %>", field:"dateGPS", formatter:gpsDateFormatter, tooltip:false},
            {title:"<%= GPS_STATUS %>", field:"gpsStatus", sorter:"string", headerFilter:"input", formatter:gspInfoFormatter, tooltip:false},
            {title:"<%= LAT %>", field:"latitudeStr", sorter:"number", headerFilter:"input", formatter:latitudeFormatter, cellClick:latLonClick, tooltip:"Click for highlighting the corresponding marker on the Map"},
            {title:"<%= LON %>", field:"longitudeStr", sorter:"number", headerFilter:"input", formatter:longitudeFormatter, cellClick:latLonClick, tooltip:"Click for highlighting the corresponding marker on the Map"},
            {title:"<%= MAIN_V %>", field:"mainPowerVStr", sorter:"number", headerFilter:"input", tooltip:false},
            {title:"<%= AUX_V %>", field:"auxPowerVStr", sorter:"number", headerFilter:"input", tooltip:false},
            {title:"<%= BACKUP_V %>", field:"backupPowerVStr", sorter:"number", headerFilter:"input", tooltip:false},
            {title:"<%= CHARGING_V %>", field:"chargingPowerVStr", sorter:"number", headerFilter:"input", tooltip:false},
            {title:"<%= DEVICE_STATUS %>", field:"deviceStatusStr", sortable:false, tooltip:false},
            {title:"<%= ALT %>", field:"altitudeStr", sorter:"number", headerFilter:"input", formatter:altitudeFormatter, tooltip:false},
            {title:"<%= SPEED %>", field:"speedMPHStr", sorter:"number", headerFilter:"input", formatter:gspInfoFormatter, tooltip:false},
            {title:"<%= HEADING %>", field:"headingStr", sorter:"number", headerFilter:"input", formatter:headingFormatter, tooltip:false},
            {title:"<%= NUM_SATS %>", field:"numSatsStr", sorter:"number", headerFilter:"input", formatter:gspInfoFormatter, tooltip:false},
            {title:"<%= HDOP %>", field:"hdopStr", sorter:"number", headerFilter:"input", formatter:gspInfoFormatter, tooltip:false},
            {title:"<%= ODOMETER %>", field:"odometerMilesStr", sorter:"number", headerFilter:"input", tooltip:false},
            {title:"<%= ENG_HOURS %>", field:"engineHoursStr", sorter:"number", headerFilter:"input", tooltip:false},
            {title:"<%= FUEL_LEVEL %>", field:"fuelLevelPercentStr", sorter:"number", headerFilter:"input", tooltip:false},
            {title:"<%= ODT_SINCE_MIL %>", field:"odtSinceMILMilesStr", sorter:"number", headerFilter:"input", tooltip:false},
            {title:"<%= ODT_SINCE_DTC_CLEAR %>", field:"odtSinceDTCClearMilesStr", sorter:"number", headerFilter:"input", tooltip:false},
            {title:"<%= ACC_INFO %>", field:"accelerometerInfo", sorter:"string", headerFilter:"input", tooltip:false},
            {title:"<%= ACC_X %>", field:"accelerometerXmm_s2Str", sorter:"number", headerFilter:"input", tooltip:false},
            {title:"<%= ACC_Y %>", field:"accelerometerYmm_s2Str", sorter:"number", headerFilter:"input", tooltip:false},
            {title:"<%= ACC_Z %>", field:"accelerometerZmm_s2Str", sorter:"number", headerFilter:"input", tooltip:false},
            {title:"<%= ACC_CALIB_X %>", field:"accelerometerXCalibStr", sorter:"number", headerFilter:"input", tooltip:false},
            {title:"<%= ACC_CALIB_Y %>", field:"accelerometerYCalibStr", sorter:"number", headerFilter:"input", tooltip:false},
            {title:"<%= ACC_CALIB_Z %>", field:"accelerometerZCalibStr", sorter:"number", headerFilter:"input", tooltip:false},
            {title:"<%= ORIENT_INFO %>", field:"orientInfo", sorter:"string", headerFilter:"input", tooltip:false},
            {title:"<%= ORIENT_X %>", field:"orientXStr", sorter:"number", headerFilter:"input", tooltip:false},
            {title:"<%= ORIENT_Y %>", field:"orientYStr", sorter:"number", headerFilter:"input", tooltip:false},
            {title:"<%= ORIENT_Z %>", field:"orientZStr", sorter:"number", headerFilter:"input", tooltip:false},
            {title:"<%= INTERN_TEMP %>", field:"internalTemperatureStr", sorter:"number", headerFilter:"input", tooltip:false},
            {title:"<%= AMBIENT_TEMP %>", field:"ambientTemperatureStr", sorter:"number", headerFilter:"input", tooltip:false},
            {title:"<%= RSSI %>", field:"RSSIStr", sorter:"number", headerFilter:"input", formatter:RSSIFormatter, tooltip:false},
            {title:"<%= SERVICE_TYPE %>", field:"serviceType", sorter:"string", headerFilter:"input", tooltip:false},
            {title:"<%= ROAMING %>", field:"roaming", sorter:"string", headerFilter:"input", tooltip:false},
            {title:"<%= COUNTRY %>", field:"country", sorter:"string", headerFilter:"input", tooltip:false},
            {title:"<%= NETWORK %>", field:"network", sorter:"string", headerFilter:"input", tooltip:false},
            {title:"<%= TOWER_ID %>", field:"towerID", sorter:"string", headerFilter:"input", tooltip:false},
            {title:"<%= CENTROID_LAT %>", field:"centroidLatStr", sorter:"number", headerFilter:"input", formatter:centroidLatFormatter, tooltip:false},
            {title:"<%= CENTROID_LON %>", field:"centroidLonStr", sorter:"number", headerFilter:"input", formatter:centroidLonFormatter, tooltip:false},
            {title:"<%= CELLULAT_BAND %>", field:"band", sorter:"string", headerFilter:"input", tooltip:false},
            {title:"<%= RXTXEC %>", field:"RxTxEc", sorter:"string", headerFilter:"input", tooltip:false},
            {title:"<%= VIN %>", field:"vinStr", sorter:"string", headerFilter:"input", tooltip:false},
            {title:"<%= ENG_LIGHT %>", field:"engLightStr", sorter:"string", headerFilter:"input", tooltip:false},
            {title:"<%= ENG_CODES %>", field:"engCodesStr", sorter:"string", headerFilter:"input", tooltip:false},
            {title:"<%= APP_VER %>", field:"appVersionStr", sorter:"string", headerFilter:"input", tooltip:false},
            {title:"<%= OS_VER %>", field:"osVersionStr", sorter:"string", headerFilter:"input", tooltip:false},
            {title:"<%= HW_VER %>", field:"hwVersionStr", sorter:"string", headerFilter:"input", tooltip:false},
            {title:"<%= HW_REV %>", field:"hwRevisionStr", sorter:"string", headerFilter:"input", tooltip:false},
            {title:"<%= IO_VER %>", field:"ioVersionStr", sorter:"string", headerFilter:"input", tooltip:false},
            {title:"<%= EXTENDER_VER %>", field:"extenderVersionStr", sorter:"string", headerFilter:"input"},
            {title:"<%= CONFIG_CHANGED %>", field:"deviceConfigChangedStr", sorter:"string", headerFilter:"input", tooltip:false},
            {title:"<%= CONFIG %>", field:"deviceConfigStr", sorter:"string", headerFilter:"input", tooltip:false},
            {title:"<%= CONFIG_DESC %>", field:"configurationDescStr", sorter:"string", headerFilter:"input", tooltip:false},
            {title:"<%= CARGO_TIME %>", field:"cargoTimeStr", formatter:"datetime", formatterParams:{inputFormat:"MM/DD/YYYY hh:mm:ss", outputFormat:"YYYY/MM/DD hh:mm:ss", invalidPlaceholder:"Invalid Date"}, tooltip:false},
            {title:"<%= CARGO_INFO %>", field:"cargoSensorInfoStr", sorter:"string", headerFilter:"input", tooltip:false},
            {title:"<%= PERIPH_PORT_TYPE %>", field:"peripheralPortTypeStr", sorter:"string", headerFilter:"input", tooltip:false},
            {title:"<%= PERIPH_PORT_NUM %>", field:"peripheralPortNumStr", sorter:"number", headerFilter:"input", tooltip:false},
            {title:"<%= PERIPH_DRIVER %>", field:"peripheralDriverStr", sorter:"string", headerFilter:"input", tooltip:false},
            {title:"<%= PERIPH_DESC %>", field:"peripheralDescStr", sorter:"string", headerFilter:"input", tooltip:false},
            {title:"<%= PERIPH_MODEL %>", field:"peripheralModelStr", sorter:"string", headerFilter:"input", tooltip:false},
            {title:"<%= PERIPH_REV %>", field:"peripheralRevStr", sorter:"string", headerFilter:"input", tooltip:false},
            {title:"<%= GPIO %>", field:"GPIOInfoStr", sorter:"string", headerFilter:"input", tooltip:false},
            {title:"<%= TFTP_STATUS %>", field:"TFTPStatusStr", sorter:"string", headerFilter:"input", tooltip:false},
            {title:"<%= LIGHT_SENTRY %>", field:"lightSentry", sorter:"string", headerFilter:"input", tooltip:false},
            {title:"<%= ABS_INFO %>", field:"ABS", sorter:"string", headerFilter:"input", tooltip:false},
            {title:"<%= ABS_ODOMETER %>", field:"ABSOdometerStr", sorter:"string", headerFilter:"input", tooltip:false},
            {title:"<%= BRAKE_STROKE %>", field:"brakeStroke", sorter:"string", headerFilter:"input", tooltip:false},
            {title:"<%= DOOR %>", field:"door", sorter:"string", headerFilter:"input", tooltip:false},
            {title:"<%= CHASSIS_MATING %>", field:"chassisMating", sorter:"string", headerFilter:"input", tooltip:false},
            {title:"<%= TIRES %>", field:"tires", sorter:"string", headerFilter:"input", tooltip:false},
            {title:"<%= TIRES_INFLATOR %>", field:"tiresInflator", sorter:"string", headerFilter:"input", tooltip:false},
            {title:"<%= TAG %>", field:"ACKRetriesNum", sorter:"number", headerFilter:"input", formatter:ACKFormatter, tooltip:"Number of device message send retries"},
            {title:"<%= IP %>", field:"deviceIP", sorter:"string", headerFilter:"input", tooltip:deviceIPTooltip},
            {title:"<%= RAW %>", field:"rawReport", sortable:false}
        ],
    });

Что я могу с этим поделать?

Answer 1

У меня та же проблема с таблицей данных из 37 столбцов x 7000 строк только с строками.У меня нет (пока) пользовательского форматера, но я использую многоуровневую (3) группировку.

Я использую последнюю версию табулятора 4.2 и Chrome 72.0 (64 бита).

Я использовал Chrome Profiler:чтобы выполнить большой переход в полосе прокрутки, требуется более 2 секунд, чтобы завершить рендеринг, проводя большую часть своего времени в глубоком рекурсивном вызове n._addBottomRow.

Я пытался установить группировку по полям чисел, ноэто не имеет никакого значения.