브라우저가 한 번에 1개의 도메인에서 다운로드 받는 리소스는 몇 개 인가요?
👨💻 브라우저가 한 번에 1개의 도메인에서 다운로드 받는 리소스는 몇 개 인가요?
🐵: 안녕하세요 김고릴라입니다 : )
오늘 포스팅할 내용은 브라우저가 한번에 1개의 도메인에서 다운로드 받는 리소스의 갯수에 대해서 알아보는 내용입니다.
사실 이 내용은 프론트엔드 개발자를 위한 문제은행에서 답을 모르는 것들을 포스팅해서 기억해 두려고 발췌해 온 주제랍니다. 사이트는 아래를 참고해 주세요 ; )
🐵: 다시 본론으로 돌아와 이야기를 이어나가보도록 하죠!
우리가 사용하는 브라우저는 통신을할때 HTTP라는 프로토콜을 사용합니다.
❗❗ : 여기서 뜬금없이 HTTP를 설명하는 것이 아니라 우리가 1개의 도메인에서 리소스를 다운받게 해주는 친구가 HTTP라는 것이기 때문에 우리는 문제를 해결하기 위해서 이 HTTP를 자세하게 살펴봐야 합니다.
🐵:
이 HTTP 라는 친구도 여러버전으로 개발이 되어 있는데, 우리가 현재 사용하고 있는 버전은 HTTP/1.1 버전입니다. 이 버전은 1997년 1월에 출시되어 자그마치 23년이라는 나이를 가지고 있죠.
그 이후 몇번의 개선이 있었지만, 23년이라는 시간을 생각하면 그만큼의 안정성을 보장한다 볼 수 있을것 같습니다.
현재의 웹은 다량의 멀티미디어 리소스를 처리해야합니다.
예시로 우리가 웹사이트에 접속하면 기본적으로 html, css, js 파일들이 필요할 것이고, 사진정보까지 필요하다면 추가로 jpg나 png 같은 파일까지 요청하게 됩니다.
이렇듯 현재 웹은 다량의 멀티미디어 리소스가 필요하고 이를 특정 서버로 HTTP라는 것을 이용해 요청해야합니다.
🤔: 그럼 HTTP를 이용해 이 많은 멀티미디어를 어떻게 서버로 요청하나요?
🐵:
여기서 중요한것이 "요청한다"라는 키워드인데요. 사실 HTTP는 단방향 연결이기 때문에 Request, Response 방식으로 데이터를 주고 받습니다.
즉, HTTP/1.1은 기본적으로 Connection(Client와 Server와의 연결)당 하나의 요청을 처리하도록 설계되어있다는 이야기지요.
이러한 이유로 우리는 다량의 멀티미디어들을 순차적으로 서버로 요청을 하고 그 결과를 하나씩 받아오게 됩니다.
아래의 그림을 보시면 더 이해가 빠를듯 싶네요 : )
그렇다 보니 우리는 요청하는 멀티미디어가 많을수록 Latency(대기시간)이 길어지게 됩니다.
이 시간동안 화면이 잠시 멈춘듯 표현이 되는것이죠.
여기서 우리가 알고자했던 질문의 정답을 알 수 있겠네요.
브라우저가 한 번에 1개의 도메인에서 받을 수 있는 리소스는 1개임을 알 수 있습니다.
추가 정보
이러한 데이터를 주고받는 방식때문에 조금이라도 대기시간을 줄이고자하는 노력들이 생겨났습니다.
오늘은 어떤것들이 있는지만 살펴보고, 자세한 내용은 추후에 다루도록 하겠습니다 : )
첫번째는 http를 통해서 전송되는 데이터의 용량을 줄이기 위한 시도들이 있었습니다.
그 결과로 Minify CSS, Minify Javascript 와 같은 기술이 생겨났죠.
이 기술들은 공백이나 여백과 같은 것들을 없앰으로서 코드를 축소하여 데이터 용량을 줄이는 방식입니다.
두번째는 웹페이지를 구성할때 필요한 다양한 아이콘 이미지 파일의 요청 횟수를 줄이기 위한 방법입니다.
바로 Imgae Spriting인데요, 위에서 언급햇듯이 한 요청당 하나의 리소스만 받을 수 있는 HTTP/1.1의 구조 때문에 필요한 아이콘들이 한되 모아 하나의 Image파일로 만들어 보내주는 방식입니다.
그리고 이렇게 받아진 이미지들은 좌표값을 이용해 필요한 영역만 화면에 보여주는 방식으로 이용되어집니다.