브라우저의 렌더링 원리

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

---

1. HTML를 파싱 후, DOM트리 구축
2. CSS를 파싱 후, CSSOM트리 구축
3. Javascript 실행 (HTML 중간에 스크립트 있으면 HTML 파싱 중단)
4. DOM과 CSSOM을 조합하여 렌더트리 구축( display:none 속성은 화면 X, 공간X 면  렌더트리 구축 X)
5. 뷰포인트 기반으로 렌더트리의 각 노드가 가지는 정확한 위치와 크기를 계산 (Layout 단계)
6. 계산한 위치/크기를 기반으로 화면에 그린다 (Paint 단계)

---

• 렌더링 엔진
  • 브라우저는 렌더링을 수행하는 렌더링 엔진이 있다. 크롬 : 블링크, 사파리 : 웹킷, 파이어폭스 : 게코 사용
• CRP
  • Critical Rendering Path : 중요 렌더링 경로
  • 브라우저가 HTML, CSS, Javascript를 화면에 픽셀로 변화하는 일련의 단계
  • DOM(Document Object Model), CSS Object Model (CSSOM), 렌더 트리, 레이아웃 포함
• 파싱
  • 하나의  프로그램을 런타임 환경이 실제로 실행할 수 있는 내부 포맷으로 분석하고 변환
  • 문서의 내용을 토큰으로 분석하고, 문법적 의미와 구조를 반영한 파스 트리를 생성하는 과정
• DOM
  • 웹 페이지를 이루는 태그들을 자바스크립트가 이용할 수 있게 끔 브라우저가 트리구조로 만든 객체 모델
  • 문서 객체 : HTML,CSS, Javascript와 같은 태그들을 Javascript가 이용할 수 있는 객체
  • DOM : HTML과 스크립팅 언어를 서로 이어주는 역할
• CSSOM 
  • CSS 내용을 파싱하여 자료 구조화
  • DOM 처럼 CSS의 내용을 해석하고 노드를 만들어 트리 구조로 만든 것
• 렌더트리
  • CSSOM과 DOM 트리의 결합
  • 웹페이지에 나타낼 각 요소들의 위치(레이아웃)을 계산하는데 사용되고 픽셀을 화면에 렌더링하는 페인트(Paint) 즉 화면에 요소들을 표현하는 프로세스를 위해 존재
• Layout (Reflow)
  • 뷰포트 내에서 노드의 정확한 위치와 크기 계산
• Paint
  • 노드와 해당 노드의 계산된 스타일 및 기하학적 형태에 대해 파악했으므로, 렌더링 트리의 각 노드를 화면의 실제 픽셀로 변환하는 마지막단계에 이러한 정보전달
  • 페인팅, 래스터화