렌더링이란
HTML,CSS, 자바스크립트 등 개발자가 작성한 문서가 브라우저에서 출력되는 과정을 말한다.
브라우저 마다 다르지만, 브라우저는 렌더링을 수행하는 렌더링 엔진을 가지고 있다. 크롬은 블링크(Blink), 사파리는 웹킷(Webkit),파이어폭스는 게코(Gecko)라는 렌더링 엔진을 사용.
브라우저의 렌더링 과정
- 브라우저는 HTML, CSS, 자바스크립트, 이미지, 폰트파일 등 렌더링에 필요한 리소스를 서버에 요청하고 응답을 받는다.
- 브라우저의 렌더링 엔진은 서버로부터 응답받은 HTML과 CSS를 파싱하여 DOM과 CSSOM을 생성하고, 이 둘을 결합하여 렌더트리를 생성한다.
렌더트리 : 브라우저가 이 두가지를 병합하여 화면에 픽셀을 렌더링 하기 위한 마지막 단계. 화면에 보이는 모든 노드와 콘텐츠, 스타일 정보를 병합한 최종 출력
문서 객체 모델(DOM, Document Object Model) : XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스.
CSS Object Model : JavaScript에서 CSS를 조작할 수 있는 API 집합. HTML 대신 CSS가 대상인 DOM이라고 생각할 수 있으며, 사용자가 CSS 스타일을 동적으로 읽고 수정할 수 있는 방법.
이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공함.
- 브라우저의 자바스크립트 엔진은 서버로부터 응답받은 자바스크립트를 파싱하여 AST(Abstract Syntax Tree)를 생성하고 바이트 코드로 변환하여 실행한다. 만약 이때, 자바스크립트가 DOM API를 통해 DOM이나 CSSOM을 변경한다면, 변경된 DOM과 CSSOM은 다시 렌더트리로 결합된다.
결합된 렌더트리를 기반으로 HTML요소의 레이아웃을 계산하고 브라우저에 HTML요소를 페인팅 한다.
파싱(pasing) : 문자열을 의미있는 토큰(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/
https://medium.com/%EA%B0%9C%EB%B0%9C%EC%9E%90%EC%9D%98%ED%92%88%EA%B2%A9/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%9D%98-%EB%A0%8C%EB%8D%94%EB%A7%81-%EA%B3%BC%EC%A0%95-5c01c4158ce
https://developer.mozilla.org/ko/docs/Web/API/CSS_Object_Model
