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 文件中解码记录列表(= 逗号分隔的值，其中逗号被我硬编码到变量 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，其中myTBodySep = "targettbodydatatable">，这只是我选择的硬编码字符串。 tablebodyid 只是一个占位符，其中包含一个字符串，表示要插入新记录的目标表 tbody 元素的 id，例如：tBodyDataCars、tBodyDataAnimals...等。

因此，当第一个 for 循环在 csvRecordsList 中找到一个字符串，该字符串与字符串一起盯着变量myTBodySep时，它会从同一行获取表体 ID：这将是新的 tbodyid，必须针对在其中注入下一条记录

每个表都存档到 CSV 文件中

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

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

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

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

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

编辑 16-02.2018

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

编辑18.02.2018

1. 行数因目标表而异：从 1 到 1000(在特定情况下可能更多)
2. 根据目标表的列数：从 10 到 18-20

Answer 1

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

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

浏览器经过优化，可以解析它们从服务器接收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，因此您必须将其限制为纯"输入/输出"操作。

您还可以使用承诺而不是自制回调。它使代码更具可读性，并且老实说更容易调试。你可以做一些很酷的事情，比如：

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

祝你好运！