브라우저 렌더링 원리

브라우저가 화면에 나타나는 요소를 렌더링 할 때, 웹킷(Webkit)이나 게코(Gecko) 등과 같은 렌더링엔진을 사용. 렌더링 엔진이 HTML, CSS, Javascript로 렌더링할 때 CRP라는 프로세스를 사용하며 다음 단계들로 이루어집니다.

1. HTML 파싱 후 DOM 트리 구축
2. css 파싱 후 CSSOM 트리 구축
3. Javascript를 실행
4. DOM과 CSSOM을 조합하여 렌더트리 구축
5. 뷰 포트 기반으로 렌더트리의 각 노드가 가지는 정확한 위치와 크기를 계산(Layout)
6. 계산한 위치 및 크기를 기반으로 화면에 표시(Paint)

참조: https://enjoydev.life/blog/frontend/2-browser-rendering

• 렌더링 엔진 : 브라우저는 레더링을 수행하기 위해 렌더링 엔진을 가지고 있음(ex: 크롬: Blink, 사파리: Webkit, 파이어 폭스: Gecko)
• CRP : qmfkdnwjrk HTML, CSS, JS를 화면에 픽셀로 변화하는 일련의 단계
• 파싱 : 하나의 프로그램을 런타임 환경이 실제로 싱행할 수 있는 내부 포맷으로 분석하고 변환하는 것을 의미
• DOM : 웹 페이지를 이루틑 태그들을 자바스크립트가 이용 할 수 있게끔 브라우저가 트리구조로 만든 객체모델
• CSSOM : CSS내용을 파싱하여 자료를 구조화 한것, DOM처럼 CSS 내용을 해석하고 노드를 만들어 트리 구조로 만든 것
• 렌더트리 : CSSOM과 DOM 트리의 결합으로 만들어짐, 웹 페이지에 나타낼 각 요소들의 위치를 계한사는데 사용되고 픽셀을 화면에 렌더링(화면에 요소들을 표현하는 프로세스)을 위해 존재
• Layout : 뷰포트 내에서 노드의 정확한 위치와 크기를 계산(경우에 따라 Reflow라고 하기도 함)
• Paint : 렌더링 트리의 각 노드를 화면의 실제 픽셀로 변환하는 마지막 단계