大批量的DOM操做如何優化

特別是大批量的DOM操做，只要一次有幾百上千的級別就容易形成頁面卡頓。特別是不要在一個for循環裏不斷地修改DOM，以下代碼：

for(var i = 0; i < 1000; i++) {
    ul.appendChild(li);
}

這種能夠先把li拼好了，再一次性append到ul裏面，以下代碼：

var fragment = document.createDocumentFragment();
for(var i = 0; i < 1000; i++) {
    fragment.appendChild(li);
}
ul.appendChild(fragment);

可是仍是要注意數據量特別大的狀況，你可能要使用setTimeout的方式分段處理數據，甚至使用多線程。使用setTimeout能夠這樣：

function sliceWorks(data, finishedCallback) {
    if(!data.length) {
        finishedCallback();
    } else {
        const PIECES = 100;
        process(data.splice(0, PIECES));
        setTimeout(() => sliceWorks(data, finishedCallback), 100);
    }
}