Web Rendering Pipeline


1. 요청한 html 파일 받아오면 렌더링 시작 (request/response)
2. 받은 파일 로딩 (loading)
3. html 파싱해서 [DOM](https://texonom.com/dom-43e619acce9043cb86494ffd22f1fd7c) 생성  (scripting)
> link 태그를 만나 css를 파싱하여 [CSSOM](https://texonom.com/cssom-1ee43dfc70a64cc5b41518c92bbdfb82) 트리를 생성 (scripting)
4. DOM과 CSSOM으로 렌더트리를 생성 (rendering)
**불필요한 태그나 콘텐츠가 있는지 확인**


### Operation Part
Render Tree를 이용해 구조 형성 및 배치 계산을 하여 화면의 픽셀로 변환합니다
5. 각 노드의 위치 및 크기 계산 (layout)
6. 화면의 픽셀로 변환 (painting)
**paint가 자주 일어나지않도록 만드는 것이 중요**
**layout transition이 재발생될 경우는 최악의 성능**
> ![The pixel pipeline](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F5053ec5b-2a9d-4eef-966a-d7b964e32655%2FUntitled.png?table=block&id=d07e9b06-ef7c-49de-986b-aedfecbb4d0e&cache=v2)

> ![CSS properties and their initial step in the pixel pipeline](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F63e6abe6-c4bd-4206-8af9-5a96006d1363%2FUntitled.png?table=block&id=27c6560a-a0fb-4126-b3c3-1ad2d218b30e&cache=v2)









