相关疑难解决方法(0)

我总是认为,不是为了性能原因而反复触摸DOM,我们应该使用a documentFragment来附加多个元素,然后将片段附加到文档中一次,而不是一次又一次地重复添加新元素进入DOM.

我一直在尝试使用Chrome的开发工具来分析这两种方法,使用此测试页面:

<button id="addRows">Add rows</button>
<table id="myTable"></table>

测试1使用此代码向表中追加50000个新行:

let addRows = document.getElementById('addRows');
addRows.addEventListener('click', function () {
    for (let x = 0; x < 50000; x += 1) {
        let table = document.getElementById('myTable'),
            row = document.createElement('tr'),
            cell = document.createElement('td'),
            cell1 = cell.cloneNode(),
            cell2 = cell.cloneNode(),
            cell3 = cell.cloneNode();

        cell1.textContent = 'A';
        cell2.textContent = 'B';
        cell3.textContent = 'C';

        row.appendChild(cell1);
        row.appendChild(cell2);
        row.appendChild(cell3);
        table.appendChild(row);
    }
});

在Chrome的时间轴工具中录制时单击按钮会产生以下输出:

测试2使用此代码:

let addRows = document.getElementById('addRows');
addRows.addEventListener('click', function () {
    let table = document.getElementById('myTable'),
        cell = …