Блог

Главная - Вопросы по программированию - javascript alert () не показывает корректное время выполнения веб-приложения

javascript alert () не показывает корректное время выполнения веб-приложения

#javascript #datatables #sheetjs

#javascript #таблицы данных #sheetjs

Вопрос:

Используя следующий код, я пытаюсь отобразить загруженный файл Excel в браузере в формате datatable. Для больших файлов, содержащих более 1000 строк и 25 столбцов, это занимает ~ 3-4 секунды, что, я полагаю, можно улучшить. Однако это время измеряется с помощью секундомера на мобильном телефоне. Однако для измерения точного времени я использовал performance.now() внутри кода функция оповещения неправильно отображает время. как это исправить? а также возможно ли сократить время загрузки файла? Спасибо.

 <html>

<head>
    <!-- libs needed for datatable -->
    <!-- <script src="https://code.jquery.com/jquery-3.5.1.js"></script> -->
    <!-- <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script> -->
    <!-- <link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css"> -->
    <script src="jquery-3.5.1.js"></script>
    <script src="DataTables/DataTables-1.10.21/js/jquery.dataTables.min.js"></script>
    <link rel="stylesheet" href="DataTables/DataTables-1.10.21/css/jquery.dataTables.min.css">

    <!-- libs need for sheetJS -->
    <script lang="javascript" src="sheetjs-master/dist/xlsx.full.min.js"></script>

    <!-- custom js script with util functions -->
    <script src="js_uitlities.js"></script>

    <!-- AdminLTE -->
    <!-- Font Awesome Icons -->
    <link rel="stylesheet" href="AdminLTE-3.0.5/plugins/fontawesome-free/css/all.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="AdminLTE-3.0.5/dist/css/adminlte.min.css">
</head>

<body>
    <!-- browse excel -->
    <!-- <div id="wrapper"> -->
    <div class="custom-file mb-2 mt-2">
        <!-- <input type="file" id="input-excel"> -->
        <input type="file" class="custom-file-input" id="input-excel">
        <label class="custom-file-label" for="customFile">Choose file</label>
        <script>
            // Add the following code if you want the name of the file appear on select
            $(".custom-file-input").on("change", function () {
                var fileName = $(this).val().split("\").pop();
                $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
            });
        </script>
    </div>

    <!-- display table in datatable format -->
    <div id="my_tab">
        <h3 id="tab_title"></h3>
        <p id="timer"></p>
        <table id="my_datatable" class="display"></table>
        <tr>
    </div>

    <!-- dynamically create table using uploaded xlsx -->
    <script>
        load_excel('#input-excel');
    </script>
</body>

</html>

и содержимое js_uitlities.js заключается в следующем:

 // load excel file using jquery and time it
function load_excel(excel_id) {
    // const { performance } = require('perf_hooks');
    if (typeof require !== 'undefined') performance = require('perf_hooks');
    const t0 = performance.now();
    $(excel_id).change(function (e) {
      var reader = new FileReader();
      // var timerStart = Date.now();
      reader.readAsArrayBuffer(e.target.files[0]);
  
      reader.onload = function (e) {
        var data = new Uint8Array(reader.result);
        var wb = XLSX.read(data, {
          type: 'array'
        });
  
        var htmlstr = XLSX.write(wb, {
          sheet: "",
          type: 'binary',
          bookType: 'html'
        });
        htmlstr = modify_htmlstr(htmlstr, "<tr>", "</tr>", "<thead>", "</thead>");
  
        document.getElementById("my_tab").firstElementChild.innerHTML = 'Uploaded excel file';
        document.getElementById("my_datatable").innerHTML = htmlstr;
        $("#my_datatable").DataTable();
        const t1 = performance.now();
        var time_dfiff = t1 - t0;
        document.getElementById("timer").innerHTML  = "time taken = "   time_dfiff   " secs";
        console.log(time_dfiff);
        alert("time taken = "   time_dfiff   " secs");
        // alert("time to load the table is "  Date.now() - timerStart);
      }
    });
  }

// modify htmlstr as returned by XLSX.write function
function modify_htmlstr(htmlstr, pat, pat2, str_after_open_match, str_after_close_match) {
    var open_match = htmlstr.search(pat);
    var close_match = htmlstr.search(pat2);
    htmlstr_sub = htmlstr.substring(open_match, close_match)
    htmlstr_sub_rep = htmlstr_sub.replace(/td/gi, "th")
    htmlstr = [htmlstr.slice(0, open_match), htmlstr_sub_rep, htmlstr.slice(close_match)].join('');
    htmlstr = [htmlstr.slice(0, open_match), str_after_open_match, htmlstr.slice(open_match)].join('');
    close_match = htmlstr.search(pat2)   pat2.length;
    htmlstr = [htmlstr.slice(0, close_match), str_after_close_match, htmlstr.slice(close_match)].join('');
    return (htmlstr);
  }


function modify_htmlstr_mannual(htmlstr) {
    var output = "<html><head><meta charset='utf-8'/><title>SheetJS Table Export</title></head><body><table><thead><tr><th>uniprot</th><th>logFC</th></thead></tr><tr><td>P49327</td><td>1.059124008</td></tr><tr><td>P40121</td><td>2.676020531</td></tr></table></body></html>"
    return(output);
}

Комментарии:

1. У меня хороший опыт работы с console.time

2. @Gerard, спасибо за ваше время. используя консоль.время, которое я вижу, занимает ~ 2900 мс, какие оптимизации я должен внести, чтобы еще больше сократить?