웹 서버는 "전체 웹 사이트"를 보내지 않지만 브라우저가 요청하는 문서를 보냅니다.
예를 들어, 당신은에 액세스 할 때 https://www.google.com/를 문서의 브라우저 쿼리 서버 https://www.google.com/
. 서버는 요청을 처리하고 HTML 코드를 다시 보냅니다.
그런 다음 브라우저는 서버가 전송 한 내용을 확인합니다. 이 경우 HTML 웹 페이지이므로 문서를 구문 분석하고 참조 된 스크립트, 스타일 시트, 이미지, 글꼴 등을 찾습니다.
이 단계에서 브라우저는 해당 문서 다운로드를 완료했지만 여전히 참조 문서를 다운로드하지 않았습니다. 그렇게하거나 건너 뛰도록 선택할 수 있습니다. 일반 브라우저는 최상의 시청 경험을 위해 모든 참조 문서를 다운로드하려고 시도합니다. Adblock과 같은 광고 차단기 또는 개인 정보 플러그인 (Ghostery, NoScript)이있는 경우 일부 리소스도 차단 될 수 있습니다.
그런 다음 브라우저는 서버에 단일 리소스를 명시 적으로 요청할 때마다 참조 문서를 하나씩 다운로드합니다. Google 예제에서 브라우저는 다음 중 몇 가지를 언급하기 위해 다음과 같은 참조를 찾습니다.
(실제 파일은 사용자, 브라우저 및 세션마다 다를 수 있으며 시간이 지남에 따라 변경 될 수 있습니다)
텍스트 기반 브라우저는 이미지, 플래시 파일, HTML5 비디오 등을 다운로드하지 않으므로 더 적은 데이터를 다운로드합니다.
@NathanOsman은 주석에서 좋은 지적을합니다. 때로는 작은 이미지가 HTML 문서에 직접 삽입되어 다운로드하는 것을 피할 수 없습니다. 이것은 요청 수를 줄이는 데 사용되는 또 다른 트릭입니다. 그들은이다 매우 그렇지 base64로 이진 파일을 인코딩의 오버 헤드가 너무 큰,하지만, 작은. Google.com에는 이러한 이미지가 거의 없습니다. ( base64로 인코딩 된 크기 / 디코딩 된 크기 )
- 19 × 11 키보드 아이콘 (106 B / 76 B)
- 28 × 38 마이크 아이콘 (334 B / 248 B)
- Chrome 개발자 도구 리소스 탭에 1x1 px 투명 GIF (62 B / 43 B)가 표시 되지만 소스에서 찾을 수 없습니다. 나중에 JavaScript로 추가 할 수 있습니다.
- 1x1 px 손상된 GIF 파일이 두 번 나타납니다 (34 B / 23 B). 그 목적은 나에게 미스터리입니다.