네트워크 Browser 요청의 제한🌱 (HTTP/1.1, HTTP/2)

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개)

 

 

네트워크 탭을 보면 아래와 같이 하얀색 칸이 생기는 현상을 발견할 수 있습니다.

하얀색은 요청이 들어온후에 기다리고 있는 시간을 의미합니다.

DOMContentLoaded이후에 Load간의 차이는 그 동안 리소스를 요청하고 받아오고 있다는 것을 의미하게 됩니다.

아래의 예시들은 하얀색에 커서를 올리면 나오는 화면들 입니다.

좀 더 자세한 정보들을 얻을 수 있는데요

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이 너무 길어지거나 요청을 다 주고 받은 경우에 양쪽에서 끊어 집니다

 

---

 

출처 : 

https://docs.pushtechnology.com/cloud/latest/manual/html/designguide/solution/support/connection_limitations.html

Browser connection limitations | Documentation

https://developer.chrome.com/docs/devtools/network/reference/?utm_source=devtools#timing-explanation 

Network features reference - Chrome Developers