Wie konnte ich diese exportierende Datenfunktion mit Javascript beschleunigen

Question

Ich habe eine Funktion für Benutzer, um die Datenbankinformationen exportieren zu können. Wenn der Benutzer jedoch alle Optionen zum Exportieren auswählt, dauert das Herunterladen der CSV-Datei mindestens 1 Minute. Ich nehme nur 1 Teil der if-Anweisung, wo ich alle Daten einziehe.

hier ist sie:

function exportTheData() { 
     //get the data for data array 
     if(exportVolumeData == 1) { 

      for(j=0; j<plantData1.length; j++) { 

       i = plantData["MergeKey_lvl00"].indexOf(plantData1["MergeKey_lvl00"][j]); 

       data.push(plantData["PlantName"][i]); 

       if(statesExport == 1) { 
        countyindex = counties["CountyId"].indexOf(plantData["LocationId"][i]); 
        stateid = counties["StateId"][countyindex]; 
        statename = states["StateName"][states["StateId"].indexOf(stateid)]; 

        data.push(statename); 
       } 
       if(countyExport == 1) { 
        countyindex = counties["CountyId"].indexOf(plantData["LocationId"][i]); 
        countyname = counties["CountyName"][countyindex]; 

        data.push(countyname); 
       } 
       if(basinsExport == 1) { 
        countyindex = counties["CountyId"].indexOf(plantData["LocationId"][i]); 
        subbasinid = counties["SubBasinId"][countyindex]; 
        subbasinindex = basinSub["SubBasinId"].indexOf(subbasinid); 
        basinid = basinSub["BasinId"][subbasinindex]; 
        basinindex = basin["BasinId"].indexOf(basinid); 
        basinname = basin["BasinName"][basinindex]; 

        data.push(basinname); 
       }   
       if(subBasinsExport == 1) { 
        countyindex = counties["CountyId"].indexOf(plantData["LocationId"][i]); 
        subbasinid = counties["SubBasinId"][countyindex]; 
        subbasinindex = basinSub["SubBasinId"].indexOf(subbasinid); 
        subbasinname = basinSub["SubBasinName"][subbasinindex]; 

        data.push(subbasinname); 
       }   
       if(paddsExport == 1) { 
        countyindex = counties["CountyId"].indexOf(plantData["LocationId"][i]); 
        subpaddid = counties["SubPaddId"][countyindex]; 
        subpaddindex = paddSub["SubPaddId"].indexOf(subpaddid); 
        paddid = paddSub["PaddId"][subpaddindex]; 
        paddindex = padd["PaddId"].indexOf(paddid); 
        paddname = padd["PaddName"][paddindex]; 

        data.push(paddname); 
       }   
       if(subPaddsExport == 1) { 
        countyindex = counties["CountyId"].indexOf(plantData["LocationId"][i]); 
        subpaddid = counties["SubPaddId"][countyindex]; 
        subpaddname = paddSub["SubPaddName"][paddSub["SubPaddId"].indexOf(subpaddid)]; 

        data.push(subpaddname); 
       }   
       if(fullNameExport == 1) { 
        companyindex = getCompanyInfo["MergeKey_lvl00"].indexOf(plantData["OperatorId"][i]); 
        fullname = getCompanyInfo["FullName"][companyindex]; 

        data.push(fullname); 
       }   
       if(shortNameExport == 1) { 
        companyindex = getCompanyInfo["MergeKey_lvl00"].indexOf(plantData["OperatorId"][i]); 
        shortname = getCompanyInfo["ShortName"][companyindex]; 

        data.push(shortname); 
       }   
       if(tickerExport == 1) { 
        companyindex = getCompanyInfo["MergeKey_lvl00"].indexOf(plantData["OperatorId"][i]); 
        ticker = getCompanyInfo["Ticker"][companyindex]; 

        data.push(ticker); 
       } 

       volumeindex = plantData1["MergeKey_lvl00"].indexOf(plantData["MergeKey_lvl00"][i]); 
       startdate = plantData1["MonthStartDate"][volumeindex]; 
       volumetypeindex = plantData2["VolumeTypeId"].indexOf(plantData1["VolumeTypeId"][j]); 
       volumetype = plantData2["VolumeType"][volumetypeindex]; 
       volumeunit = plantData2["Unit"][volumetypeindex]; 
       volume = plantData1["Volume"][volumeindex]; 

       data.push(startdate); 
       data.push(volumetype); 
       data.push(volumeunit); 
       data.push(volume); 
      } 

     /* * Convert our data to CSV string */ 
     var CSVString = prepCSVRow(titles, titles.length, ''); 
     CSVString = prepCSVRow(data, titles.length, CSVString); 
     /* * Make CSV downloadable*/ 
     var downloadLink = document.createElement("a"); 
     var blob = new Blob(["\ufeff", CSVString]); 
     var url = URL.createObjectURL(blob); 
     downloadLink.href = url; 
     downloadLink.download = "data.csv"; 
     /** Actually download CSV */ 
     document.body.appendChild(downloadLink); 
     downloadLink.click(); 
     document.body.removeChild(downloadLink); 
    } 

Hier ist, wo ich den Daten-Array in der CSV-Zeichenfolge konvertieren:

 function prepCSVRow(arr, columnCount, initial) { 
     var row = ''; // this will hold data 
     var delimeter = ','; // data slice separator, in excel it's `;`, in usual CSv it's `,` 
     var newLine = '\r\n'; // newline separator for CSV row 
    /* * Convert [1,2,3,4] into [[1,2], [3,4]] while count is 2 
     * @param _arr {Array} - the actual array to split 
     * @param _count {Number} - the amount to split 
     * return {Array} - splitted array */ 
     function splitArray(_arr, _count) { 
     var splitted = []; 
     var result = []; 
     _arr.forEach(function(item, idx) { 
      if ((idx + 1) % _count === 0) { 
      splitted.push('"' + item + '"'); 
      result.push(splitted); 
      splitted = []; 
      } else { 
      splitted.push('"' + item + '"'); 
      } 
     }); 
     return result; 
     } 
     var plainArr = splitArray(arr, columnCount); 
     // don't know how to explain this 
     // you just have to like follow the code 
     // and you understand, it's pretty simple 
     // it converts `['a', 'b', 'c']` to `a,b,c` string 
     plainArr.forEach(function(arrItem) { 
     arrItem.forEach(function(item, idx) { 
      row += item + ((idx + 1) === arrItem.length ? '' : delimeter); 
     }); 
     row += newLine; 
     }); 
     return initial + row; 
    } 

Jede Idee, wie ich das oben beschleunigen könnte? Wir haben über 6.000 Datenzeilen in der Datenbank. Vielen Dank!

Answer 1

Das Ändern der Daten.push .. auf Daten [data.length] = .. hat die Funktion viel schneller gemacht. Außerdem habe ich Variablen für Countyindex und Companyindex erstellt, anstatt sie mehrmals in derselben Funktion aufzurufen.

Auch der letzte Teil der Funktion Reinigung wirklich geholfen:

/* * Convert our data to CSV string */ 
var CSVString = prepCSVRow(titles, titles.length); 
CSVString += prepCSVRow(data, titles.length); 

/* * Make CSV downloadable*/ 
var downloadLink = document.createElement('a'), 
    blob   = new Blob(['\ufeff', CSVString]); 

downloadLink.href  = URL.createObjectURL(blob); 
downloadLink.download = 'data.csv'; 

/** Actually download CSV */ 
document.body.appendChild(downloadLink); 
downloadLink.click(); 
document.body.removeChild(downloadLink);