브라우저렌더링과정.
- HTML을 파싱하면서 DOM트리를 만든다.
- CSS를 파싱하며 CSS트리(CSSOM)를 만든다.
- js를 실행한다.
단, HTML중간에 script태그가 있다면 파싱이 중단된다.
- 돔과 CSSOM을 조합해 랜더 트리를 구축하고, (보이지도 않고 공간을 차지하지도 않는 것은 렌더트리로 구축되지 않음)
- 뷰포트를 기반으로 랜더트리의 각 요소가 가지는 위치와 크기를 계산하고
- 이 위치와 크기를 기반으로 화면을 그린다.
React랜더링 과정
- 함수형 컴포넌트를 호출한다.
- 구현부를 실행하는데, props를 취득하고, hooks를 실행하고, 내부 변수와 함수를 생성한다.
- return 부분을 실행하게된다. 랜더링의 시작
- 랜더단계에서 가상 DOM을 생성하고 -> 이 가상돔과 실제 돔과의 차이를 비교하고, 수정사항을 반영한다.
-커밋단계에서 실제 DOM에 반영해 브라우저가 화면에 그리기 전 구조를 잡고 - 화면을 그리게된다.
