728x90
반응형
HTTP의 진화, HTTP/2
Stream, Stream Multiplexing (다중 요청 처리)
하나의 TCP 연결에서 여러 개의 요청과 응답을 동시에 처리할 수 있습니다. 이를 통해 지연 시간(latency)을 줄이고 더 빠른 웹 페이지 로딩을 가능하게 합니다.
HTTP/2는 하나의 TCP Connection에서 요청을 처리할 수 있는 반면 HTTP/1.1은 여러개 Connection을 가지는 것을 확인
서버 푸시(Server Push)
HTTP/2는 서버 푸시(Server Push) 기능을 제공하여, 클라이언트가 요청하지 않은 리소스도 미리 보내는 방식으로 성능을 향상시킬 수 있습니다.
헤더 압축 (HPACK)
HTTP/2는 헤더 압축을 통해 요청과 응답의 크기를 줄이고, 네트워크 효율성을 높입니다. 이를 통해 HTTP 요청에서 발생하는 오버헤드를 줄일 수 있습니다.
실행 환경
docker-compose.yaml
services:
local-nginx:
image: nginx:latest
container_name: local-nginx
networks:
- local-nginx-network
restart: always
ports:
- "80:80"
- "443:443"
volumes:
- ./nginx/conf.d:/etc/nginx/conf.d:ro
- ./nginx/certs:/etc/nginx/certs:ro
- ./nginx/html:/home/html
networks:
local-nginx-network:
name: local-nginx-network
driver: bridgeconf.d/nginx.conf
# HTTP/1.1
server {
listen 80;
server_name dev.jayg.com;
root /home/html;
index index.html;
gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml+rss+xml application/fs+xml;
gzip_vary on;
gzip_comp_level 6;
gzip_buffers 16 8k;
}
# HTTP/2
server {
http2 on;
listen 443 ssl;
listen [::]:443 ssl;
server_name dev.jayg.com;
root /home/html;
index index.html;
ssl_certificate /etc/nginx/certs/dev.jayg.com+2.pem;
ssl_certificate_key /etc/nginx/certs/dev.jayg.com+2-key.pem;
ssl_protocols TLSv1.2 TLSv1.3;
ssl_prefer_server_ciphers on;
ssl_ciphers HIGH:!aNULL:!MD5;
gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml+rss+xml application/fs+xml;
gzip_vary on;
gzip_comp_level 6;
gzip_buffers 16 8k;
location /index.html {
add_header Link "<js/jquery.js>; rel=preload; as=script" always;
}
}html/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTTP Test</title>
<script src="js/jquery.js"></script>
</head>
<body>
<h1>HTTP/1.1 vs HTTP/2 Test</h1>
<img src="images/1.jpg" width="75" height="75">
<img src="images/2.jpg" width="75" height="75">
<img src="images/3.jpg" width="75" height="75">
<img src="images/4.jpg" width="75" height="75">
<img src="images/5.jpg" width="75" height="75">
<img src="images/6.jpg" width="75" height="75">
<img src="images/7.jpg" width="75" height="75">
<img src="images/8.jpg" width="75" height="75">
<img src="images/9.jpg" width="75" height="75">
<img src="images/10.jpg" width="75" height="75">
<br>
<img src="images/11.jpg" width="75" height="75">
<img src="images/12.jpg" width="75" height="75">
<img src="images/13.jpg" width="75" height="75">
<img src="images/14.jpg" width="75" height="75">
<img src="images/15.jpg" width="75" height="75">
<img src="images/16.jpg" width="75" height="75">
<img src="images/17.jpg" width="75" height="75">
<img src="images/18.jpg" width="75" height="75">
<img src="images/19.jpg" width="75" height="75">
<img src="images/20.jpg" width="75" height="75">
<br>
<img src="images/21.jpg" width="75" height="75">
<img src="images/22.jpg" width="75" height="75">
<img src="images/23.jpg" width="75" height="75">
<img src="images/24.jpg" width="75" height="75">
<img src="images/25.jpg" width="75" height="75">
<img src="images/26.jpg" width="75" height="75">
<img src="images/27.jpg" width="75" height="75">
<img src="images/28.jpg" width="75" height="75">
<img src="images/29.jpg" width="75" height="75">
<img src="images/30.jpg" width="75" height="75">
<br>
<img src="images/31.jpg" width="75" height="75">
<img src="images/32.jpg" width="75" height="75">
<img src="images/33.jpg" width="75" height="75">
<img src="images/34.jpg" width="75" height="75">
<img src="images/35.jpg" width="75" height="75">
<img src="images/36.jpg" width="75" height="75">
<img src="images/37.jpg" width="75" height="75">
<img src="images/38.jpg" width="75" height="75">
<img src="images/39.jpg" width="75" height="75">
<img src="images/40.jpg" width="75" height="75">
<br>
<img src="images/41.jpg" width="75" height="75">
<img src="images/42.jpg" width="75" height="75">
<img src="images/43.jpg" width="75" height="75">
<img src="images/44.jpg" width="75" height="75">
<img src="images/45.jpg" width="75" height="75">
<img src="images/46.jpg" width="75" height="75">
<img src="images/47.jpg" width="75" height="75">
<img src="images/48.jpg" width="75" height="75">
<img src="images/49.jpg" width="75" height="75">
<img src="images/50.jpg" width="75" height="75">
</body>
</html>html/images/x.jpg
html/js/jquery.js
jquery 아무 최신버전 복붙
cert/*pem
brew install mkcert
mkdir ssl
cd ssl
mkcert dev.jayg.com localhost 127.0.0.1
vi /etc/
추가: 127.0.0.1 dev.jayg.com
728x90
반응형
'IT > Web' 카테고리의 다른 글
| HTTP의 진화 (3) | 2024.12.24 |
|---|---|
| [Web Hacking] Challange 54 풀이 (0) | 2023.05.18 |
| [Web Hacking] Challange 24 풀이 (0) | 2023.05.05 |
| [Web Hacking] Challange 16 풀이 (0) | 2023.05.01 |
| [보안] Cookie bomb attack (0) | 2023.05.01 |
