블로그 이미지
윤영식
Frontend Application Architecter, Full Stacker, KnowHow Dispenser and Bike Rider

Publication

Statistics Graph

Recent Comment

2012.12.12 18:01 Languages/JavaScript

웹에플리케이션을 개발할 때 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을 잡는다 (중첩이 많으면 렌더링 느려짐)

posted by peter yun 윤영식