innerHtml 최소화

innerHTML 횟수는 최소한으로 하는 것이 좋다. 브라우저는 갱신할 때마다 렌더링을 거치게 되기 때문이다. 자세한 내용은 브라우저가 웹을 그리는 법에서 확인할 수 있다

//루프를 돌 때마다 브라우저가 웹페이지를 다시 그린다.
for(var i=0; i<100; i++){
    document.getElementById('list').innerHTML += "<li>list</li>";
}

let list = '';
for(var i=0; i<100; i++){
    list += "<li>list</li";
}

document.getElementById('list')+=list;