브라우저 렌더링과정

브라우저 렌더링은 HTML, CSS, JavaScript 등의 웹 페이지 자원을 브라우저가 화면에 그리는 과정을 말한다.

1. 브라우저가 사용자가 요청한 주소를 방문, HTML 파일을 다운로드
2. 브라우저의 렌더링 엔진은 HTML 문서를 파싱하여 DOM 노드로 구성된 트리(DOM)를 생성한다.
   • css 파일 만날 시 css파일도 다운로드
   • HTML 태그를 노드로 변환하고, 노드 간의 계층 관계를 형성
   • DOM(Document Object Model)
     • 웹페이지에 대한 인터페이스. 브라우저가 웹페이지의 콘텐츠와 구조를 어떻게 보여줄지에 대한 정보
3. 브라우저의 렌더링 엔진이 CSS 파일을 파싱하여 CSS 노드로 구성된 트리(CSSOM) 생성
   • CSS 속성을 노드로 변환하고, 노드 간 계층 관계를 형성
4. DOM트리와 CSSOM을 결합하여 렌더 트리를 생성한다.
   • 이때, 실제 화면에 표시될 요소만을 선택하여 렌더 트리를 형성
5. 눈에 보이는 노드 대상으로 CSSOM 정보를 찾고, CSS 스타일을 노드에 적용
   • 적용과정
     • 레이아웃(layout, reflow): 각 노드가 브라우저 화면에 나타날 정확한 좌표를 계산하는 과정. 레이아웃 과정을 거친 후 반드시 페인팅 과정도 거침
     • 페인팅(painting): 레이아웃 단계를 거친 노드에 실제 유효한 모습을 그리는 과정(ex. 색)

자바스크립트가 DOM, CSSOM을 변경하는 경우 리렌더링한다.

• Repaint(Redraw)는 화면에 변화가 있을 때 화면을 다시 그리는 과정.
  • Repaint가 발생하는 경우는 화면이 변경되는 모든 경우.
• Reflow(Layout)는 뷰포트 내에서 렌더 트리의 노드의 정확한 위치와 크기를 계산하는 과정.
  • Reflow가 발생하는 경우는 화면의 구조가 바뀌었을 경우.

 

 

ref.

https://m.yes24.com/Goods/Detail/123161563

모던 리액트 Deep Dive - 예스24

https://velog.io/@zaman17/%EA%B8%B0%EC%88%A0%EB%A9%B4%EC%A0%91%EB%8C%80%EB%B9%84-%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EB%A0%8C%EB%8D%94%EB%A7%81-%EC%88%9C%EC%84%9C%EC%99%80-%EC%9B%90%EB%A6%AC

브라우저 렌더링 순서와 원리