갑자기 생각날때 계속 적는 게시글

CRP (Critical Rendering Path)

html응답을 화면에 그리는 실행과정

1. DOM 트리 만들기
2. CSSOM 트리 만들기
3. javascript 실행
4. 렌더트리 만들기
5. 레이아웃 생성하기
6. 페인팅

DOM트리

DOM : 파싱된 HTML
DOM트리 : 파싱된 HTML 모음

1. DOM트리는 하나하나씩 생성됨
   • 빨라서 한번에 로딩되는 것처럼 보임
2. CSS, JS 로드시 페이지렌더링 차단가능

변환과정

1. Conversion
   • byte로 읽음
2. Tokenizing
   • HTML표준에 맞게 변환
3. Lexing
   • 속성과 규칙을 정의하는 객체로 변환
4. DOM Construction
   • DOM 트리로 연결된다.

CSSOM

• DOM을 스타일해준다.
• 트리구조(상속, 덮어쓰기가된다.)
• 변환과정은 DOM과 같다.

렌더트리

렌더트리란?

• DOM과 CSSOM을 합치면 렌더트리가된다.
• DOM이여도 눈에 보이지 않고 공간차지를 안하면 포함되지않는다.
  • ex) display:none, meta태그
  • display: block하면 다시 등록
  • visibiliity: hidden은 렌더트리에 등록된다.
• 렌더트리는 크롬에 요소선택으로 선택된다.
• 렌더트리에 없으면 리플로우, 페인트가 안일어난다.
  • 공간을 차지하지 않아서이다.

리플로우

리플로우란?

• 레이아웃 계산
  • DOM이나 레이아웃 크기변경
  • DOM트리 전체가 다시 계산됨
• 리플로우가 발생하면 리페인트는 무조건 발생

리페인트

포지션 변화, 색상변화등등 시각적인 변화

• 포지션변화과정 : 돔트리 -> 렌더트리 -> 리플로우 -> 리페인트
• 색상변경 : 돔트리 -> 렌더트리 -> 리페인트

참고자료 : https://gisele-dev.tistory.com/18
https://web.dev/critical-rendering-path-constructing-the-object-model/
https://dev.to/arikaturika/how-web-browsers-work-the-render-tree-part-7-with-illustrations-24h3