브라우저 동작 순서

브라우저 동작 순서

동작 순서

• 데이터 요청

  1. 웹 브라우저 실행
  2. 사용자가 주소창에 URI 입력하여 웹 사이트에 접속
     (예를 들어, http://www.test.com )
  3. 브라우저는 DNS (Domain Name System) 를 통해 IP 주소를 얻고, 해당 IP 서버로 이동
  4. 3 way handshake를 통해 서버와 통신 연결 (아직, 데이터 요청 전)
  5. 서버와 연결되면 브라우저에서 서버에게 데이터를 요청 (HTTP Request)
  6. 서버로부터 해당 url 주소에 맞는 데이터를 받음 (HTTP Response)
  7. 화면에 데이터 출력

• 데이터 출력

  1. 서버로부터 전달 받은 데이터를 W3C 명세에 따라 해석 (Parsing)
  2. 브라우저의 Rendering Engine은 HTML을 파싱하여 DOM Tree 생성
  3. Rendering Engine이 파싱 중 <style> 태그를 만나면, HTML 파싱을 잠시 멈추고 CSS을 파싱하여 CSSOM Tree를 생성
     (만약 css 파일을 import 한 경우 서버에 파일을 요청하고 받은 후 파싱을 진행함)
  4. CSS 파싱을 마치면 Rendering Engine은 다시 HTML 파싱을 이어나감 (restart)
  5. 파싱 중 <script> 태그를 만나면 HTML 파싱을 멈추고, Rendering Engine은 JS Engine에게 제어 권한을 넘김
  6. JS Engine은 코드를 해석하여 AST(Abstract Syntax Tree, 추상 구문 트리)를 만들고 실행함
  7. 위 작업이 완료되면 Rendering Engine은 다시 HTML 파싱을 시작하고 완료함
  8. 브라우저는 DOM Tree와 CSSOM Tree를 합쳐 Render Tree를 생성
  9. Layout 작업 (Rendering Engine은 Render Tree에 있는 Node를 배치)
  10. Painting 작업 (UI Backend는 Render Tree에 Node들을 돌면서 화면에 UI 를 그림)
  11. Composition 작업 (Render Tree에 있는 Node를 순서대로 구성)

용어

• Rendering Engine (Renderer Process) : HTML, CSS, JS를 사용자가 인터렉션 할 수 있는 웹 페이지로 만듦
• DOM (Document Object Model) : 페이지에 대한 브라우저의 내부 표현일 뿐만 아니라 웹 개발자가 자바스크립트를 통해 상호 작용할 수 있는 데이터 구조 및 API
• Render Tree = DOM Tree + CSSOM Tree
• Construction : Render Tree를 생성하는 과정까지를 의미
• Operation : Layout ~ Composition 과정까지를 의미
  • Layout : Render Tree의 Node 들을 화면에서 올바른 위치에 표시하는 것을 의미
  • Composition : 노드들의 Layer를 순서대로 구성 (z-index가 낮은 요소를 먼저 놓음)

<script> 태그를 만나면 HTML 파싱을 멈추고 기다려야 하는 이유?
자바스크립트는 전체 DOM 구조를 바꾸는 document.write()와 같은 방법으로 문서의 구성을 바꿀 수 있기 때문

참고
https://www.youtube.com/watch?v=FQHNg9gCWpg