브라우저 렌더링 과정

렌더링 과정 순서:

1. HTML 파싱(Parsing)
   • 브라우저가 HTML 문서를 읽고 DOM트리 생성
2. CSS 파싱
   • CSS 파일을 읽고 파싱하여 CSSOM트리를 생성함.
3. 렌더 트리 생성(Render Tree Construction)
   • DOM 트리와 CSSOM 트리를 결합하여 렌더 트리를 만듬.
   • 렌더 트리에는 실제 화면에 렌더링되어야 할 노드만 포함됨.
4. 레이아웃(Layout)
   • 렌더 트리에 있는 노드의 정확한 위치와 크기를 계산하는 레이아웃 단계
5. 페인팅(Painting)
   • 실제로 렌더 트리의 각 노드를 화면에 그리는 작업

이후에 JavaScript가 DOM을 변경하면 렌더 트리를 다시 생성하고 레이아웃, 페인팅 과정을 반복하여 변경된 내용을 반영함.

따라서 DOM 조작이 많으면 렌더링 성능에 영향을 미치므로 JavaScript 최적화가 중요함.

요약:

브라우저는 HTML, CSS, JavaScript 파일을 불러온 후 렌더링 과정을 거쳐 화면에 웹페이지를 표시함.