[JavaScript][dhtml] 반복문 문자열 처리 방법

DB 쿼리 결과, 또는 XML 데이터, Ajax 데이터 등등을 동적으로 화면에 출력해야 하는경우 몇가지 방법을 실험을 통해 실현해 보았습니다. 누가누가 가장 빠른가 이죠.

 

방법 1.

Html += ("<p>테스트</p>");
Object.innerHTML = Html;

 

방법 2.

Object.innerHTML += ("<p>테스트</p>");

방법 3.

Object.insertAdjacentHTML("beforeEnd", ("<p>테스트</p>"));

 

방법 4.

Object.appendChild(document.createElement('p')).innerText = ("테스트");

 

1000 회 이상 반복시켰을경우 극명한 성능 차이를 보입니다.

저는 1번이 가장 빠를것이라고 생각했습니다. 객체를 생성하는것 보다는 텍스트를 직접 다루는것이 가장 빠를 것이라고 예상한 것이죠. 2번은 좋지 않을 것 같았고, 3번과 4번은 비슷하거나 3번이 빠를 것이라고 생각했습니다.

 

결과는

 

방법4 > 방법3 > 방법1 >>>>> 방법2

 

그 차이가 놀라울 정도입니다. 방법2는 느린 정도가 아니라 아무리 기다려도 루프가 끝나지 않아 코드를 잘못 작성했나 의심하기에 이르렀습니다. innerHTML 을 계속 반복적으로 로드하게 되어 반복이 계속 될수록 기하급수적으로 느려지는 것 같습니다.

 

이로 부터 알수 있는것은 결과를 누적해서 출력하는것 보다는 매회 결과를 출력하는것이 빠르다는 것입니다. 방법3, 4 는 루프를 반복할수록 반복횟수만큼 비례적으로 시간이 소요됩니다. 100번 한것보다 1000번 한것이 10배 소요됩니다. 방법1, 2 는 지수적으로(exponentially ) 소요시간이 증가합니다.

 

그나저나 방법4 가 방법3 보다 압도적으로 빠른 이유는...

 

내부적으로 어떻게 처리 되는지 제가 알 수는 없지만 앞으로 코드를 어떻게 작성해야 할지 시사하는 바는 매우 큰것 같습니다.

[출처] [dhtml] 반복문 문자열 처리 방법|작성자 도마도