'Performance'에 해당되는 글 2건

  1. 2009/10/21 간단한 자바스크립트 성능 체크 리스트. (1)
  2. 2009/10/06 UI단 성능 측정 도구 dynatrace. (3)

간단한 자바스크립트 성능 체크 리스트.

Program 2009/10/21 18:35
아래 원문을 보고 간단히 번역해봤습니다.
(오역이 많으니 가능하면 원문을 보시는게 좋을것 같습니다.)
뭐 아래 같은 얘기는 많이 들어봤을텐데 다시 상기시키는 차원에서 보면 좋을것 같습니다.
개인적으로는 Smash같은 경우는 첨 들었고 "문법설탕(syntactic sugar)을 제거하였나요?" 이 부분은 뭔가 고민되네요.


원문: http://slowjavascript.com/

  1. 스크립트 테그의 위치가 올바른가요?
  2. DOM Monster에서 확인 해보셨나요?
  3. 헤더에 캐시가 적용되었나요?
  4. 여러개의 파일을 합치고 한줄로 만들어서 캐시하게 만들었나요?
  5. 축소하고 압축(Gzip)하였나요?
  6. Smash을 이용하여 css sprite와 favicon을 만들었나요?
  7. 프래임워크를 확인해봤나요?
  8. 잘못 사용하는 timer들은 없나요?
  9. Dom을 최대한 효율적으로 사용했나요?
    • 노드 탐색
    • 이벤트 버블링과 캡쳐
    • innerHTML
    • 투명 이미지
    • 스타일
    • 복잡도
  10. Ajax를 적절하게 사용했나요?
  11. 코드를 간단하게 만들었나요?( 변수 할당, 연산자들, 리터럴들)
  12. 지나치게 완벽하게 만든 코드들을 수정하였나요?(Strip out excessive cleverness)
  13. 효율적으로 정규표현식을 사용했나요?
  14. JSON을 사용했나요?
  15. 정규식을 캐시하여 사용했나요?
  16. 클로져, 전역변수, 리터럴들을 조심해서 사용했나요?
  17. 가장 효율적인 구문을 사용했나요?
  18. 가장 효율적인 반복문을 사용했나요?
  19. 객체의 속성들을 가장 효율적으로 사용했나요?
  20. 변수들은 캐시해서 사용했나요?
  21. 메모리 릭을 최대한 제거했나요?
  22. 효율적으로 arguments를 사용했나요?
  23. 문법설탕(syntactic sugar)을 제거하였나요?
  24. 루프를 사용하지 않고 펼쳐서 사용하거나 적절하게 사용했나요?
  25. iPhone을 위해 최적화를 했나요?



DOM Monster
Thomas Fuchs(scriptaculs 제작자)와 AmyHoy(디자이너)가 만든 프로파일링 툴

Smash
이미지의 품질을 지키면서 용량을 줄이는 웹 도구.

문법설탕(syntactic sugar)
개발할때 코드를 읽기 쉽거나 사용하기 쉽게 하기 위해서  만든 문법을 말한다.
사용하기에는 편하나 성능면에서는 비효율적일수 있다.

지나치게 완벽하게 만든 코드들을 수정하였나요?(Strip out excessive cleverness)
- 이 부분은 제가 이해하기로는 "추후를 예측하여 현재 불필요한 코드를 만들어서 성능에 영향을 미치는 경우"와 같은 류를 말하는것 같습니다.


Posted by Mixed
TAG JavaScript, Performance
트랙백이 없고, 댓글이 하나 달렸습니다

UI단 성능 측정 도구 dynatrace.

Program 2009/10/06 01:00
UI 개발을 한 후에 성능 테스트를 하려고 하면 쓸만한 도구가 없다.

물론 각종 프로파일링 툴로 확인도 하지만 매우 부족하다.

예로 처음 로딩시 초기 UI를 구성하기 까지 시간을 측정했을 때
네트워크 시간, javascript 시간, 랜더링 시간 이렇게 구분하려고 하면
상당히 원시적인 방법으로 해야했다.
(물론 내가 못본 툴이 있을수도 있겠지만 다들 만족스런 결과는 아니였다.)

그나마 지금 까지 본 툴중에는 젤 그럴듯 하게 지원하는 툴이 아마 dynatrace인것 같다.

일단 무료다.-_-;
그리고 사용법은 이곳에 동영상을 보면 쉽게 이해 할수 있어서 스킵.

잠깐 이것 저것 해본 결과 괜찬다고 생각하는 기능 몇가지를 소개할까 한다.
(정확한지는 모르겠다)
1. graph로 어디가 병목인지 알게 쉽게 되어 있었다.
사용자 삽입 이미지

위의 그림에서 보면 이벤트, javascript, network 이렇게 3가지로 구분하여 비용현황을 볼수 있다.

2. 시간의 순서대로 페이지에 어떤일이 있어났는지 확인이 가능하다.
사용자 삽입 이미지


3. 무엇이 가장 시간이 오래 걸리는지 한눈에 확인이 가능하다.
사용자 삽입 이미지

여기에는 랜더링 시간, 함수 시간, ajax등 모두 포함되어 있다.

아직 윈도우에 IE만 지원한다.(추후 firefox지원 예정)
하지만 지금꺼 보아온 성능 툴과 비교하여 편하게 좋은 데이터를 볼수 있어 좋은것 같다.

혹시 UI개발에 성능 측정 도구가 필요하다면 dynatrace을 사용하라고 추천하고 싶다.

Posted by Mixed
TAG Ajax, dynatrace, JavaScript, Performance, tool
트랙백이 없고, 댓글 3개가 달렸습니다