[Week1] DOM, 브라우저 렌더링

스터디 첫주차는 리액트가 아닌 바닐라 자바스크립트를 이용해 간단한 투두리스트를 만드는 과제였습니다.

배포되어 있는 제 바닐라 투두 페이지에 들어갔을 때 개발자도구의 네트워크 탭입니다.

 

IP..DNS.. 어쩌구 저쩌구 해서 웹사이트를 보여주기 위한 파일을 받아옵니다. 브라우저는 이런 자료들을 요청하기 위해서 HTTP (Hyper Text Transfer Protocol)라는 프로토콜을 사용합니다.

 

어머어머. HTML은 Hyper Text Markup Language의 약자랍니다. 그렇다면 브라우저는 HTTP를 통해 서버에서 html과 같은 것들을 전송받아 우리에게 보여주는거군요.

 

브라우저 렌더링

html 문서는 메모장으로도 만들 수 있는, 그냥 문서에 불과합니다. 어떻게 위와같이 이쁜 모습으로 화면에 렌더링되는걸까요.

 

브라우저의 렌더링은 이런 과정을 통해 이루어집니다. 렌더링엔진이 HTML파일의 각 태그 (<div></div> 같은 태그 말하는거에요)를 노드로 만들고, 각 노드들을 트리 구조로 연결합니다. 송프언 때 파싱트리 주구장창 그렸던 기억이 나는군요. 그걸 Dom Tree라고 부릅니다.

 

https://web.dev/critical-rendering-path-render-tree-construction/

CSS 파일도 비슷한 과정을 통해 CSSOM이라는 트리로 만들어지고, 두 트리를 합치면 렌더링을 위한 트리가 만들어지는거죠!! 마지막으로 렌더트리를 기반으로 모든 객체의 정확한 위치와 크기를 계산(flow)하고, 계산한대로 실제로 화면에 그리는 과정(paint)으로 끝나게 됩니다.

 

만약 투두리스트에 새 투두를 추가하거나 토글을 하게 되면 (DOM에 변화를 주면) 렌더트리도 다시 만들어야 하고, 계산도 다시, 페인팅도 다시 해야합니다. 이러한 reflow와 repaint 과정은 꽤 많은 리소스를 사용한다고 합니다.

 

만약에 DOM에서 많은 부분이 바뀌게 되면, reflow와 repaint도 여러번 일어나겠죠?? 이러한 연산을 줄여 웹페이지의 성능을 최적화할 수 있습니다. Reflow,repaint가 발생하는 css 속성 피하기, style 호출이 아닌 클래스를 이용해 스타일 변경하기.. 뭐 이런걸로 해볼 수 있다고 합니다.

 

virtual DOM

하지만 화면이 업데이트 될때마다 트리를 다시 생성하고 그리는게 아닌, 딱 변경된 부분만 찾아서 업데이트해줄 수 있다면 어떨까요?? 가상의 DOM을 하나 두고, 그걸 수정하는겁니다. 여러 동작에 대한 연산을 끝낸 후에, 실제 DOM에 적용시켜줍니다. 다만, 업데이트된 가상의 Dom과 실제 DOM을 비교해서 변화가 필요한 곳만 새로 렌더링합니다. 그렇다면 flow와 paint를 하는 횟수도 줄어들겠죠.

 

 

이러한 과정을 리액트를 이용하면 쉽고 빠르게 적용할 수 있습니다. 다음주부터는 리액트를 이용해서 간단한 프로젝트를 해봅시다. Vitual DOM을 사용한 어플리케이션 성능 최적화 이외에 어떤 장점이 있는지 알 수 있을거에요!!

 

참고자료

• 왜 Virtual DOM 인가?
• 브라우저는 어떻게 동작하는가?
• 주소창에 www.google.com을 입력했을 때 일어나는 과정