🕰️ HTTP/1.0

HTTP는 애플리케이션 계층으로 웹 서비스 통신에 사용됩니다. HTTP/1.0 부터 시작해서 발전을 거듭해 지금은 HTTP/3 입니다.

HTTP/1.0은 기본적으로 한 연결당 하나의 요청을 처리하도록 설계되었습니다. 이는 RTT 증가를 불러왔습니다. 서버로부터 파일을 가져올 때마다 TCP의 3-웨이 핸드셰이크를 계속 열어야 했기 때문에 RTT가 늘어나는 단점이 있었습니다.

• 용어 설명: 
  
  • RTT:
    패킷이 목적지에 도달하고 다시 출발지로 돌아오기까지 걸리는 시간, 즉 패킷 왕복 시간

⏱️ RTT의 증가를 해결하기 위한 방법

매번 연결할 때마다 RTT가 증가하므로 서버 부담이 커지고 사용자 응답 시간이 길어졌습니다. 이를 해결하기 위해 이미지 스플리팅, 코드 압축, 이미지 Base64 인코딩 등을 사용하곤 했습니다.

📌 이미지 스플리팅

많은 이미지를 다운로드하면 과부하가 걸리기 때문에, 여러 이미지를 하나의 큰 이미지로 합쳐 다운로드하고, 이를 background-image의 position을 이용해 개별 이미지를 표시하는 방법입니다.

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

하나의 이미지인 icons.png를 기반으로 background-position을 통해 2개의 이미지를 설정한 코드입니다.

 

📌 코드 압축

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

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")});

📌 이미지 Base64 인코딩

이미지 파일을 64진법으로 이루어진 문자열로 인코딩하는 방법입니다. 이 방식은 서버와의 연결을 열고 이미지에 대해 HTTP 요청을 할 필요가 없다는 장점이 있습니다. 단, Base64 문자열로 변환 시 파일 크기가 약 37% 증가하는 단점이 있습니다.

• 용어 설명: 
  
  • 인코딩:
    정보의 형태나 형식을 표준화, 보안, 처리 속도 향상, 저장 공간 절약 등을 위해 다른 형태나 형식으로 변환하는 처리 방식