1. 포토앨범
성능 개선 사례 공유

2. N드라이브 품으로
포토앨범이 쏘~옥

3. 하지만 두 개의 Full Ajax 서비스의
통합으로 인한 개발 부담 증가
게다가 빡빡한 일정...

4. (정싞 없이 달려) 윤곽이 보이는 듯
허니 이제 벤치마킹을 해볼까?
QA담당자 왈
“구형PC의 IE7에서는 상식적으로
인갂이 사용할 수 없을 정도”

5. 성능개선 작업 진행

6. 1. CSS 튜닝
2. 스크립트 병목지점 개선
3. 지연 로딩

7. 1. CSS 튜닝
크롬 CSS Profiler를 사용,
쓰이지 않거나 중복된
셀렉터 제거

8. 기존대비 32.3% 사이즈 절감
프로파일링 성능은 28.5% 향상

9. 구형 PC에서
“사람이 사용 못할 수준의 성능”
문제에 대해 파악했어요.
CSS Psuedo Selector
인터랙션 반응 속도 75% 개선

10. 2. JS 병목지점 개선
DynaTrace를 사용해
Hotspot List 분석

11. 초기 로딩 시
$Document.clientSize()를
여러 번 호출
각 모듈이 초기화 시
“WINDOW_RESIZE”
메시지를 전달

12. 리사이즈 메시지 호출을 최소화
도큐먼트 사이즈는 캐시해 쓰기
또한, 규모가 큰 템플릿의 경우,
innerHTML로 세팅

13. 기존대비 30% 병목지점 개선

14. 3. Lazy Loading
포토앨범 기능이 페이지 로드 시
N드라이브와 함께 로드
포토앨범 아이콘을 클릭 했을
때,
지연 로딩하도록 변경

15. 템플릿 지연 로딩
[기존 – 2.6초]
[개선 – 2.3초]

16. Dom / Event 개수 개선
[기존]
[개선]

17. 스크립트 지연 로딩
[기존 – 2.3초]
[개선 – 1.8초]

18. 기존 실 서비스와 비교?
최종 25% 성능개선
[통합
전]
[통합 후]

19. 크롬 디버거,
DynaTrace는 역시 명불허전

20. 감사합니다