Render Tree


![](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F4c42b0a6-393c-4268-bb22-80a93988be1f%2FUntitled.png?table=block&id=85282eb0-d216-40a0-a455-09fe3c63b832&cache=v2)
독립적인 개체인 [DOM](https://texonom.com/dom-43e619acce9043cb86494ffd22f1fd7c) 과 [CSSOM](https://texonom.com/cssom-1ee43dfc70a64cc5b41518c92bbdfb82) 을 합한 후 최종적으로 브라우저에 표기될 것들만 렌더 트리에 선별 되어 생성
(삭제 또는 추가([CSS pseudo elements](https://texonom.com/css-pseudo-elements-38040afa12ea4c45b82b0fc552f83429) )가 일어날수 있다)
> 렌더 트리는 표시되는 각 요소의 레이아웃을 계산하는 데 사용되고 픽셀을 화면에 렌더링하는 페인트 프로세스에 대한 입력으로 처리

> ![](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F420625cf-d192-42ee-8697-5431422026f2%2FUntitled.png?table=block&id=b773f651-847c-4c44-a9c9-51b4a113b8b1&cache=v2)



![](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fbe56aaf2-f9d2-45af-a359-28c6267f7d20%2FUntitled.png?table=block&id=3567fb79-e94c-49b9-916f-26aeedc9817d&cache=v2)
DOM 트리의 루트에서 시작해서 노드 각각을 읽으며 표시
[CRP](https://texonom.com/crp-b396ccb48f844fd29b7fbd2a31fd30e4) 


> [렌더 트리(Render Tree), CRP(Critical Rendering Path)](https://onlydev.tistory.com/9)





