3장

실무로 배우는 시스템 성능 최적화
- 03부 화면 응답시간 분석 1 of 2 -
아꿈사 - http://cafe.naver.com/architect1

목차
• 1장 기본방향
• 2장 HTTP의 이해
• 3장 화면 응답시간 모니터링

1. 기본방향
• 처리시간 상세 분석
– 화면 렌더링, 로컬 로직, 서버 처리,
– 네트워크 전송 시간 분석
• 화면 콘텐츠 구성
– 콘텐츠 수를 줄일 수 있는가
• 캐시 동작
– 캐시 종류, 캐시 정상 동작 여부
• 병렬 / 비동기 처리
– 서버 요청 처리 순서와 구조 개선
• 사용 환경
– PC 환경, 로그

2. HTTP의 이해
• HTTP(HyperText Transfer Protocol)는
World Wide Web에서 데이터를 주고받을
수 있도록 개발된 프로토콜.
• 2.1 프로토콜 구조
– 클라이언트와 서버 간에 요청과 응답이 1:1 구
조. (이미지 100개라면 요청/응답이 각각 100
번)
– HTTP 메시지는 헤더와 본문으로 구성

2.1 프로토콜 구조
헤더 속성 정보 구분자로 [CRLF] 사용
CR (Carriage Return, r, 16진수:0D) , LF (Line Feed:n, 16진수:0A)
헤더 부분이 끝나는 부분에는 [CRLF]를 2번 사용해서 구분.

2.2 HTTP 요청
• 요청라인
1. 요청 방식
- GET, POST, DELETE, PUT, HEAD, TRACE, OPTIONS, CONNET
2. URI (Uniform Resource Identifier)
3. HTTP 버전

2.2 HTTP 요청
• MIME 헤더
1. Multipurpose Internet Mail Extensions 이메일 인코딩 방식을 설명하는
표준 포맷이지만, HTTP를 통해 여러 형태의 파일을 전송하는데 사용
2. name: value

2.2 HTTP 요청
헤더 설명
Cache-Content (일반) 캐시를 동작하는 조건을 지정
no-cache, no-store, max-age, max-stale, min-fresh,
only-if-cached
Date (일반) 현재의 날짜와 시간
Pragma (일반) 프록시에 대한 지시문 Pragma: no-cache
Accept 클라이언트가 처리 가능한 미디어 타입
Accept-Encoding 콘텐츠 인코딩 우선 순위
Accept-Language 언어 우선 순위
Authorization 웹 인증을 위한 정보
Cookie 서버에서 설정한 정보를 사용자 PC에 저장해 요청시
사용된다.
Host 요구된 리소스의 호스트

2.2 HTTP 요청
헤더 설명
If-Modified-Since 헤더의 값으로 주어진 날짜 이후 수정이 되었다면 URI
데이터를 보냄
If-Unmodified-Since If-Modified-Since 반대로 작동한다.
If-Match 조건부로 요청하는 것으로 주어진 ENTITY 태그와 매치
된다.
If-None-Match If-Match 와 반대로 작동한다.
Referer 요청된 URI를 참조하는 문서의 URI를 전달한다.
Range 요청된 URI에 해당하는 콘텐츠 전체를 받지 않고 범위
를 지정해 일부분만을 받을 때 사용한다.
Range:bytes=1000-1999
User-Agent 클라이언트 브라우저에 대한 식별 정보를 전송한다.

2.2 HTTP 요청
• 쿠키
– HTTP 표준은 아니지만 대부분의 브라우저가
지원
– 서버 요청 간에 공유해야 할 정보를 쿠키를 통
해 브라우저에 저장하여 웹 서버와 요청간에
정보를 공유.
– 브라우저별 쿠키 제한.
– 쿠키 크기와 도메인당 개수는 브라우저 종류
와 버전에 따라 다르다.

2.3 HTTP 응답
- 응답라인
HTTP/1.1 200 OK
“HTTP버전” “수행결과 응답 코드” “코드명”

2.3 HTTP 응답
응답 코드 코드명 설명
1XX Informational 정보 교환
100 Continue 클라이언트로부터 요청 일부분을 받았으니 나머지 요
청 부분을 계속 전송하라는 의미.
2XX Success 요청을 정상적으로 처리했음
200 OK 오류 없이 전송이 성공했다.
3XX Redirection 문서의 위치가 바뀌었다.
304 Not modified 클라이언트 캐시에 들어있는 문서가 최신 문서이니 그
것을 사용하라는 의미 (If-Modified-Since 헤더에 대한
응답 코드)

2.3 HTTP 응답
응답 코드 코드명 설명
4XX Client Error 클라이언트 측의 오류로 주소를 잘못 입력했거나 요청
이 잘못됐다.
400 Bad Request 요청 실패. 문법상 오류가 있어서 서버가 요청사항을
이해하지 못한다.
403 Forbidden 금지
404 Not Found 클라이언트가 요청한 자원을 서버에서 찾을 수 없다.
5XX Server Error 서버 측의 오류로 올바른 요청을 처리할 수 없다.
500 Internal
Server Error
서버 내부에 오류가 있다.
503 Service
Unavailable
서비스가 죽었거나 현재 멈춘 상태 또는 이용할 수 없
는 서비스다.

2.4 데이터 송수신
Context-Length 방식
- Content-Length에 본문의 크기를 바이트 단위로 기록해서 수신 측에서
본문의 크기를 알 수 있게 하는 방식
- 정적 콘텐츠와 같이 HTTP 헤더 정보를 만드는 시점에서 본문 전체 크기를
알 수 있을 때 사용

2.4 데이터 송수신
Chunked 방식
- HTTP 헤더 생성 시점에 본문의 크기를 알 수 없을 때 사용하는 방식
- 블록 크기는 16진수이며 마지막 0은 더는 보낼 내용이 없음을 의미

3. 화면 응답시간 모니터링
• 3.1 화면 응답시간 모니터링 도구
• Fiddler – Proxy 방식으로 HTTP 모니터링
• Dynatrace AJAX Edition – 자바스크립트, 렌터링,
HTTP 요청과 응답
• Visual Round Trip Analyzer – 네트워크 패킷 기반
의 분석을 제공 + 와이어샤크와 연동 가능
• HttpWatch – 기본기능은 프리웨어 + 브라우저 내
부 동작과 상세 추가 정보는 상용
• Firebug, IE 개발자 도구, 크롬 개발자 도구 – 스크
립트 디버그, DOM 탐색, 네트워크 모니터링

3.2 인터넷 익스플로러 프로파일링
관련 자료 : https://msdn.microsoft.com/ko-kr/library/dn255009(v=vs.85).aspx

프로파일링 측정값 이해
function main() {
//내부 코드에서 50ms 소요
foo();
}
function foo() {
// 내부 코드에서 200ms 소요
bar();
}
function bar() {
// 내부 코드에서 250ms 소요
}
함수 포괄 시간 제외 시간
main 500ms 50ms
foo 450ms 200ms
bar 250ms 250ms

3.3 피들러
출처 : http://blog.naver.com/hostinggodo/220705860264

3.3 피들러
업로드 시간 = ClienDoneRequest – ClientBeginRequest
서버 처리시간= ServerBeginResponse – ClintDoneRequest
다운로드 시간 = ServerDoneResponse - ServerBeginResponse

3.4 HTTP 분석 접근
• 화면 응답시간이 Timeline 내에서 표시된 요청의 처리
시간과 일치하는지 확인.
• Timeline 중 특별히 처리시간이 긴 요청이 존재하는지
확인.
• 각 요청에 대한 처리시간은 짧지만 요청 수 자체가 많
아서 응답시간이 오래 걸리는지 확인.
• Timeline 상에서 요청 처리 중간 중간 처리가 없이 비
어있는 긴 시간이 있는지 확인.
• 요청 목록에서 응답 코드가 200 OK인지 304 Not
Modified인지 확인해 캐시가 정상적으로 동작하는지
확인
• 전체가 200 OK일 때의 전체 페이지 크기와 개별 요청
의 콘텐츠 크기를 확인.

3장

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to 3장

Similar to 3장 (20)

3장