브라우저의 렌더링 과정

브라우저가 화면에 나타나는 요소를 렌더링 할 때 웹킷(Webkit)이나 게코(Gecko)등과 같은 렌더링 엔진을 사용한다.

렌더링 엔진이 HTML, CSS, Javascript로 렌더링할 때 CRP(Critical Rendering Path)라는 프로세스를 사용하며 다음단계들로 이루어 진다.

1. HTML 파싱 후 DOM 트리 구축

2. CSS 파싱 후 CSSOM 트리 구축

3. Javascript 실행 (HTML 중간에 스크립트가 있다면 HTML 파싱이 중단된다)

4. DOM과 CSSOM을 조합하여 렌더트리(Render Tree) 구축

   (display: none 속성과 같이 화면에 보이지도 않고 공간을 차지하지 않는 것은 렌덭리로 구축되지 않는다.
   visibilit: invisible 속성은 비슷하게 동작하지만 , 공간은 차지하고 요소가 보이지 않게만 하기 때문에 Render Tree에 포함된다.

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

6. 계산한 위치/ 크기를 기반으로 화면에 그림(Paint 단계)

출저 : https://velog.io/@st2702/%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
https://github.com/baeharam/Must-Know-About-Frontend/blob/main/Notes/frontend/browser-rendering.md