브라우저 커넥션 한계(동시 요청 개수 한계)로 인한 성능 저하 개선기
안녕하세요, 졸린 개발자입니다.
오늘은 성능 개선 포인트 한 가지를 소개드리려고 합니다.
여러분이 잘 알고 계시는
http에 대한 얘기로부터, 성능 개선까지 이야기를 떠나봅시다.
브라우저의 커넥션은 왜 여러개일까요?
간단하게 생각해보면
A 요청 > B 요청 > C 요청을 처리하는 방식으로 하면
자연스럽게 한 페이지가 완성이 될 텐데
왜 브라우저에서는 커넥션을 여러개를 사용할까요?
그 이유는 간단합니다
A요청 > 처리
B요청 > 처리
C요청 > 처리
이렇게 3개를 한번에 요청을 해서 동시에 처리를 하게되면
훨씬 더 빠르게 가능하겠죠
A요청 (1초), B요청 (1초), C요청 (1초) 일때
순차적으로 하면, 총 3초가 걸리는데 반해
한번에 처리하면 1초면 모든 데이터를 불러올 수 있겠죠
http 1.1에서는 이를 파이프라이닝이라는 기술을 통해
커넥션 하나에서도 여러개의 요청을 처리하는것으로 알려져 있지만
브라우저단에서 구현하기는 쉽지 않다고 합니다.
따라서, 브라우저에서는 파이프라이닝을 구현하는 대신
커넥션 여러개를 만들어, 동시 요청을 처리할 수 있게 만든 것이죠.
(TCP의 문제인 HOL도 같이 해결될 수 있겠죠)
브라우저의 커넥션 한계는 몇일까요?
이쯤 되면 궁금한 점이 하나 있으실껍니다.
그럼 브라우저의 커넥션은 무제한으로 열 수 있는건가? 🤔
무한정으로 열면, 무한정으로 동시처리가 가능한
꿈의 그리던 무한대의 자원이 펼쳐지는건가?
는 말도 안되겠죠....
그럼 브라우저 탭 하나에서, http request를 위해 커넥션을 최대 몇개까지 쓸 수 있을까요?
http 1.1 기준으로는, 크롬에서 최대 6개까지 쓸 수 있다고 합니다.
https://stackoverflow.com/questions/985431/max-parallel-http-connections-in-a-browser
그러면 최대 동시에 처리할 수 있는 요청은
6개의 요청이 됩니다.
http 2.0은 어떨까요?
firefox는 최대 동시 요청 수가 100개, 크롬은 알려져 있지 않는거 같군요
https://stackoverflow.com/questions/36835972/is-the-per-host-connection-limit-raised-with-http-2
http 2.0은 멀티플렉싱을 해서, 제한이 아주 큰 수로 되어있지 않을까? 했는데, 아쉽게도 빗나갔군요
개선
개선은 아주 간단합니다.
수백 ~ 수천개의, 단일 리소스 조회 요청을 동시에 날리던 것을
서버에서 벌크로 조회할 수 있는 api를 만들어서 개선하면 되겠죠?
물론 서버에서는, 요청 한개에 수백 ~ 수천개의 데이터를 내려주는것은 큰 부담이니
적절한 페이징을 통해, 한번에 100개 정도를 조회하게 해서
서버 여러대가 나눠서 처리하게 하고, 브라우저에서는 작은 수의 동시 처리를 하여
해결을 하면 됩니다.
마무리
그럼 긴 글 읽어주셔서 감사드립니다.
섬네일 사진: Unsplash의 Daniil Silantev