목차

렌더링

<aside> 👉 HTML,CSS,자바스크립트로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력하는 것

</aside>

브라우저별 렌더링 엔진

• 파이어폭스 : 게코(Gecko)
• 사파리, 크롬: 웹킷(Webkit)

렌더링 과정

• 브라우저가 HTML,CSS,자바스크립트,이미지, 폰트 파일 등의 리소스를 서버에 요청한다. 기본적으로 브라우저가 html을 파싱할때 script 태그 등을 만나면 파싱을 일시 중지하고 스크립트 파일 등의 리소스 파일을 서버에 요청한다
• 서버로부터 응답을 받으면 브라우저의 렌더링 엔진이 HTML,CSS를 파싱하여 각각 DOM tree와 CSSOM tree를 생성하고 이를 결합해 렌더 트리를 만든다.
• 브라우저의 자바스크립트 엔진은 자바스크립트를 파싱하여 AST(Abstract Syntax Tree)를 만들어 바이트코드로 변환하여 실행한다. 이때 자바스크립트의 DOM API를 사용해서 DOM과 CSSOM을 변경할 수 있다. 변경된 DOM과 CSSOM은 다시 렌더 트리에 결합된다.
• 렌더 트리 기반으로 HTML 요소의 레이아웃을 계산하고, 브라우저 화면에 HTML 요소를 페인팅한다.

출처: https://d2.naver.com/helloworld/59361

파싱 Parsing

• 프로그램을 런타임 환경에서 동작할 수 있도록 내부 포맷으로 분석하고 변환하는 것 브라우저 렌더링에서의 파싱은 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것을 의미한다.
• 구조적으로 잘 짜여진 문서는 파서가 좀더 빠르게 파싱한다. 파서가 토큰화된 input을 문서에 파싱하고 이는 문서 트리를 빌드한다.
• CSS 스타일을 만나면 텍스트를 CSSOM(레이아웃과 페인팅을 위해 사용되는 자료구조)으로 파싱한다.
• 자바스크립트 파싱은 컴파일할때 혹은 파서가 작동할 때(예를 들면 메소드 호출) 일어난다.

Render-blocking

[이미지와 같은 논블로킹 리소스](https://blog.logrocket.com/9-tricks-eliminate-render-blocking-resources/#:~:text=Images%2C media files%2C and <,as non-render blocking resources.)를 만나면 HTML파서는 해당 리소스를 요청하고 계속해서 파싱한다. script 태그는 렌더링을 블로킹 하므로 HTML 파싱을 중단한다. (head 태그 내에 있는 요소들은 기본적으로 render blocking하는 리소스로 인식한다.)