웹 페이지로드 프로세스 이해
와 같은 웹 사이트에 액세스하려면 브라우저와 웹 사이트 서버 간의 복잡한 상호 작용이 포함됩니다. 이 과정을 단계별로 분류합시다
1. URL 입력 및 유효성 검사 :
"Amazon.in"을 입력하고 Enter를 누릅니다. 브라우저는 먼저 URL을 검증하여 올바른 프로토콜 (http : // 또는 https : //)이 있는지 확인합니다. 누락 된 경우 https : //
2. DNS 해상도 :
브라우저에는 서버의 IP 주소가 필요합니다. DNS 조회를 수행합니다
최근 해상도에 대한 캐시를 확인합니다
찾을 수없는 경우 운영 체제의 캐시를 점검합니다
마지막으로, 그것은 DNS 서버 (ISP 또는 Google 8.8.8.8과 같은 공개 서버)를 쿼리하여 IP 주소 (예 : 54.239.33.123)를 얻습니다.
3. TCP 연결 :
tcp : 를 사용하여 보안 연결이 설정됩니다
3 방향 핸드 셰이크 : Syn, Syn-ack 및 ACK 패킷이 신뢰할 수있는 커뮤니케이션을 보장하기 위해 교환됩니다.
4. tls/ssl 핸드 셰이크 (https의 경우) :
HTTPS (대부분의 사이트의 기본값)의 경우 암호화가 설정됩니다.
암호화 프로토콜이 협상됩니다
보안 연결을 보장하기 위해 서버의 SSL/TLS 인증서가 확인되었습니다.
5. http 요청 :
브라우저는 http (s) 요청을 보냅니다 :
메소드 : 일반적으로 웹 페이지를 검색합니다
헤더 : 브라우저 유형, 언어 기본 설정, 쿠키 및 캐시 데이터를 포함한 메타 데이터. 샘플 요청 :
-
-
6. 서버 응답 : -
Amazon Server는 요청을 처리하고 다시 전송합니다
상태 코드 : 는 성공 (200 OK), 리디렉션 (301) 또는 오류 (404)를 나타냅니다.
헤더 : 콘텐츠 유형 (텍스트/html), 캐싱 지침 및 쿠키와 같은 메타 데이터.
본문 : HTML, CSS, JavaScript 및 기타 페이지를 표시하는 데 필요한 기타 데이터.
7. 클라이언트 측 렌더링 :
브라우저는 웹 페이지를 렌더링합니다
-
HTML 구문 분석: HTML은 DOM(문서 개체 모델) 트리로 구문 분석됩니다. 외부 리소스(CSS, JS, 이미지)가 식별됩니다.
-
CSS 구문 분석: CSS 파일을 가져와서 구문 분석하여 CSSOM(CSS 개체 모델)을 생성합니다.
-
JavaScript 실행: JavaScript 파일이 다운로드되어 실행됩니다(
async
또는 defer
를 사용하지 않는 한 순서가 중요합니다). JavaScript는 DOM 및 CSSOM을 동적으로 수정할 수 있습니다.
-
렌더 트리: DOM과 CSSOM이 결합되어 렌더링 트리를 생성하고 표시되는 내용을 결정합니다.
-
레이아웃 및 페인팅: 요소 위치와 크기가 계산되고 페이지가 화면에 렌더링됩니다.
8. 리소스 로딩:
이미지, 동영상, 글꼴 등이 동시에 다운로드됩니다. 일부는 CDN(Content Delivery Network)에서 제공될 수 있습니다.
9. 브라우저 캐싱:
브라우저는 후속 방문 시 더 빠른 로딩을 위해 페이지의 일부(이미지, 스타일시트, JavaScript)를 캐시합니다. 서버 헤더는 캐싱을 제어합니다.
10. 사용자 상호작용:
브라우저는 사용자 작업(클릭, 양식 제출)을 처리하고 새로운 HTTP 요청을 트리거하기 위해 연결을 유지합니다.
간단한 다이어그램:
-
브라우저: URL 입력 → DNS 조회 → TCP/TLS 핸드셰이크 → HTTP 요청
-
서버: 요청 처리 → 응답 보내기(HTML, CSS, JS)
-
브라우저: 구문 분석 → 렌더링 → 리소스 로드 → 페이지 표시
웹사이트 최적화:
Amazon과 같은 주요 웹사이트에서는 다양한 최적화 기능을 사용합니다.
-
CDN: 더 빠른 전송을 위해 콘텐츠를 지리적으로 배포합니다.
-
지연 로딩: 필요할 때만 리소스를 로드하세요.
-
축소: 파일 크기를 줄입니다.
-
사전 연결/프리페치: 리소스 로딩 속도를 향상합니다.
-
캐싱: 리소스 재사용을 극대화합니다.
이 자세한 설명은 웹페이지 로드의 전체 수명주기를 다룹니다. 특정 단계에 대한 추가 정보가 필요하면 알려주세요!
위 내용은 웹 사이트를 열면 내부적으로 정확히 무슨 일이 일어나는지의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!