브라우저 화면 출력 과정, 렌더링 과정(Critical Rendering Path)

주소창에 google.com을 치면 무슨 일이 일어나나요?

1. 주소창에 url을 입력하고 엔터를 치면, url의 도메인 이름이 DNS를 통해 IP 주소로 변환되고, 이 IP 주소를 갖는 서버에 요청이 전송된다.

   • 도메인 이름 : 인터넷의 실제 IP주소와 연결된, 기억하기 쉬운 이름. (ex : google.com)
     

   • DNS : 사람이 읽을 수 있는 도메인 이름(예: www.amazon.com )을 머신이 읽을 수 있는 IP 주소(예: 192.0.2.44)로 변환하는 시스템

2. 해당 URL 요청의 경로에 따른 html 파일이 보내진다.

   • URL은 이론적으로 웹에서 주어진 고유 리소스 주소이다. 세부 리소스 경로의 경우 요즘은 물리적 실체가 없는 웹 서버가 추상적으로 처리하지만, 예전에는 웹 서버내 실제 파일 위치를 나타내기도 했다.

3. 브라우저의 렌더링 엔진이 응답받은 HTML 문서를 파싱하여 브라우저가 이해할 수 있는 자료구조인 DOM을 생성한다.

   • 렌더링 엔진 : 브라우저에서 HTML 문서와 기타 자원의 웹 페이지를 사용자의 장치에 상호작용적인 시각 표현으로 변환시키는 역할을 하는 소프트웨어 구성 요소. 브라우저마다 서로 다른 렌더링 엔진을 탑재한다.(ex : 파이어폭스는 게코, 크롬/오페라는 블링크, 사파리는 웹키트 등)
   • DOM : 문서 객체 모델(Document Object Model). 문서 객체란 html이나 body같은 html문서의 태그들을 JavaScript가 이용할 수 있는 객체로 만든 것을 의미한다. 즉 DOM은 프로그래밍 언어가 웹 페이지에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는 HTML, XML 문서의 프로그래밍 인터페이스이다.
     DOM은 아래와 같이 HTML을 태그 트리 구조로 표현한다.

4. 렌더링 엔진이 DOM을 생성하다가 CSS를 로드하는 link 태그나 style 태그를 만나면 해당 CSS 파일을 서버에 요청한다.

5. 로드된 CSS 파일이나 style 태그 내의 CSS는 HTML과 동일한 파싱 과정을 거치며 해석하여 CSSOM을 생성한다.

   • CSSOM : CSS 객체 모델. JavaScript에서 CSS를 조작할 수 있는 API 집합이다. HTML 대신 CSS가 대상인 DOM이라고 보면 된다.

6. DOM과 CSSOM은 렌더링을 위해 렌더 트리(렌더링을 위한 트리 구조의 자료구조)로 결합된다. 렌더 트리는 브라우저 화면에 렌더링되는 노드만으로 구성된다.
   

7. CSS 파싱과 마찬가지로, 렌더링 엔진이 HTML을 파싱해 나가다가 자바스크립트 파일을 로드하거나 코드를 정의하는 script 태그를 만나면 DOM 생성을 일시 중단하고, 해당 자바스크립트 파일을 서버에 요청한다.

8. 렌더링 엔진은 로드한 자바스크립트 코드를 파싱하기 위해 자바스크립트 엔진에 제어권을 넘긴다.

   • JS 언어는 원래 브라우저에 사용하기 위해 개발되었으나 현재는 그 외의 장소에서도 사용되므로, 대부분의 브라우저에서 JS 엔진의 구현체는 브라우저 엔진(렌더링 엔진)과는 분리되고 있다. JS 엔진의 예로는 라이노, V8, 차크라 등이 있다.

9. 자바스크립트 엔진은 자바스크립트 코드를 파싱하여 AST(추상적 구문 트리)를 생성하고, 이를 기반으로 바이트 코드를 생성하여 실행한다.

   • AST : 프로그래밍 언어로 작성된 소스 코드의 추상 구문 구조의 트리. 추상적이라는 의미는 실제 구문에서 나타나는 모든 세세한 정보를 표현하지 않는다는 것을 나타낸다. 컴파일 단계 중 구문 분석 단계의 결과물이다.

10. 이후 자바스크립트 파싱과 실행이 종료되면 렌더링 엔진으로 다시 제어권이 넘어가고, HTML 파싱이 중단된 시점부터 DOM 생성을 재개한다.

11. 만약 자바스크립트 코드에 DOM이나 CSSOM을 변경하는 DOM API가 사용된 경우, DOM이나 CSSOM이 변경된다.

12. 변경된 DOM이나 CSSOM은 다시 렌더 트리로 결합되고, 변경된 렌더 트리를 기반으로 레이아웃과 페인트 과정을 거쳐 브라우저의 화면에 다시 렌더링한다. (리플로우, 리페인트)

    • 리플로우 : 레이아웃 계산을 다시 하는 것. 노드 추가/삭제, 요소 크기/위치 변경, 윈도우 리사이징 등 레이아웃에 영향을 주는 변경이 발생한 경우에 한하여 실행된다.
    • 리페인트 : 재결합된 렌더 트리를 기반으로 다시 페인트(레이어에 그리기)를 하는 것을 의미한다.
    • 리플로우가 발생하면 반드시 리페인트가 함께 발생하게 된다. 그러나 리페인트는 리플로우와 독립적으로 일어날 수 있다.

출처

https://developer.mozilla.org/ko/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL
https://support.google.com/a/answer/2573637?
https://ko.wikipedia.org/wiki/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80_%EC%97%94%EC%A7%84hl=kohttps://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction
https://developer.mozilla.org/ko/docs/Web/API/CSS_Object_Model
https://ko.wikipedia.org/wiki/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8_%EC%97%94%EC%A7%84
https://jake-seo-dev.tistory.com/124