[STUDY] 브라우저 렌더링 (Browser Rendering)

1. 브라우저 렌더링 (Browser Rendering)

· HTML, CSS, 스크립트 코드를 읽고 출력(Rendering)하는 과정

 

1) 브라우저 주소창에 URL 입력 

· 프로토콜(http or https), URL, 포트(80 or 443) 분석 

· URL → IP 변경

① 로컬 DNS(host 파일) 에서 도메인 네임(domain name) (URL) 검색 
② 해당 도메인 네임 정보가 없는 경우, 외부 DNS에 URL 검색 및 요청
③ 외부 DNS 로부터 해당 도메인 네임의 IP 응답을 로컬 DNS(host 파일)에 캐싱되고, 다음 검색 때 우선 적용 

 

· IP → MAC(Media Access Control) 주소 변경

① 로컬 네트워크 망에서 IP를 사용하는 장치를 검색 
② 로컬 네트워크 망에서 해당 IP를 사용하는 장치가 없는 경우, 게이트웨이(gateway)를 통해 외부 네트워크 망에서 검색 요청 
③ 해당 IP를 사용하는 장치에 대해 ARP(Address Resolution Protocol, IP→MAC 주소로 변경하기 위한 프로토콜) 브로드캐스트를 통해 IP 를 MAC 주소로 변경 

 

2) 클라이언트(Client) → 서버(Server) 연결 

· 클라이언트-서버 간 TCP 세션을 연결 

· HTTP, HTTPS 요청(request) / 응답(response) 을 통해 서버 웹 페이지 코드(HTML, CSS, 스크립트) 다운로드 수행 

 

3) 웹 페이지 코드(HTML, CSS, 스크립트) 파싱 

· 클라이언트에서 다운로드 받은 코드를 파싱 → 객체 모델링 (object modeling)

  - HTML → DOM (Document Object Model)

  - CSS → CSSOM (CSS Object Model)

 

· 렌더 트리(Render Tree) 

  - 브라우저 화면(View port)에서 실제 표시되는 공간을 차지하는 노드(elemented node)로만 구성하는 단계

  ※ 노드 'display' 속성이 'none' 일 경우 표시되지 않으므로 (공간을 차지하지 않음) 렌더 트리에 포함되지 않음 

 

· 레이아웃(Layout) 

  - 브라우저 화면(View port)에 각 노드(elemented node)의 정확한 크기와 위치를 계산하여 배치하는 단계

 

· 페인트(Paint) 

  - 레이아웃(Layout) 단계에서 배치된 노드(elemented node)를 그리는 단계

  - 브라우저 화면(View port)에 출력 

※ HTML, CSS 코드 파싱 단계에서 파서(parser)가 스크립트 코드를 만나면 객체 모델링을 중단하고 스크립트 엔진을 실행하여 스크립트 코드를 실행 하기 때문에 스크립트 코드를 HTML, CSS 코드 끝단에 배치하는 것을 권장 
※ 스크립트를 통해 HTML 코드에서 변경(렌더 트리(Render Tree) 구성 노드의 변경)될 경우 리플로우(Reflow)가 발생 
※ 리플로우(Reflow) - 레이아웃(Layout)과 페인트(Paint)를 재수행
* 렌더 트리(Render Tree) → 리플로우(Reflow) → 렌더 트리(Render Tree) 재구성 → 레이아웃(Layout) → 페인트(Paint)