(성능개선) 캐시, 병렬/비동기, AJAX와 DOM을 이용한 비동기 처리

* HTTP에서 성능개선을 위해 캐시를 사용할 수 있으며, 크게 브라우저 캐시와 서버캐시로 나뉜다.

1. 브라우저 캐시

1) HTTP 응답 크기를 줄이는 캐시방식


2) HTTP 요청 수를 줄이는 캐시 방식
-> Cache-Control속성을 이용해 HTTP 요청 자체를 하지 않도록 줄이는 방식이다.
예) Cache-Control : max-age = 2592000초 인 경우 back.gif를 내려받은 이후 30일 동안은 back.gif를 사용하더라도 HTTP요청을 하지 말고 브라우저 캐시에 있는 것을 사용하라는 의미다.



2. 병렬/비동기 처리

1) 네트워크 연결 증가

브라우저는 한 페이지 내에서 한 도메인에 대해 네트워크 연결갯수가 제한되어 있다. 따라서 컨텐츠를 동시에 내려 받을 수 있는 병렬 처리 개수에 한계가 있다. 그래서 도메인 갯수를 증가시키거나 스레드 수 설정을 증가시킨다.

2) AJAX와 DOM을 이용한 비동기처리

역동적인 화면 구성이 가능하고 화면내의 콘텐츠도 자유자재로 제어할 수 있게 됐다.
AJAX와 DOM을 효과적으로 이용하면 서버 부하 감소뿐 아니라 클라이언트 측면의 성능개선도 가능하다.

2-1) 화면 내 일부를 비동기처리

전체화면 내용에 차지하는 비중은 작지만 서버 처리에 오래 걸리는 항목에 적용하면 효과적이다. 또한 보여지는 부분만 먼저 처리하고 나머지는 서버에서 내용이 처리되도록 구성하면 초기화 시간을 개선할 수 있다.

2-2) 트랜잭션의 비동기 분리

현재는 입력, 수정, 삭제 같은 데이터 변경 트랜잭션은 AJAX로 비동기 처리하고, 목록에 반영하는 작업은 DOM처리를 통해 수정하는 것이 가능하다.



* 기타 성능 개선

1. CSS와 자바스크립트는 병렬처리를 고려해서 배치한다.
-> CSS를 다운로드 하는 동안 자바스크립트 파일을 다운로드 할 수 있지만 자바스크립트를 다운로드 하는 동안에는 CSS를 다운로드 할 수 없다. 그러므로 CSS 파일을 자바스크립트 파일 앞에 기술해 일부 자바스크립트 파일은 병렬처리가 되게 한다.

2. CSS는 HEAD태그에 기술한다.
-> 본문에 있으면 브라우저 렌더링에 부정적인 영향을 미친다.

3. HTTP 요청은 하나의 패킷으로 처리한다.


4. HTML 안의 CSS와 자바스크립트는 개별 파일로 처리한다.

5. 이미지는 HTML에 크기를 명시한다.



참고 : http://d2.naver.com/helloworld/59361