URL 입력에서 페이지 보이기까지

이것은 전단 면접에서 반드시 풀어야 할 문제다.전체적으로 말하자면 입력부터 구현까지 구체적인 실현은 다음과 같은 절차를 거쳐야 한다. 1. 사용자가 웹 주소를 입력하고 브라우저가 DNS 조회 요청을 발동한다. 2, TCP 연결을 구축한다. 3. 브라우저가 웹 서버에 HTTP 요청을 보낸다. 4, 서버가 응답 데이터를 클라이언트에게 보낸다. 5, 브라우저가 httpresponse를 해석하고 데이터를 사용자에게 렌더링한다.

다음은 각 단계에 대해 자세히 설명합니다.

1. 사용자가 사이트 주소를 입력하고 브라우저가 DNS 조회를 시작하여 사용자에게 웹 페이지를 방문하도록 요청하면 DNS 서버(도메인 이름 해석 시스템)는 사용자가 제공한 도메인 이름에 따라 해당하는 IP 주소를 찾을 것이다.도메인 이름 확인 서버는 UDP 프로토콜을 기반으로 하는 프로그램으로 보통 53 포트를 감청하여 클라이언트의 도메인 이름 확인 요청을 받습니다.DNS 찾기 프로세스는 다음과 같습니다. 브라우저 캐시 - 브라우저는 DNS 레코드를 일정 시간 캐시합니다.흥미로운 것은 운영체제가 브라우저에게 DNS 기록을 저장하는 시간을 알려주지 않았기 때문에 서로 다른 브라우저는 고정된 시간(2분에서 30분)을 저장할 수 있다.
시스템 캐시 - 브라우저 캐시에서 필요한 기록을 찾지 못하면 브라우저가 시스템 호출을 합니다. (윈도우즈는 gethostbyname)이렇게 하면 시스템 캐시의 기록을 얻을 수 있다.
라우터 캐시 – 이어서 앞의 쿼리 요청을 라우터로 보내면 보통 자신의 DNS 캐시가 있습니다.
ISP DNS 캐시 – 다음 체크는 ISP 캐시 DNS 서버입니다.여기서는 일반적으로 상응하는 캐시 기록을 찾을 수 있다.
귀속 검색 - ISP의 DNS 서버는 도메인 이름 서버부터 귀속 검색을 시작합니다.com 최고급 도메인 서버부터 페이스북 도메인 서버까지.일반 DNS 서버의 캐시에는com 도메인 이름 서버의 도메인 이름 때문에 최고급 서버로의 일치 과정은 그리 필요하지 않습니다.
2. TCP 연결 브라우저를 구축하고 DNS를 통해 웹 서버의 진짜 IP 주소를 얻은 후 웹 서버에 tcp 연결 요청을 한다. TCP를 세 번 악수하여 연결을 구축한 후에 브라우저는 HTTP 요청 데이터를 서버에 보낼 수 있다.
3. 브라우저가 웹 서버에 HTTP 요청을 보내면 HTTP 요청은 TCP 프로토콜을 바탕으로 하는 응용층 프로토콜인 하이퍼텍스트 전송 프로토콜이다.하나의 http 업무는 클라이언트에서 서버로 보내는 요청 명령과 (서버에서 클라이언트로 보내는) 응답 결과로 구성됩니다.

GET http://www.cricode.com/ HTTP/1.1
Host: www.cricode.com
Connection: keep-alive
Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
User-Agent: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.114 Safari/537.36
Accept-Encoding: gzip,deflate,sdch
Accept-Language: zh-CN,zh;q=0.8

4. 응답 데이터를 클라이언트 웹 서버에 보내면 일반적으로 80 포트를 감청하여 클라이언트의 HTTP 요청을 받는다.클라이언트와 TCP 연결을 맺은 후 웹 서버는 클라이언트가 보낸 데이터를 받아들이기 시작하고 HTTP 디코딩을 통해 받아들인 네트워크 데이터에서 요청한 URL 정보를 분석합니다. 이전에는Accept-Encoding,Accept-Language 등 다른 정보가 있습니다.웹 서버는 HTTP 요청 헤더의 정보에 따라 응답 데이터를 클라이언트에게 되돌려줍니다.일반적인 HTTP 응답 헤더 데이터는 다음과 같습니다.

HTTP/1.1 200 OK
Date: Fri, 24 Oct 2014 13:55:18 GMT
Server: Apache
X-Powered-By: PHP/5.4.32
Keep-Alive: timeout=5, max=10000
Connection: Keep-Alive
Transfer-Encoding: chunked
Content-Type: text/html; charset=UTF-8
a0f6
<</span>!DOCTYPE HTML>
<</span>html>
<</span>head>
<</span>meta charset="UTF-8">
<</span>meta http-equiv="X-UA-Compatible" content="IE=10,IE=9,IE=8">
<</span>meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<</span>title><</span>/title>
<</span>body class="home"><</span>/body>
<</span>/html>

이로써 HTTP 통신 프로세스가 완료되었습니다.웹 서버는 HTTP 요청 헤더의 연결 필드 값에 따라 TCP 링크 채널을 닫을지 여부를 결정합니다. 연결 필드 값이keep-alive일 때 웹 서버는 이 연결을 즉시 닫지 않습니다.(이 단계는 처음에는 리디렉션 및 브라우저 추적 리디렉션 주소 등이 있을 수 있습니다.)
5. 브라우저 해석 http response
(1) html 문서 해석(DOM Tree)은 브라우저가 모든 HTML 문서를 완전하게 받아들이지 않았을 때 이미 이 페이지를 표시하기 시작한다.생성 해석 트리는dom트리이고dom원소와 속성 노드로 구성되며 트리의 뿌리는document 대상입니다.
(2) 브라우저에서 HTML에 포함된 객체 가져오기 보내기
불러오는 과정에서 외부 css 파일을 만났습니다. 브라우저에서 css 파일을 가져오는 요청을 따로 보냈습니다.그림 자원을 만나면 브라우저도 그림 자원을 얻기 위해 별도의 요청을 보냅니다.이것은 비동기 요청으로 html 문서를 불러오는 데 영향을 주지 않습니다.그러나 문서를 불러오는 과정에서 js 파일을 만나면 html 문서는 렌더링(불러오기 해석 렌더링 동기화)의 라인을 끊는다. 문서에서 js 파일이 불러오기를 기다릴 뿐만 아니라 해석이 실행되기를 기다려야 html 문서의 렌더링 라인을 복구할 수 있다.
(3) css 해석(parser Render Tree) 브라우저에서 css 파일을 다운로드하여 css 파일을 스타일시트 대상으로 해석하고domtree를 렌더링하는 데 사용합니다.이 대상은 css 규칙을 포함하고, 이 규칙은 선택기와 성명 대상을 포함합니다.css 요소가 겹치는 순서는 나무의 낮은 끝에서 위로 겹치는 것입니다.
(4)js 해석 브라우저 UI 스레드: 단일 스레드, 대부분의 브라우저(예를 들어 크롬)는 하나의 스레드를 자바스크립트를 실행하고 사용자 인터페이스를 업데이트하는 데 사용한다.
js가 페이지를 막는다: 브라우저의 http 요청이 막히는 것은 일반적으로 js가 일으킨 것이다. 구체적인 원인은 js 파일이 다운로드가 끝난 후에 바로 실행되기 때문이다. js가 실행할 때 브라우저의 다른 행위를 막는다. 한동안 인터넷 요청이 처리되지 않았기 때문이다. 이 시간이 지나야 http 요청이 계속 실행된다. 이 시간은 이른바 http 요청이 막히는 것이다.
js가 막히는 원인: UI 라인의 실행을 막는 이유는 js가 UI의 디스플레이를 제어할 수 있기 때문입니다. 페이지에 불러오는 규칙은 순서대로 실행되기 때문에 js 코드를 만났을 때 UI 라인이 먼저 실행됩니다.