| sitelink3 | http://1 |
|---|---|
| sitelink4 | http://ko |
| extra_vars5 | http://jaures.egloos.com/2380949 |
| extra_vars6 | sitelink1 |
어떤 특정 노드에 수많은 data를 지속적으로 update(추가)를 해야하는 작업이 있다고 가정해 보기로 하자.
보통 DOM에 대한 handling은 많은 비용이 발생하게 되는데, 물론 그 양이 적은 경우에는 어떻게 하더라도 크게 차이는
없다.
하지만 예를 들어 2만개의 div tag를 handling 한다고 할때에는 얘기가 달라진다.
다음의 작업을 진행해야 한다고 생각해 보기로 한다.
1. node 추가
2.
node 삭제
3. 전체 node 삭제
기본적으로 생각할 수 있는게, DOM에 대한 function을 직접 이용하거나 또는 단순하게 innerHTML을 이용해 처리하는 방법이 있을 수 있다.
결론적으로는 innerHTML을 이용해 처리하는 경우 속도가 상당히
느리다. Node의 추가, 삭제, 전체 삭제의 경우 모두 DOM을 직접 handling 하는 것이 훨씬 빠르다.
아래는 2만 개의
적당한 textNode를 값으로 가지고 있는 div에 대해 상위 1천개의 node를 삭제했을 때의 수행 결과 시간(단위
millisecond)이다. 시간은 처리하는 data에 비례하기 때문에 적당히 참고 하는 정도로만 보면 된다.
삭제할 때
사용한 방법은 :
1. 정규식을 이용해 상위 1천개의 data를 replace
한 후, 다시 innerHTML에 값을 할당
2. Loop을 이용해 상위 천개의 node를 삭제
- IE6
replace RegEx :
N/A
removeChild : 47
- IE7
replace RegEx :
1594
removeChild : 32
- IE8
replace RegEx :
734
removeChild : 5641
-
FF 3.51
replace RegEx : 9737
removeChild : 55
- Chrome
replace RegEx :
597
removeChild : 315
- Safari 4
replace RegEx :
663
removeChild : 560
- Opera 10 beta
replace
RegEx : 2297
removeChild : 109
약간 특이한 점은 모든 브라우저에서 removeChild가 월등한
반면, 유독 IE8에서만큼은 정규식을 이용한 치환의 성능이 더 나았다는 점이다.
또한 2만개의 node를 삭제하는 경우에도 어떤 특정한 작업을 하지 않고, 단순하게 object.innerHTML = "" 하면 성능에도 별다른 영향이 없을것 같았지만 그렇지
않았다는 점이다.
이 경우에도 removeChild를 사용해 node 자체를 삭제해 버리는 것이 훨씬 더 빠르다.
