'성능'에 해당되는 글 2건

  1. 2009.12.10 페이지 리소스 용량를 집계하는 북마클릿 - Statsy
  2. 2008.03.25 appendChild와 innerHTML+=의 속도차이
2009.12.10 08:50

페이지 리소스 용량를 집계하는 북마클릿 - Statsy


Statsy는 Stoyan Stefanov씨가 만든 웹 페이지의 성능을 가늠하기 위한 정보를 제공하는 북마클릿입니다. 자바스크립트 속성이 할당된 크기, 스타일시트 사용량, 스크립트 사용량 등 다양한 집계를 알려 줍니다. 설치방법은 아래의 statsy 링크를 북마크바로 끌어다 놓으면 됩니다.

statsy - 이 링크를 북마크바로 이동하세요.

  • JS attributes (e.g. onclick) - 노드의 onclick, onmouseover 속성 등에 사용된 코드의 바이트(bytes)
  • CSS style attributes - 노드의 style 속성에 사용된 문자열 길이의 집계
  • Inline JS - HTML에 인라인으로 작성된 script 요소에서 사용된 자바스크립트 코드의 길이를 집계
  • Inline CSS - HTML에 인라인으로 작성된 style 요소에 사용된 스타일시트 코드의 길이를 집계
  • All innerHTML - document.documentElement.innerHTML.length를 반환
  • # DOM elements - 페이지에서 사용중읜 DOM 요소의 수를 집계

출처 : http://firejune.com/1501

Trackback 0 Comment 0
2008.03.25 08:08

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


Trackback 0 Comment 0