의미
💡 렌더링(rendering) : HTML, CSS, JavaScript 등 개발자가 작성한 문서가 브라우저에서 출력되는 과정
렌더링 과정
사용자가 브라우저를 통해 웹 사이트에 접속
브라우저는 서버로부터 HTML, CSS, JS 등 웹사이트에 필요한 리소스를 다운
렌더링 엔진은
-전달받은 HTML 문서를 파싱해 DOM 트리 제작
-다운 받은 외부 CSS 파일 등 스타일 요소를 파싱해 CSSOM 트리 제작
-DOM 트리와 CSSOM 트리를 결합해 Render 트리 구축
레이아웃 과정을 통해 각 요소를 어디에 배치할 지 결정
레이아웃 과정이 끝나면 UI 백엔드에서 Render 트리 화면 출력(paint)
파싱
💡 프로그래밍 언어로 작성된 파일을 실행시키기 위해 구문 분석(syntax analysis)을 하는 단계
📗 파서
-파싱을 진행
-일종의 인터프리터나 컴파일러 구성 요소 가운데 하나
-HTML 파일의 코드를 문법적 의미를 갖는 최소 단위인 토큰(token)으로 분해
-토큰들을 문법적 의미와 구조에 따라 노드(node)라는 요소로 변경
-노드들은 상하 관계에 따라 하나의 트리를 형성(파스 트리(parse tree), 혹은 문법 트리(syntax tree))
📗 문서 파싱(document parsing)
브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환
렌더링 과정에서는 HTML 파일을 바탕으로 DOM 트리를 구축하고 CSS 파일로 CSSOM 트리를 만드는 것
📗 파싱 절차
HTML 문서를 받아들자마자 DOM 트리로 파싱
HTML ➡️ 토큰(시작 태그, 마침 태그, 속성 이름, 값도 포함) ➡️ 노드 ➡️ 트리 구조의 DOM
브라우저는 HTML 문서를 파싱하면서 CSS스타일을 만날 경우
텍스트를 CSS 스타일링 레이아웃과 페인팅에 사용하는 데이터 구조인 CSSOM 트리로 파싱
브라우저는 HTML 문서를 파싱하면서 script 태그를 만날 경우
렌더링을 차단하면서 HTML 파싱 또한 중단
script 파일을 다운 받아 파싱하고 실행시킨 뒤 다시 HTML 파일을 파싱
DOM Tree
💡 Document Object Model
💡 HTML문서의 요소들의 중첩 관계를 기반으로 노드들을 트리 구조로 구성
💡 브라우저는 JavaScript 언어만 알아듣기에 HTML의 태그나 속성들을 이해하지 못함.
💡 응답으로 받아온 HTML 문서는 텍스트로만 이뤄져 있어서 브라우저가 이해할 수 있는 형태인 객체로 바꿔준 것
CSSOM Tree
💡 CSS Object Model
💡 html 파일을 DOM 트리로 파싱하던 브라우저는 ,
Render Tree
💡 DOM 트리와 CSSOM 트리를 합치는 과정
💡 사용자에게 브라우저가 보여주고자 하는 화면을 그리는 과정
레이아웃
💡 렌더트리를 기반으로 HTML 요소의 레이아웃(위치, 크기 등)을 계산하여 브라우저 화면 어디에 배치할 지 결정하는 과정
💡 렌더 트리는 아직 텍스트로 구성된 객체. 브라우저의 렌더링 엔진이 각 요소들이 전체 화면에서 어떻게 배치될 지를 결정하고자 렌더링 트리를 읽어내려감
💡 절대적인 단위인 px 값으로 변환
페인팅
💡 브라우저는 화면 위에 레이아웃에서 결정된 대로 그림
💡 픽셀에 대한 정보들을 바탕으로 픽셀을 채워나가는 과정
💡 텍스트에 불과했던 HTML 파일의 내용들이 이미지화된 모습으로 브라우저 화면에 띄워지는 것
