브라우저에서 웹 사이트를 탐색 할 때 정확히 어떻게됩니까?


64

브라우저에 www.cnn.com을 입력하면 화면 뒤에서 어떤 일이 발생하며 화면에 정보가 어떻게 표시됩니까?

기술적 인 설명은 대단히 감사하겠습니다.


이 책에서는 컴퓨터 기술 : 하향식 접근 방식 6 판 (링크 : Book )에 대한 기술적 인 설명이 나와 있습니다 . (495-500 페이지) 상당한 세부 사항으로 들어갑니다. 웹 사이트가 사용자 브라우저에 표시 될 때까지 컴퓨터를 켤 때 발생하는 작업부터 시작합니다. 이 슬라이드 세트에서 책에 언급 된 내용을 맛볼 수 있습니다. (링크 : 슬라이드 88에서 95까지)
Slothworks 5

: 당신은 여기에서 자세한 정보를 찾을 수 있습니다 github.com/vasanthk/how-web-works을 또는이 html5rocks.com/en/tutorials/internals/howbrowserswork
MEMS

답변:


134

브라우저 : "좋아요.이 주소를 요청하는 사용자가 있습니다 : www.cnn.com. 슬래시 나 다른 것이 없기 때문에 이것이 메인 페이지의 직접 요청입니다. 프로토콜이나 포트도 정의되어 있지 않습니다. 그래서 HTTP로 가정하고 포트 80으로 갈 것입니다 ... 우선, 우선 DNS. 친구, 일어나세요!이 www.cnn.com은 어디에 숨어 있습니까? "

DNS : "오른쪽 ... 잠깐만 ISP 서버에 물어 볼게요. 157.166.226.25처럼 보입니다."

브라우저 : "Ok. Internet Protocol Suite, your turn! 157.166.226.25로 전화주십시오.이 HTTP 헤더를 보내십시오. 기본 페이지의 기본 구조와 내용을 요청하여 가져올 내용을 알고 있습니다. 당신이 이것에 신경 쓰지 않을 것 같아요. "

TCP / IP : " 내 차례 는 무엇을 의미 합니까? DNS를 위해 저를 뒤로 물러서지 않았던 것처럼, 하나님, 여기에 약간의 감사를 얻는 데 필요한 것은 ..."

브라우저 : ...

TCP / IP : "예, 예. 연결 중 ... 게이트웨이에게 전달하도록 요청하겠습니다. 모두 쉽지는 않습니다. 예쁜 요청을 여러 부분으로 나누어야합니다. 그래서 그것은 끝까지 도달하고 내가 얻는 수천 가지의 모든 포장에서 돌려 보낸 물건을 조립합니다 ... 아, 맞아요.

한편, CNN 본사에서는 마침내 웹 서버의 문에 메시지가 표시됩니다.

CNN 웹 서버 : "Nzhôô! 고객! 그는 뉴스를 원합니다! 프론트 페이지! 어떻습니까?"

CNN 서버 측 스크립트 엔진 : "맞아요! 프론트 페이지 맞죠?"

CNN 데이터베이스 서버 : "예! 저를 위해 일하십시오! 어떤 컨텐츠가 필요하십니까?"

CNN 서버 측 스크립트 엔진 : "... 음, 죄송합니다 DB, 여기 캐시에 첫 페이지의 사본이 있습니다. 아무 것도 컴파일 할 필요가 없습니다. 그러나이 사용자 ID를 가져 와서 저장합니다. "고객에게도 알려주므로 나중에 얘기 할 사람을 알 수 있습니다."

CNN 데이터베이스 서버 : "예!"

사용자 컴퓨터로 돌아 가기 ...

TCP / IP : "Ooookay, 답장이 온다. 오 이런, 왜 이것이 큰 것이 될 것 같은 느낌이 들지?"

브라우저 : "아, 와우 .. 여기에는 모든 종류의 자바 스크립트 코드가 있습니다 ... 많은 이미지와 몇 가지 형태 ... 렌더하는 데 시간이 좀 걸릴 것입니다. 더 잘 이해하십시오. IP 시스템, HTTP를 통해 i.cdn.turner.com에서 몇 가지 스타일 시트가 필요하고 /cnn/.element/css/2.0/common.css 파일을 요청하는 것을 보자. 그런 다음 i.cdn.turner.com에서 이러한 스크립트를 얻으십시오. 지금까지 6 개를 세고 있습니다. "

TCP / IP : "사진을 볼 수 있습니다. 서버 주소와 그 모든 것을 알려주십시오. HTTP 요청 내에서 해당 파일을 래핑하면 처리하고 싶지 않습니다."

DNS : "i.cdn.turner.com을 확인하는 중입니다 ... 사소한 것은 실제로는 cdn.cnn.com.c.footprint.net입니다. IP는 4.23.41.126입니다."

브라우저 : "물론, 잠깐만 기다려주세요. 처리하는 데 몇 nsec이 걸립니다.이 스크립트를 모두 이해하려고합니다 ..."

TCP / IP : "여기에 요청한 CSS가 있습니다. 아, 그리고 ... 추가 스크립트도 다시 나타났습니다."

브라우저 : "휴, 더 많은 종류의 비디오 광고가 있습니다!"

TCP / IP : "아, 이거 재미 있겠다 ..."

브라우저 : "모든 종류의 이미지도 있습니다! 그리고이 CSS는 약간 불쾌 해 보입니다 ... 맞습니다. 만약 그 부분이 거기에 있고 맨 위에이 줄이 있다면 ... 지구상에서 더 이상 어떻게 맞을까요? , 나는 그것을 만들기 위해 이것을 조금 늘려야 할 것이다 ... 오, 그러나 다른 CSS 파일은 그 규칙을 무시한다 ... 글쎄,이 파일은 렌더링하기 쉬운 부분이 아닐 것이다.

TCP / IP : "알겠습니다. 잠시만 산만하게하세요. 아직 할 일이 많습니다."

브라우저 : "사용자, 여기 작은 진행 보고서가 있습니다. 죄송합니다.이 작업에는 몇 초 정도 걸릴 수 있습니다.로드하는 데에는 140 가지의 다른 요소가 있으며 지금까지 16 개가 있습니다."

1-2 초 후 ...

TCP / IP : "좋아, 그게 다야. 이봐, 들어 봐 ... 미안 내가 너를 earlier 아 먹었어, 거기 관리하니? 이건 너에게도 큰 부담 인 것 같아."

브라우저 : "휴, 지금은이 모든 웹 사이트들이 있습니다. 그들은 당신을 위해 쉽게 만들지 않을 것입니다. 글쎄, 내가 관리 할 것입니다. 내가 여기있는 것입니다."

TCP / IP : "저는 요즘 우리 모두에게 너무 무거울 것 같아요. 아, DNS를 칭찬하지 마라!"

브라우저 : "사용자 안녕하세요! 웹 사이트가 준비되었습니다. 뉴스를 받아보십시오!"


17
그래서 이것이 내 PC가 어두워 진 후에하는 일입니다.
Phoshi

7
대단한 설명 ... 모자에게 떨어져 ... 빈고 ...
Rachel

7
:) 스토리 텔링의 Wondeful 조각
마이클 Borgwardt

5
@dex : ... 그리고 오늘날까지도 여전히 강력 해져서, 역사의 책에서 칭찬받을만한 부지런한 사용자의 모든 기발한 요청을 분류합니다. 그러나 다른 모든 것들과 마찬가지로 언젠가는 더 이상 현대화되지 않은 현대적인 접근 방식으로 우아하게 퇴직 할 때가되었습니다. 그러나 그들이 우리의 레거시에서 항상 거기에있을 것이라는 것을 확신하십시오. 잘 아는 미소로보고 미래 인터넷 세대의 생생한 시대에 배운 모든 어려운 교훈을 미래 세대에게 전달하십시오.
Ilari Kajaste

3
naysayers를위한 만세, 맞아, @wahnfrieden? 나는 그것이 정확하고 유익하다고 생각합니다.
Jürgen A. Erhard


18
  • 브라우저는 입력 한 내용 (URL)을 호스트 이름과 경로로 분할합니다.
  • 브라우저는 지정된 호스트 이름 및 경로에서 데이터를 요청하는 HTTP 요청을 구성합니다.
  • 브라우저는 호스트 이름을 IP 주소로 확인하기 위해 DNS 조회를 수행합니다.
  • 브라우저는 IP 주소를 통해 지정된 컴퓨터에 대한 TCP / IP 연결을 형성합니다. (이 연결은 실제로 여러 컴퓨터에서 구성되며 각 컴퓨터는 다음 컴퓨터로 데이터를 전달합니다.)
  • 브라우저는 HTTP 요청을 지정된 IP 주소로 연결하여 보냅니다.
  • 해당 컴퓨터는 TCP / IP 연결에서 HTTP 요청을 수신하여 웹 서버 프로그램으로 전달합니다.
  • 웹 서버는 호스트 이름과 경로를 읽고 요청한 데이터를 찾거나 생성합니다.
  • 웹 서버는 해당 데이터를 포함하는 HTTP 응답을 생성합니다.
  • 웹 서버는 해당 HTTP 응답을 TCP / IP 연결을 시스템으로 다시 보냅니다.
  • 브라우저는 HTTP 응답을 수신하여 헤더 (데이터를 설명)와 본문 (데이터 자체)으로 분할합니다.
  • 브라우저는 데이터를 해석하여 브라우저에 표시하는 방법을 결정합니다. 일반적으로 정보 유형과 일반적인 형식을 지정하는 HTML 데이터입니다.
  • 일부 데이터는 세부 레이아웃을위한 스타일 시트, 인라인 이미지 또는 Flash 무비와 같이로드해야하는 추가 리소스를 지정하는 메타 데이터입니다. 이 메타 데이터는 다시 URL로 지정되며이 전체 프로세스는 모두로드 될 때까지 각 프로세스에 대해 반복됩니다.

이것은 좋지만 캐싱 (브라우저 및 다른 곳), 프록시,로드 밸런싱, CDN 등을 언급 할 가치가 있습니다. 이것들은 모두 바쁜 사이트가 방대한 양의 컨텐츠에 대한 거의 동시에 수백만 건의 요청을 처리하는 방법을 이해하는 데 중요한 부분이라고 생각합니다.
Sam Dutton

12

첫 번째 단계는 DNS (Domain Name Server) 조회입니다. 네트워크 설정에 지정된 (또는 DHCP에서 제공 한) DNS 서버를 사용하여 최상위 도메인 (cnn.com)을 찾은 다음 해당 도메인의 네임 서버에 지정된 하위 도메인 (www.cnn.com)의 IP 주소를 요청합니다.

IP 주소가 있으면 브라우저가 웹 서버와 통신을 시작합니다. 이것은 지정된 프로토콜을 사용하여 수행됩니다 (일반적으로 HTTP 1.1로 설정 됨). '/'에 대한 'GET'요청이 HTML 문서 컨텐츠 및 적절한 헤더 (문서의 컨텐츠 유형, HTML 및 기타 정보를 브라우저에 알리는)로 응답합니다. 그런 다음 브라우저는 문서를 구문 분석하고 페이지에 포함해야하는 URL (예 : 이미지 또는 링크 된 스타일 시트)을 찾아 각 URL에 대해 GET 요청을 수행합니다.

브라우저는 일반적으로 자동으로 '/favicon.ico'에 대한 GET 요청을합니다 (사이트 제목 옆에 작은 CNN 아이콘 표시).

브라우저는 또한 요청 헤더에 gzip 알고리즘을 사용하여 응답 컨텐츠를 압축하도록 지정할 것입니다. 서버에서 지원하는 경우 파일 다운로드가 훨씬 작아집니다. ZIP 파일을 다운로드하여 압축을 풀는 것처럼 보이지만 모두 투명합니다.

페이지를 다시로드하면 브라우저는 해당 페이지가 시스템에 이미 캐시되어 있는지 확인하고, 그렇다면 문서의 헤더에 대해서만 HTTP 요청을 수행하고 수정 된 날짜를 확인합니다. 이 날짜가 캐시 된 사본보다 늦으면 전체 문서 내용을 다시 요청하고 페이지를 새로 고칩니다. 그렇지 않으면 로컬 사본 만 사용합니다.


그 사람은 기본 사항을 알지 못하고 DNS, DHCP 및 IP로 그를 날려 버렸습니다. 그에게 IP 패킷 구조를 설명합시다!

6
그는 기술적 세부 사항을 요구했다. 원하는 경우 IP를 조회 할 수 있습니다.

문제는 아마 아무것도보고 싶지 않다는 것입니다 ... :(

8

CNN 측에서는 다른 답변과는 거리가 멀다.

  • CNN의 컴퓨터는 컴퓨터에서 페이지를 요청하는 메시지를받습니다.
  • 이 요청을 CNN이 웹 사이트에 사용중인 많은 컴퓨터 중 하나로 리디렉션합니다. 그 이유는 응답 웹 페이지를 여러 컴퓨터에 통합하는 작업을 여러 컴퓨터에 분산시킬 수 있기 때문입니다.
  • CNN 컴퓨터는 요청을 받고 거의 전적으로 미리 계산 된 웹 페이지로 응답하지만 사용자에게 보내기 전에 몇 가지 사항이 변경 될 수 있습니다 (맨 위의 광고 일 수도 있고 헤드 라인 뉴스 일 수도 있음). 때때로 컴퓨터는 요청을받을 때마다 많은 작은 구성 요소로 페이지를 조립합니다. CNN이 무엇을하는지 모르겠다
  • 응답은 네트워크를 통해 컴퓨터로 전달 된 후 표시됩니다.
  • 응답에 이미지가 포함되지 않았습니다. 컴퓨터가 이미지에 대한 다른 요청을 보내면 거의 동일한 시나리오가 발생합니다.

6

이것은 분명히 기술적 인 설명은 아니지만 훌륭한 Vladaid.com 의 훌륭한 시각 보조 자료로 다음과 같은 도움 이 될 수 있습니다.

인터넷 작동 방식


1

방금 요청한 정보는 수십 권의 책을 채울 수 있습니다. 그러나 여기 내가 그것을 설명하려는 시도가 있습니다 : 브라우저가 OS에게 cnn.com의 IP 주소를 찾도록 지시합니다. 그런 다음 OS는 DNS 서버에 cnn.com의 IP 주소를 요청합니다. IP는 브라우저에 전송되어 IP 주소에 접속하여 페이지를 요청합니다. cnn.com은 당신과 html 페이지를 보냅니다. 브라우저는 html을 구문 분석하고 정보를 HTML 렌더러로 보냅니다. 그런 다음 브라우저는 OS에게 화면에 표시 할 내용을 알려줍니다.



1

"Sendung mit der Maus"(어린이를위한 기술을 설명하는 매우 인기있는 독일 어린이 TV 쇼)의 멋진 비디오가 있습니다.

Send Sended mit der Maus-인터넷 기능 (인터넷 작동 방법).

불행히도 독일어로만, 텍스트가없는 것은 재미 있습니다. 재미있는 헬멧을 쓴 남자는 IP 패킷을 재생하고 데이터는 종이 카드에 기록됩니다. 클래식 :-).

BTW, 설명은 실제로 상당히 좋습니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.