브라우저 렌더링 원리

- 브라우저가 화면 요소를 렌더링 할 땐 크롬: 블링크(Blink), 사파리: 웹킷(Webkit), 파이어폭스: 게코(Gecko) 등과 같은 렌더링 엔진을 사용

- 렌더링 엔진이 HTML, CSS, Javascript로 렌더링할 때 CRP(Critical Rendering Path, 중요 렌더링 경로) 이라는 프로세스를 사용

 

렌더링의 단계

- HTML 파싱 > DOM(Document Object Model) 트리 구축

- CSS 파싱 > CSSOM(CSS Object Model) 트리 구축

- Javascript 실행 

    - ! HTML 중간에 스크립트가 있을 경우 HTML 파싱 중단 !

- DOM과 CSSOM을 조합하여 렌더트리 구축

- 뷰포트 기반으로 렌더트리의 각 노드가 가지는 정확한 위치와 크기를 계산 : Layout(Reflow) 단계

- 계산한 위치/크기 기반으로 화면을 그림 : Paint 단계