■ Web

[Web] RestFul Service에 대해서 알아보자 (4)

오늘은 NHN에서 쓴 “자바스크립트 성능이야기”란 책에서 좋은내용이 있어 발췌하여 설명하도록 한다.

먼저 중요한 것부터 짚고 넘어가자.

 

브라우저가 요청을 처리하는 순서를 이번엔 도메인 주소 입장이 아닌 브라우저 자체 프로세스를 통해 좀더 세부적으로 살펴보도록하겠다.

브라우저는 젤 처음 서비스 이동단계로 시작한다.

이부분은 우리가 브라우져를 처음 키고 접속해오는 상황을 말한 것은 아니다.

현재 어떤 페이지를 보고 있다고 가정하고, 다른 도메인을 통해 페이지를 이동한다고 했을때, 앞에서 말한 우리가 보고 있던 어떤페이지란 것을 다른 페이지로 이동하기 전에 처리하는 과정을 말한다.

beforeunload라는 이벤트 핸들러를 통해 메모리 해제와 같은 처리를 해줄 수 있다.

 

다음으로 리다이렉트 단계이다.

예를들면

http://bravo114.kr로 접속하면

http://bravo114.kr/ 이부분으로 리다이렉트 되고, 이것은 다시http://bravo114.kr/main으로 리다이렉트 되도록 구성되어있다. 여기서 http://bravo114.kr/ 이부분은 index가 생략되어있는 것이 보통이나, 요즈음의 웹서버들은 routing 개념을 사용하기 때문에 꼭 index가 생략되어있다고 볼순 없다.(물론 내부적으론 index로 처리할 수도있다.)

여기서 중요한 점은 리다이렉트의 경우 정적파일 캐시가 되지 않기 때문에 리다이렉트 되기전 페이지는 최대한 가볍게 하거나 사용을 자제하는 편이 좋다.

 

다음으로는 애플리케이션 캐시확인 단계이다.

앞서 REST를 공부할때도 보았지만 캐시 정보를 활용해서 서버부화를 줄이는 방법이 있었다.

이때 Last-Modified(서버), if-Modified-Since(브라우져) 등을 활용하거나, Expires, Cache-Control등을 활용할 수있다.

순서는 Expires로 만기날짜를 먼저 확인하고 만기가 되었다면 if-Modified-Since를 통해 현재 받아온 데이터가 클라이언트가 알고 있는 갱신날짜보다 최신인지 확인하고, (Last-Modified를 통해비교) 최신이 아니라면 서버로부터 다시 받아온다.

 

다음으로는 네트워크 통신단계이다.

이부분은 다시 세부적으로 8단계 정도로 나뉜다.

1. Blocked : 브라우져가 서버와의 통신을위해 준비하는 시간이다. (이때 host별로 병렬로 요청하는데 현재 2개의 동시요청의 개수가 가장 최적이다라는 보고가 있다.)

2. DNSLookup : 앞서 도메인을 설명할때 DNS Server에 대해 설명했다. 이때NS레코드가 DNS서버에 이미 저장되어 있다면 해당 TTL(캐시 시간)에 따라 DNS서버는 최종 보여줘야할 ip주소를 캐시한다. 바로 이부분을 체크하는 시간이다.

3. TCP(Connect) 실제 http통신을 위해 TCP연결을 하는 시간이다. (http는 TCP통신으로 구현한 프로토콜이다.)

4. Request 실제 요청하는 시간이다. 이때 CDN같은 정적파일 전용서버를 만들어 놓아서 최적화를 할수 있다. 무슨말이냐면, 매번 요청할때 실제 서버는 Cookie를 갖고 있는데, 이부분이 꽤 헤더에서 차지하는 부분이 크다보니 트래픽을 유발시킬수 있다. 따라서 CDN은 보통 Cookie를 해더에 들고있지 않는다.

5. Wait 서버로부터의 응답을 기다리는 시간이다. 서버의 속도가 가장 중요한 부분이다. 실제 Node.js나 아파치+php조합에서의 속도차이는 이부분에서 발생한다.

6. Response 응답메세지를 받는 시간이다. 이때 서버와 클라이언트간 통신은 데이터를 일정부분으로 잘라 분할해서 전송한다. 분할전송을 통해 모든 데이터를 받게 되는 시간이 Response에 걸리는 시간이다. 따라서 Gzip등으로 압축해서 용량을 줄인다. (혹은 코드를 minify한다.)

7. TTFB 서버가 Response시에 받을 데이터중 가장 처음 데이터 바이트 정보를 받아 브라우져에 보내는데 걸리는 시간이다. 안드로이드와 같은 모바일 디바이스로 통신할때 파일을 나누어서 보낸다. 그때 처음으로 write하고 처음으로 보낸 바이트를 클라이언트가 받아 처리하는 시간이다.

8. Cache Read 사용자 PC로부터 캐시된 데이터를 읽어오는 시간이다. 위에 설명한 캐시 확인단계에서 캐시가 되어있다고 설정되어있으면 캐시된 데이터를 불러오고 그렇지 않으면 윗단계에서 통신을 수행하여 데이터를 받아온다.

이상 8가지 단계가 네트워크를 처리하는 단계이다.

 

다음으로는 실제 브라우져가 데이터를 처리하는 단계이다.

이부분은 브라우져가 받아온 데이터의 MIME타입을 확인하여 해당 타입에 맞게 파싱후 렌더링하는 과정이다.

대표적으로 HTML,JS,CSS등이 파싱의 대상이다.

 

이상으로 대략적인 브라우져의 수행 단계를 살펴보았는데 대략적으로 정리하면

서비스이동단계 – 리다이렉트단계 – 캐시확인단계 – 네트워크통신단계 – 브라우저 데이터 처리단계 로 나눠진다.

이중 네트워크 통신단계는 8가지로 이루어져있다.

Standard

댓글 남기기