[북털] 브라우저는 어떻게 렌더링될까?

우선, 렌더링이란 서버로부터 HTML 파일을 받아 브라우저에 뿌려주는 과정이다.

 

브라우저 렌더링 과정은 다음과 같다.

1. 브라우저는 HTML, CSS, 자바스크립트, 이미지, 폰트파일 등 렌더링에 필요한 리소스를 서버에 요청하고 응답을 받는다. (여기까지는 웹의 동작방식에서 확인했다.)
2. 브라우저의 렌더링 엔진은 서버로부터 응답받은 HTML과 CSS를 파싱하여 DOM과 CSSOM을 생성하고, 이 둘을 결합하여 렌더링 트리를 생성한다.
3. 브라우저의 자바스크립트 엔진은 서버로부터 응답받은 자바스크립트를 파싱하여 AST(Abstract Syntax Tree)를 생성하고 바이트 코드로 변환하여 실행한다. 만약 이때, 자바스크립트가 DOM API를 통해 DOM이나 CSSOM을 변경한다면, 변경된 DOM과 CSSOM은 다시 렌더트리로 결합된다.
4. 결합된 렌더트리를 기반으로 HTML요소의 레이아웃을 계산하고 브라우저에 HTML요소를 페인팅 한다.

 

-> 파싱이란?

문자열을 의미있는 토큰(token)으로 분해하고, 문법적 의미와 구조를 반영하여 트리형태의 자료구조인 파스 트리(parse tree)를 만드는 과정을 말한다.

 

 

 

 

 

 

참고하면 좋을 블로그!

https://devcecy.com/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EB%8A%94-%EC%96%B4%EB%96%BB%EA%B2%8C-%EB%A0%8C%EB%8D%94%EB%A7%81-%EB%90%A0%EA%B9%8C/

브라우저는 어떻게 렌더링 될까? - devCecy : 뎁쎄씨

https://velog.io/@ru_bryunak/%EB%A0%8C%EB%8D%94%EB%A7%81%EC%9D%B4%EB%9E%80

HTML 기초 - 3 (렌더링이란?)