URL 입력부터 페이지 로딩 완료, 페이지 표시까지의 과정에서 어떤 일이 발생하나요?

주소 표시줄의 URL 작업 방법에 따라 리소스를 로드하고 데이터를 얻는 방법이 다릅니다. 에 대한 자세한 프로세스는 다음과 같습니다. 주소 표시줄에 URL을 입력하고 누릅니다. Enter. 리소스 로드 키 " 이 작업 방법은 분석에 사용됩니다. 다른 방법의 프로세스는 유사하며 차이점은 나중에 분석됩니다.

　1. URL이 http 프로토콜로 판단되면 웹 방식에 따라 처리됩니다.

　2. 브라우저는 먼저 브라우저 캐시를 확인합니다-시스템 캐시-라우터 캐시, 캐시에 하나가 있으면 페이지 콘텐츠는 화면에 직접 표시됩니다(현재 서버로 요청이 전송되지 않습니다). 그렇지 않은 경우 다음 단계로 진행 (나중에 서버에 요청을 보내야 함)

　3. DNS 해상도를 통해 웹사이트의 IP 주소를 알아냅니다.

　4. 실제 IP 주소 서버에 tcp 연결을 시작하고 브라우저와 tcp 3방향 핸드셰이크를 설정합니다.

　5. 핸드셰이크가 성공한 후 HTTP 프로토콜 세션이 진행되고 브라우저는 (요청 헤더)

　6. 웹 서버에 웹 서버를 입력합니다. 예: Apache , Tomcat, Node.JS 및 기타 서버;

　7. PHP, Java, JavaScript 등 배포된 백엔드 애플리케이션을 입력합니다. , Python 등 해당 요청 처리 찾기 ;

　8. 피드백 헤더를 종료하고 데이터를 브라우저에 반환합니다;

　9. 브라우저가 html문서(응답 헤더, 상태 코드 200), 동시에 캐시 설정;

　10. 그런 다음 브라우저는 전체

HTML 구조를 구문 분석하여 DOM 트리를 형성하는 동시에 해당 CSS 파일도 구문 분석하여 을 형성해야 합니다. CSS 트리(CSSOM).  

다음으로 DOM + CSSOM

을 결합하여 렌더링 트리(Render Tree)를 형성해야 합니다.

　11.

트리를 그린 후 페이지에서 각 노드의 위치를 ​​계산해야 합니다. 이 프로세스를 레이아웃이라고 합니다. 12. 레이아웃 프로세스는 연속적인 2차원 평면에서 수행됩니다. 다음으로 이러한 결과를 화면의 개별 2차원 평면에 래스터화하고 매핑해야 합니다.

　　이 과정을 페인트라고 합니다. 최신 브라우저는 성능 향상을 위해 페이지를 여러 레이어로 나누고 각 레이어를 칠한 다음 하나의 페이지(복합 레이어).

　

PS: 처음에 언급된 은 URL에 대한 것입니다. bar. URL 작업 방법마다 리소스를 로드하고 데이터를 얻는 방법이 다릅니다." 의 다른 방법의 프로세스는 캐싱 ​​프로세스에 약간의 차이점이 있다는 점을 제외하면 위 방법과 유사합니다.

1. 새로고침하려면 '이동' 또는 주소 표시줄에서 Enter 키를 누르세요. 위를 참조하세요.

2. F5 새로고침 : 2단계는 없고, 8단계에서 반환값을 판단한다. 304가 반환된다는 뜻이다. 은 캐시되어 있고 이때 을 이용하여 직접 캐시하면 이 200을 반환하면 이 캐시되지 않고 끝까지 실행된다는 뜻이다.

3. Ctrl+F5 웹 페이지 새로 고침의 차이점: 에는 2단계가 없으며 은 200을 반환해야 합니다. 8단계에서 그리고 끝까지 순차적으로 실행

(위의 세 가지 방법에 대해서는 http 프로토콜의 캐싱 메커니즘과 구별하는 것이 더 이해하기 쉽습니다. 여기서는 서버 측에 더 집중하세요. 요청 전송과 반환 값을 구별하세요.

PS: 10~12단계에서는 프런트엔드 렌더링 페이지 프로세스에 더 중점을 둡니다. 참고하세요: http://www.jianshu.com/p/016e8e78eb1f