HTTP/1.0, HTTP/1.1 프로토콜을 이용할때는 브라우저에서 동시에 요청을 보내는 개수에 제한이 있습니다.
그래서 HTTP/1.0, HTTP/1.1 프로토콜을 이용할때는 외부 resource를 요청할때 예상치 못한 delay를 경험할 수 도 있습니다.
css, js일 경우에는
- inline으로 변경을 하거나
- npm을 이용하거나 webpack과 code split을 적절히 이용,
- http/2 프로토콜로 변경,
- 브라우저 요청 제한은 한 도메인에만 해당하므로 여러 도메인에서의 요청으로 변경하면
이를 해결할 수 있습니다.
* http/2는 nginx에 http2 모듈을 설치하면 적용할 수 있습니다.
아래의 글은 http/1.1을 이용할 때 브라우저에서의 요청 제한에 대해 알아보고 그 외에 의식의 흐름대로 흘러나갈 예정입니다.
하나의 도메인에서 요청을 보낼때 그 요청의 개수에는 제한이 있습니다.
대부분의 모던 브라우저에서는 6~8개가 제한입니다. (IE 10는 8, 11는 13개)
네트워크 탭을 보면 아래와 같이 하얀색 칸이 생기는 현상을 발견할 수 있습니다.
하얀색은 요청이 들어온후에 기다리고 있는 시간을 의미합니다.
아래의 예시들은 하얀색에 커서를 올리면 나오는 화면들 입니다.
좀 더 자세한 정보들을 얻을 수 있는데요
queue에 추가된 것은 1.29초 였지만 start는 1.48초에 했다는 것을 의미합니다.
queue에 추가된 것은 1.63초 였지만 start는 2.16초에 했다는 것을 의미합니다.
둘다 요청후에 대기 시간들이 발생하고 있음을 알 수 있고 해당 사이트에 접근하면 약간의 delay가 존재함을 체감할 수 있습니다.
아래는 네트워크 탭에서 확인할 수 있는 주요정보들에 대한 정보 입니다.
- Queing : 브라우저에서 요청을 대기열에 넣습니다.
* 우선순위가 높은 요청이 있을 경우
* 이미 6개의 HTTP/1.0, HTTP/1.1 프로토콜을 이용하는 TCP 연결이 성립되어 있는 경우
* 브라우저가 디스크 캐시에 공간을 잠시 할당할때 - Stalled : 요청이 대기열에 설명된 이유 중 하나로 인해 중지될 수 있음.
- DNS Lookup : IP 주소 요청을 해결중일때
- Initial connection : 브라우저에서 연결을 establish 하려고 하는중, TCP handshake/ SSL에서의 reties와 negotating
- Proxy negotation : 프록시 서버에서 요청을 negotating
- Reqeust sent : 요청이 보내지는 시간
- Waiting(TTFB) : 브라우저가 응답의 첫번째 byte를 기다리고 있는 중. TTFB는 Time To First Byte를 의미. 이 시간에는 한번의 왕복 지연 시간과 서버가 응답을 준비하는 데 걸린 시간이 포함됩니다.
- Content Download : 브라우저가 응답을 전달 받는중 서비스 워커로부터나 네트워크로부터 직접 전달받는중일수 있다. 응답 body를 읽는데 소요된 총 시간을 의미한다. 예상보다 큰 값이라면 network가 느린것을 의미하거나 응답을 읽는데 지연시키는 다른 작업을 하고 있을 수 도 있다.
- Receiving Push : HTTP/2 서버 푸시를 통해 응답을 전달 받는중
- Reading Push : 브라우저가 이전에 받은 로컬 데이터를 읽는 중
서버푸시는 HTTP/2 에서 등장한 것으로
클라이언트가 필요할 것으로 판단되는 것을 http2_push로 서버에서 보내버릴수 있습니다.
nginx에서 설정이 가능합니다.
http2 에서는 connetion, keep-alive 헤더가 무시됩니다. http/2가 도메인별로 하나의 TCP connetion을 생성하고 멀티플렉스 스트리밍으로 복수의 데이터를 주고 받기 때문에 해당 헤더들이 제공해주는 것들이 필요가 없기 때문이지 않을까 싶습니다.
이 connection은 idle time이 너무 길어지거나 요청을 다 주고 받은 경우에 양쪽에서 끊어 집니다
출처 :
Browser connection limitations | Documentation
Browsers limit the number of HTTP connections with the same domain name. This restriction is defined in the HTTP specification (RFC2616). Most modern browsers allow six connections per domain. Most older browsers allow only two connections per domain. The
docs.pushtechnology.com
https://developer.chrome.com/docs/devtools/network/reference/?utm_source=devtools#timing-explanation
Network features reference - Chrome Developers
A comprehensive reference of Chrome DevTools Network panel features.
developer.chrome.com
'네트워크' 카테고리의 다른 글
| 네트워크 JWT 🗝 (0) | 2022.04.19 |
|---|---|
| 주소창에 www.google.com을 입력하면?(성공과 실패를 결정하는 1% 네트워크 원리) (0) | 2022.04.17 |
| 네트워크 HTTP, HTTPS, SSL HandShake 😶🌫️ (0) | 2022.04.17 |
| 네트워크 HTTP, HTTP 1.1, HTTP 2.0 🔥 (0) | 2022.04.16 |
| html5, 웹 표준 및 웹 접근성 🔥 (0) | 2022.04.13 |
