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)。

到 csv 文件中的是来自更多 HTML 表的托管数据。

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

有些表可能只有 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 where myTBodySep = "targettbodydatatable" 这只是我选择的硬编码字符串。 tablebodyid 只是一个占位符，其中包含一个字符串，表示要在其中插入新记录的目标表 tbody 元素的 id，例如：tBodyDataCars、tBodyDataAnimals...等。

因此，当第一个 for 循环在 csvRecordsList 中找到一个字符串，该字符串与该字符串一起进入变量 myTBodySep 时，它会从同一行获取 tablebodyid：这将是必须定位的新 tbodyid用于在其中注入下一条记录

每个表都归档到 CSV 文件中

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

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

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

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

有什么建议吗？ 提前致谢。

编辑 16-02.2018

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

编辑 18.02.2018

1. 行数因目标表而异：从 1 到 1000（在特定情况下可能更多）
2. 取决于目标表的列数：从 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>

相信你会得出一些结论。

Answer 2

我有两个想法给你。

1：如果您想知道代码的哪些部分（相对）较慢，您可以使用此处描述的技术进行非常简单的性能测试。我没有阅读您提供的所有代码示例，但您可以自己添加这些性能测试并检查哪些操作需要更多时间。

2：我对 JavaScript 和浏览器的了解是，更改 DOM 是一项昂贵的操作，您不想更改 DOM 太多次。相反，您可以做的是构建一组更改，然后通过一次 DOM 更改应用所有这些更改。这可能会使您的代码不太好，但这通常是您想要获得高性能时的权衡。

让我知道这对你有什么影响。

Answer 3

您应该首先在多个函数中重构您的代码，使其更具可读性。确保将 DOM 操作函数与数据处理函数分开。理想情况下，创建一个类并将这些变量从您的函数中取出，这样您就可以使用this 访问它们。

然后，您应该在web worker 中执行处理数据的每个函数，这样您就可以确定您的 UI 不会被进程阻塞。您将无法在 Web Worker 中访问 this，因此您必须将其限制为纯“输入/输出”操作。

您也可以使用promises 代替自制回调。它使代码更具可读性，并且更容易调试。你可以做一些很酷的事情，比如：

this.processThis('hello').then((resultThis) => {
    this.processThat(resultThis).then((resultThat) => {
        this.displayUI(resultThat);
    }, (error) => {
        this.errorController.show(error); //processThat error
    });
}, (error) => {
    this.errorController.show(error); //processThis error
});

祝你好运！