성능 2

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

Statsy는 Stoyan Stefanov씨가 만든 웹 페이지의 성능을 가늠하기 위한 정보를 제공하는 북마클릿입니다. 자바스크립트 속성이 할당된 크기, 스타일시트 사용량, 스크립트 사용량 등 다양한 집계를 알려 줍니다. 설치방법은 아래의 statsy 링크를 북마크바로 끌어다 놓으면 됩니다. statsy - 이 링크를 북마크바로 이동하세요. JS attributes (e.g. onclick) - 노드의 onclick, onmouseover 속성 등에 사용된 코드의 바이트(bytes) CSS style attributes - 노드의 style 속성에 사용된 문자열 길이의 집계 Inline JS - HTML에 인라인으로 작성된 script 요소에서 사용된 자바스크립트 코드의 길이를 집계 Inline CSS -..

appendChild와 innerHTML+=의 속도차이

지금 자바스크립트를 이용한 채팅을 만들고 있습니다. 만들다 보니 이용자가 과도하게 도배를 하게 되면 상대편이 끊김이 발생하면서 여러가지 문제로 인해 먹통이 되는 경우가 있었습니다. document.getElementById('xxx').innerHTML+=로 단순히 채팅 한줄만 추가하는 부분인데.. 제가 만들고 있는 것이 멀티 채팅방이기 때문에 여러방에서 여러개의 div가 수시로 업데이트 됩니다. 그래서 속도가 중요하다고 생각되어 appendChild와 innerHTML+=의 속도를 테스트 해 보았습니다. 각각 div안에 200회 추가와 1000번 추가를 해 보았습니다. 제 컴퓨터가 느려서 수치는 좀 높지만 참고하시면 좋을 것 같습니다. 결과는 모두 appendChild가 빨랐습니다. ===결과(수치가 ..