목차
실제 돔(Real DOM)
Browser 로딩 과정
![notion image](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252F6244742f-3af1-49d5-8e87-b106289528b5%252FUntitled.png%3Ftable%3Dblock%26id%3Df007e2e0-60a3-45d4-872a-7009d1592edb%26cache%3Dv2&w=3840&q=75)
출처 : IMQA Blog
브라우저는 파싱 → 스타일 → 레이아웃 → 페인트 → 합성 등의 과정을 거친다.
그 이후, JS 혹은 CSS를 통해 업데이트를 할 경우,
reflow
혹은 repaint
과정을 수행한다.1. parsing(파싱)
브라우저가 HTML을 읽는 과정
- HTML(DOM트리) 해석과정
![notion image](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252Fdabfb3bf-2703-4694-bbb3-ced1180344c3%252FUntitled.png%3Ftable%3Dblock%26id%3Df2a553eb-e525-4d2d-b07f-1033f16424c9%26cache%3Dv2&w=3840&q=75)
- CSSOM(CSS DOM트리) 해석과정
![notion image](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252Fa747ce4e-18d0-413f-aeea-ddb195be73b4%252FUntitled.png%3Ftable%3Dblock%26id%3D95852212-db21-44d4-81a8-03f14be283d7%26cache%3Dv2&w=3840&q=75)
2. Style(스타일)
![notion image](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252Feb998a1f-9b34-463a-a654-4903c4aafeb6%252FUntitled.png%3Ftable%3Dblock%26id%3D5050c57a-8193-48a7-9b1a-539be011afcc%26cache%3Dv2&w=3840&q=75)
- HTML , CSS를 해석하는 과정을 거친 이후, 스타일을 매칭시켜주는 과정을 통해
Render Tree를 구성한다.
- 렌더 트리엔 page를 렌더링하는 데 필요한 노드만 포함시킨다.
3. Layout(레이아웃)
![notion image](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252F70b7e1a9-578a-4a79-99cf-f62b43188a69%252FUntitled.png%3Ftable%3Dblock%26id%3D02e71135-0dd3-4a54-ad83-5a2d888f4622%26cache%3Dv2&w=3840&q=75)
- 노드의 위치와 크기를 계산한다
- %로 지정된 값은 px 단위로 측정&계산된다
- 경우에 따라
reflow
라고도 한다
4.paint(페인트)
![notion image](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252F7d5eef29-cd72-4d6e-bbd8-bff0b8aad124%252FUntitled.png%3Ftable%3Dblock%26id%3Da0a13b19-2df2-4d87-915c-35a1f4d276f3%26cache%3Dv2&w=3840&q=75)
- 3까지의 과정이 완료 된 이후, 브라우저가 ‘Paint Setup’을 발생한다.
- Render Tree를 화면의 px로 변환한다.
- 위치와 관계없는 css속성(배경색, 투명도, 위치조정, 그림자효과 등)을 적용한다.
5.Compositing(합성)
- 화면에 표시하기 위해 페이지에서 페인트된 부분을 합치는 과정이다
한마디로, 4의 위치와 관계없는 css속성들을 합성하는 과정.
성능
1. reflow , repaint
- 위에 적은 브라우저 로딩과정을 렌더링이라고 한다.
- 렌더링 과정은 상황마다 계속 반복하여 발생할 수 있다. (re-rendering)
- 브라우저는 성능적으로 렌더링 과정과 밀접한 관계가 있다.
- reflow(=Layout)은 다음과 같은 경우에 발생한다.
- element의 생성 및 삭제
- CSS의 높이 및 크기 수정 업데이트
- repaint(=paint)는 다음과 같은 경우에 발생한다.
- 위치와 관계없는 css 속성의 업데이트
2. 브라우저에게 치명적인 issue
- 브라우저는 반복된 랜더링에서, reflow가 순간적으로 많이 발생할 수록
성능적으로 속도저하라는 치명적인 이슈가 생긴다.
![notion image](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252F46a4d642-a2ad-4d03-beb4-a274f7ac7a23%252FUntitled.png%3Ftable%3Dblock%26id%3D8a7b81ee-eae5-4fe7-8e64-531ff8e42698%26cache%3Dv2&w=3840&q=75)
가상 돔(Virtual DOM)
Real DOM의 흐름을 보면, 업데이트(변경)가 있을 경우, Render Tree를 재생성하고, Layout을 만들고 paint를 하는 과정(=렌더링)이 전체적으로 발생하는데, 이러한 과정은 브라우저가 연산을 많이 해야한다는 말과 같으며 전체적으로 보면 프로세스를 비효율적으로 구성한단 말과 같다.
그래서 등장한 개념이 React의 가상돔(Virtual DOM)이다.
업데이트가 있을 때, 구 가상돔(Old Node)과 새 가상돔(New Node)을 비교하여 업데이트된 내용만 DOM에 적용하는 컨셉이며, 렌더링과정을 줄임으로써 UI 반응 속도를 높일 수 있다.
![notion image](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252F27cd277e-7fcc-4115-8c18-04244e87af5c%252FUntitled.png%3Ftable%3Dblock%26id%3Ddedb850b-aa43-4368-bd40-59779698aba4%26cache%3Dv2&w=3840&q=75)
![notion image](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252F1f425b4e-6dbb-4740-8d37-be4a9f18b540%252FUntitled.png%3Ftable%3Dblock%26id%3D34ef0482-c974-4a9c-8572-0e61ebe485e8%26cache%3Dv2&w=3840&q=75)
간추려 정리하자면,
- 잦은 DOM 조작은 비용이 많이 들고 속도가 느려진다.
- React는 가상돔(Virtual DOM)을 사용하여 성능(속도)를 향상시키는 방법을 채택했다.
- 가상돔(Virtual DOM)의 component는 지속적으로 관찰하여 상태 변경을 감지하려 시도한다.
- 가상돔(Virtual DOM) 이전, 이후 비교(diff)는 재조정 알고리즘을 사용하여 효율적으로 처리한다.
- 비교 결과 차이가 발생하면 실제돔(Real DOM)에 반영해 UI를 업데이트 한다.
Share article