브라우저 주소 표시줄에서 URL을 입력하고 페이지를 표시하려면

기본 버전

브라우저는 요청한 URL에 따라 DNS 도메인 이름 분석에 맡기고 실제 IP를 찾아 서버에 요청한다.

서버는 백엔드 처리가 끝난 후에 데이터를 되돌려주고 브라우저는 파일(HTML, JS, CSS, 이미지 등)을 수신한다.

브라우저는 불러온 자원(HTML, JS, CSS 등)에 대해 문법 분석을 하고 해당하는 내부 데이터 구조(예를 들어 HTML의 DOM)를 구축한다.

처리된 자원 파일을 불러오고 페이지를 렌더링하며 완성합니다.

상세판

브라우저 주소 표시줄에 URL 입력

브라우저에서 캐시를 보고 요청한 자원이 캐시에 있고 신선할 경우 디코딩 단계로 이동

           ，     
         ，        ，            ，          。
             HTTP     Expires Cache-Control：
        HTTP1.0  Expires，                
        HTTP1.1   Cache-Control: max-age=,              

브라우저 확인 URL 획득 프로토콜, 호스트, 포트, path

브라우저에서 HTTP(GET) 요청 메시지 조립

브라우저가 호스트 IP 주소를 가져오는 과정은 다음과 같다:

         
        
    hosts  
         
    ISP DNS  
    DNS    （            IP   ）

6. socket과 대상 IP 주소를 열고 포트에 TCP 링크를 만들고 세 번 악수하면 다음과 같다.

           TCP SYN=1，Seq=X        
         SYN=1， ACK=X+1， Seq=Y    
         ACK=Y+1， Seq=Z

TCP 링크 설정 후 HTTP 요청 보내기

서버는 요청을 수락하고 분석하여 가상 호스트가 HTTP Host 헤더를 사용하여 요청을 판단하는 서비스 프로그램

으로 요청을 전송한다.

서버에서 HTTP 요청 헤더에 캐시 검증 정보가 포함되어 있는지 확인합니다. 캐시가 신선하면 304와 같은 대응 상태 코드를 되돌려줍니다

프로세서가 전체 요청을 읽고 HTTP 응답을 준비하며 데이터베이스 조회 등의 작업이 필요할 수 있음

서버가 TCP 연결을 통해 응답 메시지를 브라우저로 전송

브라우저가 HTTP 응답을 받은 다음에 상황에 따라 TCP 연결을 닫거나 다시 사용하기를 보류한다. TCP 연결을 닫는 네 번의 악수는 다음과 같다.

         Fin=1， Ack=Z， Seq= X  
         ACK=X+1， Seq=Z  
         Fin=1， ACK=X， Seq=Y  
         ACK=Y， Seq=X  

브라우저가 응답 상태를 확인합니까? 1XX, 3XX, 4XX, 5XX인지 확인합니다. 이 경우 처리는 2XX와 다릅니다

.

리소스를 캐시할 수 있는 경우 캐시

응답을 디코딩(예를 들어 gzip 압축)

리소스 유형에 따라 처리 방법 결정

HTML 문서 해석, 구성 요소 DOM 트리, 다운로드 자원, CSSOM 트리 구성, js 스크립트 실행, 이런 조작은 엄격한 선후 순서가 없다. 다음은 각각 해석

DOM 트리 구축:

    Tokenizing：  HTML           
    Lexing：                    
    DOM construction：  HTML         DOM 

해석 과정에서 그림, 스타일시트, js 파일을 만나 다운로드를 시작합니다

CSSOM 트리 구축:

    Tokenizing：         
    Node：        
    CSSOM：    CSSOM 

DOM 트리와 CSSOM 트리를 기반으로 렌더링 트리 구축:

     DOM             ，       ：
    1）script,meta          。
    2) css     ， display: none
            ，     CSSOM     
                  

js 해석은 다음과 같다:

         Document     HTML，                  ，  document.readystate loading
    HTML       async defer script ，         ，           。         ，                 。      document.write()          。                     ，         script          
             async   script ，             。              ，              。        document.write()，        script        
           ，document.readState  interactive
      defer               ，            ，    document.write()
        Document     DOMContentLoaded  
              ，                 ，                        ，document.readState  complete，window  load  

페이지 표시(HTML 구문 분석 중에 페이지가 단계적으로 표시됨)

상세 약판

브라우저에서 URL을 수신하고 네트워크 요청 라인을 엽니다(이 부분은 브라우저의 메커니즘과 프로세스와 라인 간의 관계를 전개할 수 있습니다)

네트워크 스레드를 켜서 완전한 HTTP 요청을 보내는 것(이 부분은 dns 조회, TCP/IP 요청, 5층 인터넷 프로토콜 창고 등 지식과 관련된다)

서버에서 요청을 받고 대응하는 백엔드에서 요청을 받는다(이 부분은 부하 균형, 안전 차단 및 백엔드 내부 처리 등과 관련될 수 있다)

백엔드와 프론트 데스크톱의 HTTP 상호작용(이 부분은 HTTP 헤더, 응답 코드, 메시지 구조, 쿠키 등 지식을 포함하고 정적 자원의 쿠키 최적화와 코딩 디코딩, 예를 들어 gzip 압축 등을 포함한다)

단독으로 꺼낸 캐시 문제, HTTP 캐시(이 부분은 http 캐시 헤드, ETAg,catch-control 등 포함)

브라우저가 HTTP 데이터 패키지를 받은 후의 해석 절차(html-문법 분석을 분석한 다음에dom트리로 해석하고 css를 분석하여 css규칙트리를 생성하고render트리로 통합한 다음에layout,painting렌더링, 복합도층의 합성, GPU 그리기, 외부 체인 자원 처리,loadedd와 DOMContentLoaded 등)

CSS의 시각적 형식 모델

JS 엔진 해석 과정(JS의 해석 단계, 예처리 단계, 집행 단계 생성 집행 상하문, VO, 작용역 체인, 회수 메커니즘 등)

기타