24.01.12 HTTP

1. HTTP

    - 전송 계층 위에 있는 애플리케이션 계층

    - 웹 서비스 통신에 사용

 

  1) HTTP / 1.0

       - 기본적으로 한 연결당 하나의 요청을 처리하도록 설계되었는데 RTT 증가를 불러오게 되었다

 

     (1) RTT 증가

           - 서버로부터 파일을 가져올 때마다 TCP 의 3-웨이 핸드셰이크를 계속해서 열어야 하기 때문에

              RTT 가 증가한다는 단점이 있다

              * RTT : 패킷이 목적지에 도달하고 나서 다시 출발지로 돌아오기까지 걸리는 시간이며 패킷 왕복 시간

     (2) RTT 증가를 해결하기 위한 방법         

           A) 이미지 스플리팅

                - 많은 이미지를 다운로드 받게 되면 과부화가 걸리기 때무네 많은 이미지가 합쳐 있는 하나의 이미지를

                  다운받고 이를 기반으로 background-image 의 position 을 이용하여 이미지를 표기하는 방법

                - 아래 코드처럼 하나의 이미지인 icons.png 를 기반으로 background - position 을 통해 2개의

                  이미지를 설정할 수 있다

#icons>li>a {
	background-image : url("icons.png");
    width : 25px;
    display : inline-block;
    height : 25ps;
    repeat : no-repeat;
}
#icons>li:nth-child(1)>a {
	background-position : 2px -8px;
}
#icons>li:nth-child(2)>a {
	background-position : -29px -8px;
}

           

           B) 코드 압축

                - 코드를 압축해서 개행 문자, 빈칸을 없애서 코드의 크기를 최소화 하는 방법

const express - require('express')
const app = express()
const port = 3000

app.get('/', (req, res)=> {
	res.send('Hello World!')
})

app.listen(port, () => {
	console.log(`Example app listening on port ${port}`)
})

위의 코드를 변경

const express=require("express"),app=express(),port=3e3;app.
get("/",(e,p)=>{p.send("Hello World!")}),app.listen(3e3,()+>{console.
log("Example app listening on port 3000")})

 

           C) 이미지 Base64 인코딩

                - 이미지 파일을 64진법으로 이루어진 문자열로 인코딩하는 방법

                - 서버와의 연결을 열고 이미지에 대해 서버에 HTTP 요청을 할 필요가 없다는 장점이 있다.

                - Base64 문자열로 변환할 경우 37% 정도 크기가 더 커지는 단점이 있다

                  * 인코딩 : 정보의 형태나 형식을 표준화, 보안, 처리 속도 향상, 저장 공간 절약 등을 위해 다른 형태나

                                  형식으로 변환하는 처리 방식

 

  2) HTTP / 1.1

       - 매번 TCP 연결을 하는 것이 아니라 한번 TCP 초기화를 한 이후에 keep-alive 라는 옵션으로 여러개의 파일을

         송수신할 수 있도록 바뀜

       - HTTP / 1.0 에서도 keep-alive 가 있었지만 표준화가 되어있지 않았고 HTTP / 1.1 부터 표준화 되어

         기본 옵션으로 설정됨

       - 아래 그림처럼 한번 TCP 3-웨이 핸드셰이크가 발생하면 그 다음부터 발생하지 않는다

       - 문서 안에 포함된 다수의 리소스(이미지, 동영상, css 파일, js 파일 등)를 처리하려면 요청할 리소스 개수에

         비례해서 대기 시간이 길어지는 단점이 있다

 

     (1) HOL Blocking (Head Of Line Blocking)

           - 네트워크에서 같은 큐에 있는 패킷이 그 첫번째 피킷에 의해 지연될 때 발생하는 성능 저하 현상

           - 예) 아래 그림처럼 image.jpg 와 styles.css, data.xml 을 다운로드 받을 때 보통은 순차적으로

                   잘 받아지지만 image.jpg 가 느리게 받아진다면 그 뒤에 있는 것들이 대기하게 되며 지연되는 상태가 된다

 

     (2) 무거운 헤더 구조

           - HTTP / 1.1 의 헤더에는 쿠키등 많은 메타데이터가 들어있고 압축이 되지 않아 무겁다

 

  3) HTTP / 2

       - SPDY 프로토콜에서 파생된 HTTTP / 1.x 보다 지연시간을 줄이고 응답 시간을 더 빠르게 할 수 있다

       - 멀티플렉싱, 헤더 압축, 서버 푸시, 요청의 우선순위 처리를 지원하는 프로토콜이다

 

     (1) 멀티플렉싱

           - 여러개의 스트림을 사용하여 송수신한다는 것

           - 특정 스트림의 패킷이 손실되었다고 하더라도 해당 스트림에만 영향을 미치고 나머지 스트림은

             멀쩡하게 동작 가능

             * 스트림 : 시간이 지남에 따라 사용할 수 있게 되는 일련의 데이토 요소를 가리키는 데이터 흐름

          - 위의 그림은 하나의 연결 내 여러 스트림을 캡처한 모습이다. 병렬적인 스트림을 통해 데이터를 서빙하고 있다

          - 또한, 스트림 내의 데이터들도 쪼개져 있다 애플리케이션에서 받아온 메시지를 독립된 프레임으로

            조각내어 서로 송수신한 이후 다시 조립하며 데이터를 주고 받는다

          - 이를 통해 단일 연결을 사용하여 병렬로 여러 요청을 받을 수 있고 응답을 줄 수 있다.

            이렇게 되면 HTTP / 1.x 에서 발생하는 문제인 HOL Blocking 을 해결할 수 있다.

 

     (2) 헤더 압축

           - HTTP / 1.x 에는 키기가 큰 헤더라는 문제가 있었다

           - HTTP / 2 에서는 헤더 압축을 써서 해결하는데, 허프만 코딩 압축 알고리즘을 사용하는 HPACK 압축 형식을 가짐

           A) 허프만 코딩 (huffman coding)

                - 문자열을 문자 단위로 쪼개 빈도수를 세어 빈도가 높은 정보는 적은 비트수를 사용하여 포현하고

                  빈도가 낮은 정보는 비트수를 많이 사용하여 표현해 전체 데이터의 표현에 필요한 비트양을 줄이는 원리

 

     (3) 서버 푸시

           - HTTP / 1.1 에서는 클라이언트가 서버에 요청을 해야 파일을 다운로드받을 수 있었다면 HTTP / 2 는

             클라이언트 요청 없이 서버가 바로 리소스를 푸시할 수 있다

           - html 에는 css 나 js 파일이 포함되기 마련인데 html 을 읽으면서 그안에 들어있던 css 파일을 서버에서

             푸시하여 클라이언트에 먼저 줄 수 있다