Javascript 性能优化

Question

我创建了以下js函数

function csvDecode(csvRecordsList)
{
    var cel;
    var chk;
    var chkACB;
    var chkAF;
    var chkAMR;
    var chkAN;
    var csvField;
    var csvFieldLen;
    var csvFieldsList;
    var csvRow;
    var csvRowLen = csvRecordsList.length;
    var frag = document.createDocumentFragment();
    var injectFragInTbody = function () {tblbody.replaceChild(frag, tblbody.firstElementChild);};
    var isFirstRec;
    var len;
    var newEmbtyRow;
    var objCells;
    var parReEx = new RegExp(myCsvParag, 'ig');
    var tblbody;
    var tblCount = 0;
    var tgtTblBodyID;

    for (csvRow = 0; csvRow < csvRowLen; csvRow++)
    {
        if (csvRecordsList[csvRow].startsWith(myTBodySep))
        {
            if (frag.childElementCount > 0)
            {
                injectFragInTbody();
            }
            tgtTblBodyID = csvRecordsList[csvRow].split(myTBodySep)[1];
            newEmbtyRow = getNewEmptyRow(tgtTblBodyID);
            objCells = newEmbtyRow.cells;
            len = newEmbtyRow.querySelectorAll('input')[0].parentNode.cellIndex; // Finds the cell index where is placed the first input (Check-box or button)

            tblbody = getElById(tgtTblBodyID);
            chkAF = toBool(tblbody.dataset.acceptfiles);
            chkACB = toBool(tblbody.dataset.acceptcheckboxes) ;
            chkAN = toBool(tblbody.dataset.acceptmultiplerows) ;
            tblCount++;
            continue;
        }

        csvRecordsList[csvRow] = csvRecordsList[csvRow].replace(parReEx, myInnerHTMLParag); // Replaces all the paragraph symbols ¶ used into the db.csv file with the tag <br> needed into the HTML content of table cells, this way will be possible to use line breaks into table cells
        csvFieldsList = csvRecordsList[csvRow].split(myEndOfFld);

        csvFieldLen = csvFieldsList.length;
        for (csvField = 0; csvField < csvFieldLen; csvField++)
        {
            cel = chkAN ? csvField + 1 : csvField;
            if (chkAF && cel === 1) {objCells[cel].innerHTML =  makeFileLink(csvFieldsList[csvField]);} 
            else if (chkACB && cel === len) {objCells[cel].firstChild.checked = toBool(csvFieldsList[csvField]);}
            else {objCells[cel].innerHTML = csvFieldsList[csvField];}
        }
        frag.appendChild(newEmbtyRow.cloneNode(true));
    }
    injectFragInTbody();

    var recNum = getElById(tgtTblBodyID).childElementCount;
    customizeHtmlTitle();
    return csvRow - tblCount + ' (di cui '+ recNum + ' record di documenti)';
}

超过 90% 的记录可能包含必须由以下 makeFileLink 函数处理的文件名:

function makeFileLink(fname)
{
    return ['<a href="', dirDocSan, fname, '" target="', previewWinName, '" title="Apri il file allegato: ', fname, '" >', fname, '</a>'].join('');
}

它旨在从特殊类型的 *.db.csv 文件(=逗号分隔的值，其中逗号被我硬编码到 var myEndOfFld 中的另一个符号替换)中解码记录列表。 (这种特殊类型的 *.db.csv 是由我编写的另一个函数创建的，它只是一个“文本”文件)。

用于解码并附加到 HTML 表格的记录列表通过其唯一参数传递给函数: (csvRecordsList) .

来自更多 HTML 表的托管数据进入 csv 文件。

表格的行数和列数以及其他一些包含的数据类型(可能是文件名、数字、字符串、日期、复选框值)是不同的。

一些表可能只有 1 行，其他表接受更多行。

一行数据具有以下基本结构:

data field content 1|data field content 2|data field content 3|etc...

一旦被我的算法解码，它就会被正确地渲染到 HTML td 元素中，即使在一个字段中有更多的段落。事实上，标签将被添加到代码需要的地方:

csvRecordsList[csvRow].replace(par, myInnerHTMLParag)

它替换了我选择用来表示我硬编码到变量 myCsvParag 中的段落符号的所有字符。 .

在编程时无法知道要加载到每个表中的记录数、从 CSV 文件加载的记录数、每条记录的字段数或哪个表字段将包含数据或将是空的: 在同一条记录中，某些字段可能包含数据，其他字段可能为空。一切都必须在运行时被发现。

在特殊的 csv 文件中，每个表与下一个表被一行分隔，只包含一个具有以下模式的字符串: myTBodySep = tablebodyid 哪里 myTBodySep = "targettbodydatatable"这只是我选择的硬编码字符串。
tablebodyid 只是一个占位符，其中包含一个字符串，该字符串表示要插入新记录的目标表 tbody 元素的 id，例如:tBodyDataCars、tBodyDataAnimals...等。

因此，当第一个 for 循环在 csvRecordsList 中找到一个字符串时，该字符串与该字符串一起进入变量 myTBodySep 它从同一行获取 tablebodyid:这将是新的 tbodyid，必须将其作为注入(inject)下一条记录的目标

每个表都归档到 CSV 文件中

第一个 for 循环扫描文件中的 csv 记录列表，第二个 for 循环准备用数据编译目标表所需的内容。

上面的代码运行良好，但有点慢:实际上，将 CSV 文件中的大约 300 条记录加载到 HTML 表中，在具有 2 GB 内存和 Pentium 核心 2 4300 双核的计算机上需要多花 2.5 秒的时间核心频率为 1800 MHz，但如果我评论更新 DOM 的行，该函数需要不到 0.1 秒。所以恕我直言，瓶颈是代码的片段和 DOM 操作部分。

我的目标和希望是在不丢失功能的情况下优化上述代码的速度。

请注意，我只针对现代浏览器，我不关心其他浏览器和不符合标准的浏览器......我为他们感到抱歉......

有什么建议？
提前致谢。

编辑 16-02.2018

我不知道它是否有用，但最后我注意到如果从浏览器 sessiontorage 加载数据，加载和渲染时间或多或少减半。但奇怪的是，从文件和 session 存储加载数据的功能完全相同。
我不明白为什么会出现这种不同的行为，因为数据完全相同，并且在这两种情况下，在开始检查性能计时之前都将其传递给由函数本身处理的变量。

编辑 18.02.2018

行数取决于目标表:从 1 到 1000(在特定情况下可能更多)

列数取决于目标表:从 10 到 18-20

Answer 1

事实上，使用 DOM 操作构建表比简单的要慢得多 innerHTML更新表格元素。

如果您尝试重写代码以准备一个 html 字符串并将其放入表格的 innerHTML 中，您将看到显着的性能提升。

浏览器经过优化以解析 text/html他们从服务器收到，因为这是他们的主要目的。通过 JS 的 DOM 操作是次要的，所以它们没有那么优化。

我为你做了一个简单的基准测试。

让我们制作一个 300x300 的表格并用“A”填充 90000 个单元格。
有两个功能。

第一个是代码的简化变体 使用 DOM methods :

var table = document.querySelector('table tbody');
var cells_in_row = 300, rows_total = 300;

var start = performance.now();
fill_table_1();
console.log('using DOM methods: ' + (performance.now() - start).toFixed(2) + 'ms');

table.innerHTML = '<tbody></tbody>';


function fill_table_1() {
  var frag = document.createDocumentFragment();

  var injectFragInTbody = function() {
    table.replaceChild(frag, table.firstElementChild)
  }

  var getNewEmptyRow = function() {
    var row = table.firstElementChild;
    if (!row) {
      row = table.insertRow(0);
      for (var c = 0; c < cells_in_row; c++) row.insertCell(c);
    }
    return row.cloneNode(true);
  }

  for (var r = 0; r < rows_total; r++) {
    var new_row = getNewEmptyRow();
    var cells = new_row.cells;
    for (var c = 0; c < cells_in_row; c++) cells[c].innerHTML = 'A';
    frag.appendChild(new_row.cloneNode(true));
  }
  injectFragInTbody();
  return false;
}

<table><tbody></tbody></table>

第二个准备html字符串放入表的innerHTML :

var table = document.querySelector('table tbody');
var cells_in_row = 300, rows_total = 300;

var start = performance.now();
fill_table_2();
console.log('setting innerHTML: ' + (performance.now() - start).toFixed(2) + 'ms');

table.innerHTML = '<tbody></tbody>';

function fill_table_2() {// setting innerHTML
  var html = '';
  for (var r = 0; r < rows_total; r++) {
    html += '<tr>';
    for (var c = 0; c < cells_in_row; c++) html += '<td>A</td>';
    html += '</tr>';
  }
  table.innerHTML = html;
  return false;
}

<table><tbody></tbody></table>

我相信你会得出一些结论。