어떤 브라우저 후, 캐리지 리턴의 URL을 입력 일어 났는가? (울트라 자세한 버전)

머리말

　　이 문제는 진부하게,하지만 자주는 이전보다 더 철저한 이해를 느낌, 심심 많은 온라인 기사,하지만 최근 유휴 상태가 인터뷰의 제목의 피날레로 표시하고 기사가 자신을 지적 할 수있다.

　　이 노트 이틀 그래서 상대적으로 거의 전체 내가 요약 기사 수십 보았다,하지만 난 프런트 엔드를하고 있었기 때문에, 그것은 그 부분을 렌더링 브라우저 페이지를 분석에 더 집중 될 것이다, 다른 부분은 내가 나열합니다 검사를 소유 할 수 있습니다 관심 키워드,

 

참고 : 이 문서의 단계를 기반으로, 요청은 간단한 HTTP 요청이 아닌 HTTPS, HTTP2, 간단한 DNS, 프록시 없음이며,이 비현실적이지만 서버는, 기초 아무런 문제가되지 않습니다.

 

일반 과정

1. URL 파싱

2. DNS 조회

3. TCP 연결

4. 요청을 처리

5. 입학 응답

6. 렌더링 페이지

 

A, URL 파싱

　　주소 확인 :

　　　　첫째, 귀하의 의견을 결정하는 키워드 나 검색 할 유효한 URL 및 자동 완성, 문자 인코딩 및 입력 내용에 따라 다른 작업입니다.

　　HSTS

　　　　보안상의 위험 페이지에 액세스하기 위해 HTTPS를 사용하는 HSTS 힘 클라이언트를 사용합니다. : 참조하십시오 당신은 HSTS를 모르는 ^[1] .

　　기타 작업

　　　　이러한 보안 검사, 접근 제한 등의 브라우저는 또한 몇 가지 추가 작업 (국내 브라우저 제한 996.icu 전).

　　캐시를 확인

 

 

　　　　

 

 

 

두, DNS 쿼리

　　기본 단계

　　　　

 

　　1. 브라우저 캐시

　　　　먼저 캐시에 체크하는 브라우저, 시스템 라이브러리 함수는 쿼리 호출되지 않습니다.

　　2. 운영 시스템 캐시

　　　　운영 시스템은 자체 DNS 캐시를 가지고 있지만, 그 전에, 도메인 이름을 확인하는 로컬 호스트 파일이있을 것이다 여부, DNS 서버에 쿼리를 전송하지 않습니다.

　　3. 라우터 캐시

　　　　라우터는 자신의 캐시를 가지고있다.

　　4. ISP DNS 캐시

　　　　ISP DNS는 대부분의 경우가 캐시됩니다 클라이언트 컴퓨터 설정에 기본 설정 DNS 서버입니다.

　　루트 네임 서버 질의

　　　　모든 이전 단계의 경우 로컬 DNS 서버도 전체 프로세스의 좋은 해석을 다음과 같은 인터넷의 루트 도메인에 요청을 전달, 캐시되지 않은 :

 

점에주의 필요

1. 재귀 : 조사의 중간 아래 모든 방법은 반환 정보 전에, 최종 결과를 반환하지 않습니다 (로컬 DNS 서버에 브라우저 프로세스)

2. 반복적 인 방법은 방법 루트 네임 서버 질의 로컬 DNS 서버입니다.

3. DNS 하이재킹은 무엇입니까

4. 최적화 말초 DNS 프리 페치

 

 

세, TCP 연결

　　TCP / IP는 데이터가 전송되는 네 가지로 나누어, 각 데이터 패키지가되게합니다 :

　　　　

 

1. 응용 계층 : HTTP 요청

　　이전 단계에서 우리는 서버의 IP 주소를 가지고, 브라우저는 HTTP 메시지를 구성을 포함하여 시작합니다 :

• • 요청 헤더 (요청 헤더) : 요청 방법, 목적지 주소, 프로토콜 등 따르고하기

  • 요청 본문 (추가 파라미터)

　　어떤주의 할 점 :

• • 브라우저는 GET, POST 방법을 보내고, GET 메소드를 사용하여 페이지를 열 수 있습니다

2. 전송 계층 : TCP 패킷 전송

　　전송 층 데이터 (세그먼트 단위) 분할 될 전송을 용이하게하기 위해서, 서버에 도달하는 TCP 접속을 개시하고, 편리 때 마커 번호 정확하게 서버 수락 메시지 정보를 복원 할 수있다.

　　연결을 설정하기 전에, 우리는 TCP 세 방향 핸드 셰이크를 수행합니다.

"

TCP / IP 세 방향 핸드 셰이크 정보, 인터넷 생생하게 설명 스크립트와 사진을 많이했다.

지식 포인트 :

1. SYN 홍수 공격

"

3. 네트워크 계층 : IP 프로토콜 주소 문의 맥

　　데이터 세그먼트 패키지와 소스 및 대상 IP 주소를 추가하고, 전송 경로를 찾기위한 책임이 있습니다.

　　대상 주소와 동일한 네트워크의 현재 주소는 다음 맥 주소에서 직접 전송 여부를 결정, 또는 다음 홉 주소를 찾기 위해 라우팅 테이블을 사용하고 ARP 프로토콜 쿼리 MAC 주소의 사용.

"

참고 : OSI 참조 모델에서 ARP 프로토콜 링크 계층에 위치하고 있지만, TCP / IP, 네트워크 계층은이 자리 잡고 있습니다.

"

4. 링크 계층 : 이더넷 프로토콜

　　이더넷 프로토콜

　　　　단위 등의 "프레임"에 이더넷 프로토콜 데이터 패킷에 따르면, 각 프레임은 두 개의 부분으로 분할된다 :

• • • 헤더 : 패킷의 송신기, 수신기, 데이터 형식

    • : 패킷 정보

　　Mac 주소

　　　　네트워크에 연결된 모든 장치가 "카드"인터페이스가 있어야합니다 이더넷을 제공, 데이터 패킷이 카드의 또 다른 조각에 하나 개의 카드에서 전송, 주소 카드는 맥 주소입니다. 모든 Mac 주소는 1-1의 용량, 독특합니다.

　　방송

　　　　데이터를 전송하는 방법은 직접 ARP 프로토콜을 통해 네트워크의 모든 시스템에 전송 된 데이터에,받는 ​​사람 주소가 자신의 맥 헤더 정보가 접수 일관 그렇지 않으면 폐기와 비교, 원래이다.

　　참고 : 수신자는 유니 캐스트 응답했다.

"

지식 포인트 :

1. ARP 공격

"

　　서버는 요청을 수락

　　　　판정 처리는 상기 단계로 반전하고, 포토 참조.

 

넷째, 서버는 요청을 처리

　　일반 과정

　　　　

 

 

 

　　HTTPD

　　　　가장 일반적인 Windows에서 공통 HTTPD 아파치와 Nginx의 리눅스 및 IIS 있습니다.

　　　　이 요청을 얻고, 그 요청을 처리하기 위해 자식 프로세스를 열고 수신합니다.

　　요청을 처리

　　　　연결 처리 될 TCP 패킷을 수신 한 후, HTTP 프로토콜 (요청 방법, 도메인 이름, 경로 등) 및 몇몇 인증을 분석 :

• • • 가상 호스트 구성되었는지 확인

    • 이 방법은 호스팅 동의 여부를 확인합니다

    • 사용자 (IP 주소, 상태 정보 등을 기반으로) 인증 방법을 사용하여

　　리디렉션

　　　　서버가 HTTP 리디렉션을 구성한다면, 반환  301응답에 따라 브라우저에 영구적 인 리디렉션 응답, 그것은 HTTP 요청을 (위의 절차를 다시 수행) 다시 보냅니다.

"

자세한 내용 : 문서를 참조하십시오 ^[2]

"

　　URL 재 작성

　　　　요청 된 파일 등 이미지, HTML, CSS, JS 파일로,이 파일에 직접 반환됩니다, 실제의 경우 그런 다음, URL 재 작성 규칙에 보인다.

　　　　그렇지 않으면 서버는 REST 스타일의 URL을 다시 작성하는 요청에 규칙에 따라 될 것입니다.

　　　　그런 다음 동적 스크립트 언어를 기반으로 요청을 처리하기 위해 동적 문서 인터프리터의 유형을 결정하기 위해 호출합니다.

　　　　예 MVC 프레임 워크 PHP 언어에서는, 먼저 경로와 일치하도록 바닥으로 URL에 따른 방법에 의해, 환경 파라미터를 초기화되며, 그 경로를 따라서 요청을 처리하기 위해 정의.

 

다섯째, 브라우저는 응답을 받아

　　브라우저가 서버의 자원의 응답을 수신 한 후, 자원 분석됩니다.

　　상태 코드에 따라 (예를 들면, 상기 재와 같은) 다른 일을 먼저 확인 응답 헤더.

　　응답 자원 (예 GZIP 같은) 압축 된 경우, 또한 압축 해제 될 필요가있다.

　　그런 다음, 응답 자원 캐싱을 할 수 있습니다.

　　다음에 리소스의 응답에 따라  마임 ^{[. 3]}  상기 응답 콘텐츠 파싱 유형 (예를 HTML 등의 화상은 다른 분석 방법이 있음).

여섯째, 렌더링 페이지

　　브라우저 커널

 

　　　　

 

　　다른 브라우저 커널은 렌더링 프로세스는 동일하지 않지만 일반적인 과정은 비슷합니다.

기본 흐름

 

 　　　　

 

 

 

6.1. HTML 구문 분석

　　　　먼저 브라우저 해상도가 위에서 아래로 라인으로 라인을 구문 분석 알고 있어야합니다.

　　　　해상도 과정은 네 단계로 나눌 수 있습니다 :

　　① 디코딩 (부호화)

　　　　송신 백 브라우저에서 지정된 파일에 따른 문자열 인코딩으로 변환 될 필요가 실제로 어떤 이진 데이터 바이트 (예컨대, UTF-8) HTML 코드이다.

　　② 미리 파싱 (프리 파싱)

　　　　Preresolved는 그와 같은 요청 된 자원의 특성들을 인식 처리 시간을 줄이기 위해 사전에 자원을로드하는 것입니다 img태그 src특성 및 요청은 요청 큐에 추가된다.

　　③ 상징 (토큰 화)

　　　　심볼은 심볼에 입력 파싱 어휘 분석의 방법이며, 시작 태그, 종료 태그 포함한 HTML 심볼들은 속성 이름과 속성 값.

　　　　그것은 상태 머신 식별 기호를 통과, 발생 등 <, >상태가 변경됩니다.

　　트리를 구축 ④ (트리 구조)

"

참고 : 상징적 인 트리 구축 및 병렬로 동작, 즉 한 결의가 레이블을 시작하기로 말을하는 것입니다, 그것은 DOM 노드를 작성합니다.

"

　　이전 단계에서 상징화 파서는 적합한 방법 만드는 이들 마커를 구하여하는 DOM객체에 삽입 이러한 심볼 DOM피사체.

< HTML > 
< 선두 > 
    < 타이틀 > 웹 페이지 분석 </ 타이틀 > 
</ 헤드 > 
< 본문 > 
    < DIV > 
        < H1 > 파싱 된 웹 페이지 </ H1은 > 
        < p는 > 이 예시적인 웹 페이지이다. </ P > 
    </ DIV > 
</ 바디 > 
</ HTML >

 

 

 

　　브라우저 내결함성 진수

　　　　브라우저가 문법의 오류를 수정하고 작업을 계속하기 때문에, 브라우저에서 "잘못된 구문"오류 같은 것을 본 적이 없습니다.

　　행사

　　　　전체 해상도 프로세스가 완료되면, 브라우저는 통과 할 DOMContentLoaded알림 이벤트를 DOM구문 분석.

　　6.2. CSS 구문 분석

　　　　브라우저가 CSS를 다운로드하면, CSS 파서가에 따라, 마주 치는 모든 CSS를 처리 할 구문 사양 ^[4] 모든 CSS 및 라벨을 분석, 우리는 일반 테이블을 얻을.

　　CSS 규칙 일치

　　　　일치하는 노드가 CSS 규칙에 해당하는 경우, 예를 들면, 오른쪽에서 왼쪽 : div p { font-size :14px }이 먼저 검색한다 p그것이 그 부모 요소 여부를 판정 태그 div.

　　　　우리는 ID와 클래스 CSS, 가능한 멀리 쓰기 때, 스택 이상하지 않습니다.

　　6.3. 렌더링 트리

　　　　사실, 이것은 DOM 트리와 CSS 규칙 트리 병합 과정이다.

"

참고 : 이러한 설정으로, 렌더링을 필요로하지 않는 노드를 무시 트리 렌더링 display:none노드를.

"

　　계산

　　　　가능한 값 중 어느 하나를 산출하도록 크기가 세 가지로 감소된다 auto비율 PX를, 예로서 rem로 변환 px.

　　종속

　　　　브라우저가 실제로 해당 요소에 적용해야하는 스타일을 결정하는 방법이 필요합니다, 그래서 그것은 사용이라고 specificity공식을, 수식을 전달합니다 :

1. 1. 태그 이름, 클래스, 아이디

   2. 인라인 스타일 여부

   3. !important

　　그런 다음 가장 높은 중 체중 값으로 온다.

　　차단 렌더링

　　　　에 직면했을 때 script시간 라벨, DOM 건물은 스크립트의 실행이 완료 될 때까지 중단 한 다음 DOM 트리를 구축하기 위해 계속됩니다.

　　　　그러나 JS 따라 CSS 스타일 경우,하지만 다운로드하여 CSS 규칙이 구축 될 때까지 스크립트의 실행을 지연 할 브라우저를 구축되지 않았습니다.

　　모든 우리는 알고있다 :

• • CSS는 JS 실행 차단

  • JS는 DOM 파싱 뒤에 차단할 수

　　이러한 상황을 피하려면, 다음과 같은 원칙해야한다 :

• • 자바 스크립트 자원의 CSS 자원 앞서

  • 바닥에 JS HTML, 즉,  </body>전

　　또한, 당신은 차단 모드를 변경하려는 경우, 당신은 연기와 비동기를 사용할 수 있습니다, 참조 : 이 기사를 ^[5]

　　6.4. 레이아웃 도면

　　　　결정 기하학적 특성이 같은 모든 노드 종, 렌더링 : 위치, 크기, 그리고 마지막으로 박스 모델을 입력 정확하게 화면 내의 각 요소의 정확한 위치와 크기를 캡처 할 수 있습니다.

　　　　그런 다음, 트리 탐색을 렌더링 화면에 그 내용을 표시합니다 렌더러 페인트 () 메서드를 호출합니다.

　　6.5. 결합 층을 렌더링

　　　　상기 모든 사진 합병 최종 출력 이미지 도면.

　　6.6 환류 묘화

　　리플 로우 (리플 로우)

　　　　브라우저가 일부 레이아웃에 영향을 미치는 변화를 감지 발견하면, 당신은에서 할 것이다, 다시 재 렌더링 갈 필요 html, 재귀 아래로 시작 라벨의 위치와 크기를 다시 계산합니다.

　　　　기본 리플 로우 마우스를 슬쩍 때, 창 크기를 조정하기 때문에, 페이지가 변경됩니다, 피할 수 없다.

　　다시 그리기 (칠)

　　　　배경색, 글자 색 등 위치 변화의 요소가 요소 주변에 영향을 미치지 않을 것이다 변경되면 재기록이 발생한다.

　　　　각 다시 그리기 후, 브라우저 레이어가 화면에 통합 출력 할 필요가 렌더링합니다.

　　　　환류 비용이 다시 그려보다 훨씬 높다, 그래서 우리는 역류를 방지하기 위해 시도해야합니다.

　　예를 들면 :

• • display:none 트리거 역류하고,  visibility:hidden 만 트리거 다시 그려.

　　6.7. 자바 스크립트 컴파일러 구현

　　일반 과정

　　　　

 

 

 

 

　　그것은 3 단계로 나눌 수 있습니다 :

　　1. 어휘 분석

　　　　JS 스크립트가로드 된 후, 먼저 첫 번째 코드 블록의 구문을 분석하는 구문 분석 단계를 입력 할 것이 올바른 잘못된는 "구문 오류"던져 실행을 멈춘다.

　　　여러 단계 :

• • 워드, 예를 들어 var a = 2,,에 var, a, =, 2등의 어휘 단위.

  • , 어휘 단위를 구문 분석하는 추상 구문 트리 (AST)를 변환합니다.

  • 코드 생성, 기계 명령어로 추상 구문 트리를 변환.

　　2. 미리 컴파일

　　　　JS 세 가지 운영 환경이 있습니다 :

• • 지구 환경

  • 기능 환경

  • 평가

　　　　각각 다른 운영 환경 상황에 따라, 대응하는 실행 콘텍스트를 생성 진입, 함수 호출 스택의 형성 바닥 항상 글로벌 실행 컨텍스트 스택 항상 현재 실행 컨텍스트 인 것 스택.

　　실행 컨텍스트 만들기

　　실행 컨텍스트를 만드는 과정은 주로 다음과 같은 세 가지 일을합니다 :

• 변수 객체 만들기

• 매개 변수, 함수, 변수

• 범위 체인 수립

• 현재의 실행 환경 변수에 액세스 할 수 있는지 여부를 확인

• 이 결정하는 포인트

　　3. 수행

　　　　JS 스레드

 

 

 

　　JS는 단일 스레드이지만,하지만 사실은 총 4의 작품에서 스레드 :

"

그냥 지원의 세 만 JS 엔진 스레드는 실제 실행은

"

• JS 엔진 실 : 또한 JS 커널로 알려진 V8 엔진으로 실행 JS 스크립트의 메인 스레드를 해결할 책임 등이다

• 이벤트는 스레드를 트리거 : 주로 이벤트가 트리거 등 마우스, 키보드,, 등의 이벤트를 제어하는 ​​데 사용되는 브라우저 커널 스레드, 속해, 이벤트 핸들러 함수는 JS 엔진 스레드 실행을 기다리는 이벤트 큐를 촉진하기 위해

• 타이머 스레드 트리거 : 주요 제어 setInterval및 setTimeout타이밍, 타이밍은 타이머 핸들러가 JS 엔진 스레드를 기다리는 이벤트 큐를 촉진 넣어 완료됩니다.

• 비동기 HTTP 요청을 스레드 : XMLHttpRequest를 통해 연결하면 당신은 JS 엔진 스레드를 기다리는 상태의 콜백 함수, 이벤트 큐를 촉진하기 위해 핸들러의 상태를 설정하면, 브라우저는, 상태 변화 readyState의를 모니터링 할 새 스레드를 엽니 다 실행.

　　주 : 동시 연결의 수는 브라우저가 동일한 도메인 이름, 일반적으로 여섯 제한됩니다.

　　매크로 작업

　　　　로 분할 :

• • 동기화 작업 : 단지 이전 작업 완료 후 주문 실행, 작업 후에는 수행 할 수

  • 비동기 작업 : 직접 트리거 조건이 충족되는 경우에만 실행되지는 관련 스레드 비동기 작업은 주 스레드가 등등 비동기 아약스, DOM 이벤트에서는 setTimeout과 같이 실행이 완료 시작할 때 JS 엔진에서 수행하는 작업을 기다리고, 대기열에서 작업을 추진한다.

　　마이크로 작업

　　　　마이크로 작업, ES6 및 노드 환경에서의 주요 API : Promise, process.nextTick.

　　　　비동기 작업 전에 매크로 작업 후 마이크로 작업 동기화 작업의 구현.

　　　　

 

 

 

 

　　코드 예제

CONSOLE.LOG ( '1'); // 태스크 매크로 동기 

의 setTimeout (함수 () { 
    CONSOLE.LOG ( '2'); // macrotask 비동기 
}) 

새로운 새 약속 (함수 (결의) { 
    . CONSOLE.LOG를 ( '3 '); // 태스크 매크로 동기 
    해결 (); 
})가 다음 (함수 () {. 
    CONSOLE.LOG (4' ') // 태스크 마이크로. 
}) 

CONSOLE.LOG (5' ') // 동기 macrotask.

　　상기 코드 시퀀스를 출력한다 : 1,3,5,4,2

 

참조 문서

[1]당신은 HSTS를 모르는 :  http://t.cn/AiR8pTqx

[2]http://t.cn/AiR8pnEC :이 문서를 참조하십시오

[3]MIME : http://t.cn/AiR8prtm

[4]구문 사양 : http://t.cn/AiR80GdO

[5]이 문서 :  http://t.cn/AiR80c1k

[6]무엇이 - 일 -시 - zh_CN으로 : http://t.cn/AiR80xb5http://t.cn/AiR80xb5http://t.cn/AiR80xb5

[7]DOM에 태그 : HTTP : //t.cn/AiR80djX

[8] 브라우저 캐싱 메커니즘의 완전한 이해 : http://t.cn/AiR8Ovob

[9] 브라우저를 작동 : 현대 웹 브라우저의 장면 뒤에 : http://t.cn/AiR8Oz06

[10] 평신도 브라우저 렌더링 원리 : http://t.cn/AiR8O4fO

원본 주소 : HTTPS : //4ark.me/post/b6c7c0a2.html

 

아, 나는 ~~ 붙여 넣기