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文件(=一个逗号分隔的值中，用另一个符号i硬编码到var myEndOfFld中替换逗号)来解码记录列表。(这种特殊类型的*.db.csv是由我编写的另一个函数创建的，它只是一个“文本”文件)。

要解码和附加到HTML表的记录列表通过其唯一参数：(csvRecordsList).传递给函数。

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

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

有些表可能仅为1行，而另一些表则可以接受更多行。

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

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

一旦被我的算法解码，它将被正确地呈现到HTML元素中，即使在一个字段中还有更多的段落。事实上，标签

将在代码需要的地方添加：

csvRecordsList[csvRow].replace(par, myInnerHTMLParag)

这将替换我选择的所有字符，以表示硬编码到变量myCsvParag中的段落符号。

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

在特殊的csv文件中，每个表与下一个表之间由一行分隔，它只包含一个字符串，其模式如下：myTBodySep = tablebodyid，其中myTBodySep =“table pattern”，这是我选择的硬编码字符串。tablebodyid id只是一个占位符，它包含一个字符串，表示目标表tbody元素的id，以便在其中插入新记录，例如: tBodyDataCars、tBodyDataAnimals.等。

因此，当第一个for循环在csvRecordsList中找到一个字符串，并将该字符串发送到变量myTBodySep中时，它将从同一行获取表体in :这将是新的tbodyid，必须将其中的下一个记录注入其中。

每个表都被归档到CSV文件中。

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

上面的代码工作得很好，但有点慢:实际上，从CSV文件加载到HTML表中大约需要300条记录，在一台拥有2 GB内存和奔腾核2 4300双核的计算机上，需要2.5秒的时间，但如果我评论更新DOM的行，函数所需的时间不到0.1秒。所以IMHO瓶颈是代码的片段和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访问它们。

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

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

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
});

祝好运!