웹에플리케이션을 개발할 때 JavaScript 와 CSS 사용이 많다. 특히 요즘음 JavaScript Module화 패턴을 이용하여 JS파일이 기하 급수적으로 늘어나고 있으므로 네트워크 비용을 줄여야하는 문제에 놓인다. 성능을 향상 시킬 수 있는 NHN의 비법을 요약한다. (Chapter 2. 기본적인 웹사이트 최적화 방법)
- 이미지 파일이 많을 경우 -> CSS Sprite를 이용한다 (N-MET OSS 이용)
+ 성능에 전송 파일의 사이즈보다 개수가 중요하다. 이는 크기보다 네트워크 전송 비용이 더 크기때문이다
- HTTP 헤더에 정적 파일 만료날짜를 추가 -> Client PC에 Caching토록 한다
+ 캐싱여부 판단 기준은 "이름"과 "인터넷 주소" : src="aa_20111231.js" or src="aa.js?20111231" 로 표현
+ 만료날짜를 서버에 설정 : Apache의 mod_expires 모듈 설정
- JavaScript 파일 통합 -> 파일의 개수를 최소화하여 네트워크 비용을 줄임
- 파일 크기 최소화 -> Gzip압축을 사용한다 (파일크기 1~2KB 이상일 때 압축 권장. 이보다 크기가 작으면 압축해제시 CPU 비용이 더 큼)
- 쿠키 크기 최소화 -> 헤더 정보에 쿠키가 들어가면 데이터 크기가 커진다
+ 사용하지 않는 쿠키 삭제
+ 최상위 도메인 설정 되도록 사용하지 말자
+ 만료날짜 최대한 짧게 한다
+ 쿠키 정보 필요없는 정적 파일(이미지, js, css)는 별도 도메인으로 서비스한다
- 렌더링 성능 향상 -> DOM Tree - Render Tree - 좌표 배치 - 브라우져 화면 그리기 시작
+ CSS는 <head> </head> 사이에 넣는다
+ JavaScript는 </body> 위에 넣는다 : js 수행시 렌더링이 멈추어 하얀 페이지 보일 수 있음
+ 최초 페이지에서 AJAX 통신하면 화면 렌더링이 두번 되므로 최초 호출시 AJAX 배제하자
+ 태그 중첩을 최소화 한다 : <table> 되도록 쓰지 말고, <div>와 CSS로 Layout을 잡는다 (중첩이 많으면 렌더링 느려짐)
'Languages > JavaScript' 카테고리의 다른 글
| [JavaScript 성능향상] 렌더링 최적화 방법 (0) | 2012.12.21 |
|---|---|
| [JavaScript 성능향상] 성능을 높이는 코드 스타일 (0) | 2012.12.13 |
| [JavaScript] Template Engine (0) | 2012.11.26 |
| [JavaScript] Closure 알아가기 (0) | 2012.11.12 |
| [JavaScript] Function Expression 과 Function Declaration 차이 (0) | 2012.11.12 |