간단 메모 - 렌더 트리, 크리티컬 렌더링 패쓰

https://velog.io/@mu1616/Critical-Rendering-Path#:~:text=Critical%20Rendering%20Path%EB%8A%94%20%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80,%EA%B3%BC%EC%A0%95%20%EB%98%90%EB%8A%94%20%EC%88%9C%EC%84%9C%EB%A5%BC%20%EB%A7%90%ED%95%9C%EB%8B%A4.&text=%EC%9D%B4%20%EA%B3%BC%EC%A0%95%EC%9D%84%20%EC%9D%B4%ED%95%B4%ED%95%98%EA%B3%A0,%EB%A5%BC%20%EA%B0%9C%EC%84%A0%ED%95%A0%20%EC%88%98%20%EC%9E%88%EB%8B%A4.

Critical Rendering Path

나만 그런건진 모르겠는데, 뭘자꾸 알고나면 계속 까먹는다...

 

 

렌더트리란?

브라우저는 DOM이라는 것과 CSSOM을 가지는데 앞에거는 문서 구조그리는거고, 후자는 스타일을 관리하는거다. 브라우저는 이걸 두개를 합쳐가지구 렌더트리를 만들어서 화면에 그린다. 

 

DOM+CSSOM을해서 화면에 보여질거를 렌더트리에 포함시키는 것이다. 이때 레이아웃을 계산하는데 렌더트리가 쓰이고 이걸 통해서 화면에 페인트를 칠한다. 

 

이 렌더트리를 통해서 기기의 뷰포트내에 어디에 그릴지 계산하는 것을 layout단계라고 하고, 이를 reflow라고 부르기도 한다고 한다. 그리고 추후에 이걸로 화면을 직접 그리는게 paint(Repaint)단계이다. 

 

CRP(Critical Rendering Path)

주요 렌더링 경로란 브라우저가 HTML, CSS, JavaScript를 처리해서 화면에 렌더링한 픽셀로 만드는 과정을 뜻한단고 한다. 이걸 최적화 해야 초기로딩이 빠르다. 

 

 

 

CRP 최적화

https://jee-goo.tistory.com/entry/Web-CRPCritical-Rendering-Path%EC%99%80-%EC%B5%9C%EC%A0%81%ED%99%94

[Web] CRP(Critical Rendering Path)와 최적화

처음 렌더트리가 그려질때까지 걸리는 시간을 줄여야하는데, css는 헤더에서 호출하고, js파일은 마지막 부분에 로드해서 html 파싱이 블락이 되지 않도록 해야한다.