브라우저의 자동 HTTP 요청

브라우저를 사용하여 특정 사이트의 어떤 페이지에 접속한다고 가정해 봅시다:

GET /test.html HTTP/1.1
Host: example.com

해당 요청이 다음과 같은 HTML 코드를 결과로 반환한다고 가정합니다:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="styles.css">
		<script src="scripts.js"></script>
	</head>
	<body>
		<img src="images/img.png">
	</body>
</html>

브라우저의 작업은 여기서 끝나지 않습니다. HTML 코드만 로드된 상태로는 페이지를 표시하기에 부족하기 때문입니다. HTML을 로드한 후, 브라우저는 코드를 분석하고 스타일시트, 스크립트, 이미지에 대한 참조가 코드 내에 있음을 확인합니다. 이 시점에서 브라우저는 자동으로, 스스로 서버에 요청을 보냅니다.

이때 각 리소스에 대해 개별적인 HTTP 요청이 생성됩니다. 즉, 예를 들어, 연결된 각 CSS 파일마다 별도의 요청이 전송될 것입니다.

다음 페이지를 로드한 후 브라우저는 몇 개의 HTTP 요청을 만들까요?

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="main.css">
		<link rel="stylesheet" href="styles.css">
		<script src="scripts.js"></script>
	</head>
	<body>
		<img src="images/img1.png">
		<img src="images/img2.png">
		<img src="images/img3.png">
	</body>
</html>