자바스크립트의 innerHTML을 사용하여 엘리먼트 추가시 성능향상을 위해 생각할 부분

17,146
View Count

주소 복사하기

자바스크립트의 innerHTML을 사용하여 엘리먼트 추가시 성능향상을 위해 생각할 부분

만약 자바스크립트를 사용하여 다수의 엘리먼트를 추가할 때... innerHTML을 사용한다면 성능 개선을 위해 어떤 방법을 사용할지 생각할 필요가 있습니다.
예를들어 아래의 코드를 보시면 ul 리스트 태그에 다수의 li 요소를 추가한 뒤 원하는 위치에 이동시키는 코드입니다.

여기에 리스트 아이템을 추가하겠습니다.

for(var i=0; i < 10; i++) {
var elem = document.createElement('li');
elem.innerHTML = '<a href="/' + i + '">';
document.getElementById('list').append(elem);
}

위 코드는 li 태그 10개를 만들어 각각 list ID를 가진 ul 태그에 추가합니다. 이 경우 성능 개선을 위해 코드 수정이 필요합니다. 아래를 봐주세요.

var elem = '';
for(var i=0; i < 10; i++) {
elem = elem + '<li><a href="/' + i + '"></li>';
}
document.getElementById('list').innerHTML = elem;

아래 방법의 경우 innerHTML 호출이 한번만 이루어집니다. innerHTML의 경우 node간의 파싱 과정이 필요하므로 가급적 한번만 호출, 사용하는 것이 성능에 좋습니다.

Q&A

아래의 글도 찾고 계시지 않나요?

mysql에서 다수의 쿼리를 병합하는 방법은?

자바스크립트 현재 요소를 기준으로 엘리먼트를 앞 또는 뒤에 추가하는 방법