웹페이지가 렌더링되는 과정

https://cresumerjang.github.io/2019/06/24/critical-rendering-path/oldBrowserRenderFlow.png

 

✨웹 페이지 렌더링 과정

1. HTML 파싱 및 DOM 트리 생성:
   • 브라우저는 수신한 HTML 문서를 파싱하여 DOM(Document Object Model) 트리를 생성한다.
     (DOM 트리는 HTML 문서의 구조를 나타내는 트리 구조)
2. CSS 파싱 및 CSSOM 트리 생성:
   • 브라우저는 CSS 파일을 파싱하여 CSSOM(CSS Object Model) 트리를 생성한다.
     (CSSOM 트리는 CSS 규칙과 속성을 나타내는 트리 구조)
3. 렌더 트리 생성:
   

   

   https://blog.logrocket.com/wp-content/uploads/2018/09/image22.jpg

    
   • 브라우저는 DOM 트리와 CSSOM 트리를 결합하여 렌더 트리를 생성한다.
     (렌더 트리는 실제로 화면에 표시될 요소들의 구조)
4. 레이아웃 계산:
   • 브라우저는 렌더 트리를 기반으로 각 요소의 크기와 위치를 계산한다.
5. 페인팅:
   • 브라우저는 레이아웃 정보를 바탕으로 실제 화면에 요소들을 그린다.