브라우저 렌더링 동작 과정
- 브라우저는 HTML, CSS, JS, 이미지, 폰트 등 리소스를 서버에 요청하고, 응답으로 받아온다.
- index.html을 받은 브라우저에서는 텍스트로 이루어진 이 파일을 파싱하면서 DOM트리를 만들어 나간다.
- html을 읽다 중간 link tag를 만나 CSS요청이 발생하면 요청과 응답을 거쳐 CSS를 파싱하여 CSSOM트리를 만든다.
- CSS 파싱이 종료되면 잠시 중단 되었던 html을 다시 읽고 DOM 트리를 완성시킨다.
- 완성된 DOM 트리와 CSSOM 트리를 합쳐 렌더트리를 만들게 된다.
- 브라우저 JS 엔진은 받아온 JS를 파싱해 AST를 생성하고, 바이트코드로 변환해 실행한다.
- 렌더트리를 기반으로 HTML 요소의 레이아웃(위치, 크기)을 계산한다.
- 화면에 HTML요소를 페인팅한다.
Parsing
HTML 파일을 해석해서 DOM(Document Object Model)을 만들고, CSS파일을 해석해서 CSSOM(CSS Object Model)을 만드는 것!
프로그래밍 언어로 작성된 파일을 실행시키기 위해 구문 분석(syntax analysis)을 하는 단계이다. 파일의 문자열들을 문법적 의미를 갖는 최소 단위인 토큰으로 분해하고, 이 토큰들을 문법적 의미와 구조에 따라 노드라는 요소로 만든다. 노드들은 상하관계를 반영해 트리를 형성하는데, 이 트리를 파스트리라고 한다.
DOM(Document Object Model) 이란?쉽게 말해서 HTML 태그를 자바스크립트가 이해할 수 있는 Object(객체)로 표현하는 것!
DOM트리 생성
HTML 코드를 파싱해서 뿅! 하고 바로 DOM이 나오면 얼마나 좋겠냐만은, 실제론 아래와 같은 복잡한 여러 절차를 거쳐서 DOM이 나오게 된다.
순서는 다음과 같다.
- 브라우저가 HTML의 원시 바이트를 읽어와 HTML에 정의된 인코딩 (ex: UTF-8)에 따라 개별 문자로 변환한다.
- 브라우저가 문자열을 (문자열 형태로 표현된 HTML문서) '토큰'단위로 분해한다. (문법적 의미를 갖는 코드의 최소 단위)
- 분석한 토큰을 바탕으로 노드를 만든다. → 노드를 통해 관계를 표현할 수 있게됨
- 노드를 바탕으로 DOM을 그린다.
Rendering 트리 생성
렌더 트리는 이름처럼 렌더링을 목적으로 만드는 트리이다.
렌더링은 브라우저가 이제 진짜로 사용자에게 보여주기 위한 화면을 그리는 과정이기 때문에, 보이지 않을 요소들은 이 트리에 포함하지 않는다. 예를들어, DOM에서는 meta태그같은 정보전달 목적의 태그나, CSSOM에서는 display:none으로 보이지 않게 해둔 요소 (정확히는 노드)들은 렌더 트리에서는 제외된다. (단, visibility: hidden은 레이아웃 트리에 포함되니 주의하기!)
Layout(Reflow)
렌더트리를 기반으로 HTML 요소의 레이아웃(위치, 크기)을 계산한다.
이 과정에서 모든 상대적인 측정값은 화면에서 절대적인 픽셀로 변환된다.
레이아웃은 요소의 기하학적인 속성들을 찾는 과정이다. 아까 만들었던 렌더트리가 여기서 사용되니 다시 떠올려야 한다. 렌더트리에는 요소들의 위치나 크기와 관련된 정보들이 들어있었다. 하지만 이 정보들은 각 요소들에 대한 정보일 뿐, 전체 화면에서 정확히 어디에 위치할 것인지에 대해서는 아직 알지 못한다. 이런 계산을 하는 단계가 레이아웃 단계이다. 브라우저는 각 요소들이 전체 화면에서 어디에, 어떤 크기로 배치되어야 할 지 파악하기 위해 렌더트리의 맨 윗부분부터 아래로 내려가며 계산을 진행한다. 모든 값들은 절대적인 단위인 px값으로 변환된다.
예를들어 우리가 div요소 하나만 띄우도록 코드를 작성했고, width를 50%로 지정해두었다면, 이 값은 전체 화면 크기(viewport)의 절반 크기로 계산되고, 절대적인 값인 px 단위로 변환되는 식이다.
Painting
화면에 HTML요소를 페인팅한다.
이제 위치에 대한 계산도 마쳤으니, 정말로 화면에 보여줄 차례
이다. 브라우저 화면은 픽셀이라고 하는 정말 작은 점들로 이루어져 있다. 각각 정보를 가진 픽셀들이 모여 하나의 이미지, 화면을 구성하는 것이다. 따라서 화면에 색상을 입히고, 어떤 요소를 보여주기 위해서는 이 픽셀에 대한 정보가 있어야 한다. 페인팅은 이러한 픽셀들을 채워나가는 과정이다. 따라서 이 과정을 마지막으로 우리는 단순한 텍스트에 불과했던 파일 내용들을 이미지화된 모습으로 브라우저 화면을 통해 볼 수 있게되는 것이다.
Reference
