포토앨범성능 개선 사례 공유
N드라이브 품으로포토앨범이 쏘~옥
하지만 두 개의 Full Ajax 서비스의통합으로 인한 개발 부담 증가게다가 빡빡한 일정...
(정싞 없이 달려) 윤곽이 보이는 듯허니 이제 벤치마킹을 해볼까?QA담당자 왈“구형PC의 IE7에서는 상식적으로인갂이 사용할 수 없을 정도”
성능개선 작업 진행
1. CSS 튜닝2. 스크립트 병목지점 개선3. 지연 로딩
1. CSS 튜닝크롬 CSS Profiler를 사용,쓰이지 않거나 중복된셀렉터 제거
기존대비 32.3% 사이즈 절감프로파일링 성능은 28.5% 향상
구형 PC에서“사람이 사용 못할 수준의 성능”문제에 대해 파악했어요.CSS Psuedo Selector인터랙션 반응 속도 75% 개선
2. JS 병목지점 개선DynaTrace를 사용해Hotspot List 분석
초기 로딩 시$Document.clientSize()를여러 번 호출각 모듈이 초기화 시“WINDOW_RESIZE”메시지를 전달
리사이즈 메시지 호출을 최소화도큐먼트 사이즈는 캐시해 쓰기또한, 규모가 큰 템플릿의 경우,innerHTML로 세팅
기존대비 30% 병목지점 개선
3. Lazy Loading포토앨범 기능이 페이지 로드 시N드라이브와 함께 로드포토앨범 아이콘을 클릭 했을때,지연 로딩하도록 변경
템플릿 지연 로딩[기존 – 2.6초][개선 – 2.3초]
Dom / Event 개수 개선[기존][개선]
스크립트 지연 로딩[기존 – 2.3초][개선 – 1.8초]
기존 실 서비스와 비교?         최종 25% 성능개선[통합전][통합 후]
크롬 디버거,DynaTrace는 역시 명불허전
감사합니다
Upcoming SlideShare
Loading in …5
×

서비스 성능개선 사례

660 views

Published on

2 Comments
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total views
660
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
7
Comments
2
Likes
0
Embeds 0
No embeds

No notes for slide

서비스 성능개선 사례

  1. 1. 포토앨범성능 개선 사례 공유
  2. 2. N드라이브 품으로포토앨범이 쏘~옥
  3. 3. 하지만 두 개의 Full Ajax 서비스의통합으로 인한 개발 부담 증가게다가 빡빡한 일정...
  4. 4. (정싞 없이 달려) 윤곽이 보이는 듯허니 이제 벤치마킹을 해볼까?QA담당자 왈“구형PC의 IE7에서는 상식적으로인갂이 사용할 수 없을 정도”
  5. 5. 성능개선 작업 진행
  6. 6. 1. CSS 튜닝2. 스크립트 병목지점 개선3. 지연 로딩
  7. 7. 1. CSS 튜닝크롬 CSS Profiler를 사용,쓰이지 않거나 중복된셀렉터 제거
  8. 8. 기존대비 32.3% 사이즈 절감프로파일링 성능은 28.5% 향상
  9. 9. 구형 PC에서“사람이 사용 못할 수준의 성능”문제에 대해 파악했어요.CSS Psuedo Selector인터랙션 반응 속도 75% 개선
  10. 10. 2. JS 병목지점 개선DynaTrace를 사용해Hotspot List 분석
  11. 11. 초기 로딩 시$Document.clientSize()를여러 번 호출각 모듈이 초기화 시“WINDOW_RESIZE”메시지를 전달
  12. 12. 리사이즈 메시지 호출을 최소화도큐먼트 사이즈는 캐시해 쓰기또한, 규모가 큰 템플릿의 경우,innerHTML로 세팅
  13. 13. 기존대비 30% 병목지점 개선
  14. 14. 3. Lazy Loading포토앨범 기능이 페이지 로드 시N드라이브와 함께 로드포토앨범 아이콘을 클릭 했을때,지연 로딩하도록 변경
  15. 15. 템플릿 지연 로딩[기존 – 2.6초][개선 – 2.3초]
  16. 16. Dom / Event 개수 개선[기존][개선]
  17. 17. 스크립트 지연 로딩[기존 – 2.3초][개선 – 1.8초]
  18. 18. 기존 실 서비스와 비교? 최종 25% 성능개선[통합전][통합 후]
  19. 19. 크롬 디버거,DynaTrace는 역시 명불허전
  20. 20. 감사합니다

×