서비스 성능개선 사례
Post on 05-Jul-2015
363 Views
Preview:
TRANSCRIPT
포토앨범성능 개선 사례 공유
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.3초]
[기존 – 2.6초]
Dom / Event 개수 개선
[개선]
[기존]
스크립트 지연 로딩
[개선 – 1.8초]
[기존 – 2.3초]
기존 실 서비스와 비교?최종 25% 성능개선
[통합 후]
[통합전]
크롬 디버거,DynaTrace는 역시 명불허전
감사합니다
top related