appendChild와 innerHTML+=의 속도차이

지금 자바스크립트를 이용한 채팅을 만들고 있습니다.

만들다 보니 이용자가 과도하게 도배를 하게 되면 상대편이 끊김이 발생하면서 여러가지 문제로 인해 먹통이 되는 경우가 있었습니다.
document.getElementById('xxx').innerHTML+=로 단순히
채팅 한줄만 추가하는 부분인데..

제가 만들고 있는 것이 멀티 채팅방이기 때문에 여러방에서
여러개의 div가 수시로 업데이트 됩니다.
그래서 속도가 중요하다고 생각되어 appendChild와 innerHTML+=의 속도를 테스트
해 보았습니다.

각각 div안에 200회 추가와 1000번 추가를 해 보았습니다.
제 컴퓨터가 느려서 수치는 좀 높지만 참고하시면 좋을 것 같습니다.

결과는 모두 appendChild가 빨랐습니다.

===결과(수치가 작으면 빠릅니다. 단위 : 밀리초)===
<모질라 1000회>
- appendChild : 841
- innerHTML+= : 172397
- 약 204배

<익스플로러 1000회>
- appendChild : 2904
- innerHTML+= : 41249
- 약 14배

<모질라 200회>
- appendChild : 159
- innerHTML+= : 5220
- 약 32배

<익스플로러 200회>
- appendChild : 641
- innerHTML+= : 2384
- 약 3배

===사용된 소스 일부===
function addDiv() {  //append
var newDiv = document.createElement("div");
    newDiv.id = 'test';
    newDiv.innerHTML = 'test';
    document.getElementById('benchMarkWork1').appendChild(newDiv);
}

function addDiv2() {  //innerHTML+=
    document.getElementById('benchMarkWork2').innerHTML += '<div id="test">test</div>';
}

===결론===

한번에 대량의 자료를 추가하는 것이 아닌 여러개의 div에 조금씩 추가하는 것이라면
당연히 위의 결과를 참고하여 만드시는 것이 좋을 듯 합니다.

덧글 :

참고로 이걸보고
appendChild 와 innerHTML의 속도에서 appendChild 가 빠르다고 생각하시면 안됩니다.
위에서 보이듯이
innerHTML += 를 사용했죠.
즉, 계속적으로 전체데이터+추가데이터를 새로 쓰는 효과가 됩니다.

appendChild는
추가데이터만 등록하는 효과죠.
-------=------------
위와 같은 상황에서는
appendChild() 가 적절한 선택입니다.

출처 : http://www.phpschool.com