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的段落符號的所有char。

在編程時不可能知道每個表中要加載的記錄數，也不能知道從CSV文件加載的記錄數，也不知道每個記錄的字段數或者哪個表字段將包含數據或將為空：在同一記錄中，某些字段可能包含其他可能為空的數據。 必須在運行時發現一切。

進入特殊的csv文件，每個表與下一個表分隔一行，其中只包含一個具有以下模式的字符串： myTBodySep = tablebodyid其中myTBodySep =“targettbodydatatable” ，這只是我選擇的硬編碼字符串。 tablebodyid只是一個占位符，它包含一個字符串，表示要插入新記錄的目標表tbody元素的id，例如：tBodyDataCars，tBodyDataAnimals ......等。

因此，當第一個for循環找到csvRecordsList時，一個字符串與字符串一起進入變量myTBodySep，它從同一行獲取tablebodyid：這將是新的tbodyid，必須用於注入其中的下一個記錄

每個表都存檔到CSV文件中

第一個for循環從文件中掃描csv記錄列表，第二個for循環准備用數據編譯目標表所需的內容。

上面的代碼運行良好，但有點慢：事實上，從CSV文件中加載大約300條記錄的HTML表格，在2 GB RAM和Pentium core 2 4300 dual的計算機上需要2.5秒多一點核心在1800 MHz，但如果我評論更新DOM的行，該功能需要不到0.1秒。 所以恕我直言，瓶頸是片段和DOM操縱代碼的一部分。

我的目標和希望是在不失去功能的情況下優化上述代碼的速度。

請注意，我的目標只是現代瀏覽器，我不關心其他瀏覽器和非標准兼容的瀏覽器...我為他們感到遺憾......

有什么建議么？ 提前致謝。

編輯16-02.2018

我不知道它是否有用但最后我注意到，如果從瀏覽器會話存儲中加載數據，則加載和渲染時間或多或少減半。 但奇怪的是，它是從文件和sessionstorage加載數據的完全相同的函數。 我不明白為什么這種不同的行為考慮到數據完全相同，並且在開始檢查性能時序之前，在兩種情況下都被傳遞給由函數本身處理的變量。

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

祝好運！