[프로젝트] 웹 동작 과정

최근 next.js 프로젝트에서 웹페이지 성능을 올리기 위해 이것저것 하다 기초적인 지식이 탄탄하지 않다는 느낌을 받아 이 포스트를 작성

웹페이지가 렌더링 되는 과정

1. HTML parser가 HTML을 바탕으로 DOM tree를 그림
2. CSS parser가 CSS를 바탕으로 CSSOM을 그림
3. DOM에 CSSOM을 적용하여 Reder Tree를 그림
4. Render Tree를 바탕으로 Painting하여 실제 화면에 렌더링

DOM이란?

웹 브라우저와 Javascript가 HTML을 이해하기 쉽도록 트리 구조로 파싱하여 만든 구조화된 표현, 즉 객체입니다.

그저 텍스트에 불과한 HTML을 HTML파서가 DOM이라는 트리구조의 객체로 변환함

누구를 : HTML을
누가: HTML파서가
무엇으로 : DOM이라는 트리구조로

DOM: 브라우저와 Javascript가 이해할 수 있는 구조

CSSOM이란?

DOM에 CSS를 입힌것. DOM에 CSS가 적용된 객체 모델

ex> <p style="display: none;">How are you?</p>
→ DOM에는 포함, but CSSOM에는 포함X

웹을 동적으로 제어한다 = DOM을 제어한다
JS가 DOM을 동적으로 제어할 수 있게, DOM API 라는 것이 기본적으로 제공됨

JQuery 등장, 한계점

• JS라이브러리, DOM 조작 중심 개발 방식 → 애플리케이션의 상태관리 복잡하게 만듦→ 유지보수 어려움
• 모듈화 부족 → 코드 재사용성 떨어짐, 유지보수 어려움
• 성능 문제 → 동적인 DOM이 잦은 요즘에는 많은 연산량으로 성능 하락

Virtual DOM 등장

직접적인 DOM조작 → 성능저하 → Virtual DOM 등장

Virtual DOM: 실제 DOM을 추상화한 메모리 내 표현

• 조작이 편함 : 리모컨이 TV조작하는거마냥, 복잡한 내부구조 몰라도 원하는 결과를 얻음
• 성능 최적화 : Virtual DOM은 변경사항을 메모리에 빠르게 적용 → 실제 DOM에는 Diffing알고리즘을 사용하여 최소한의 변경사항으로 계산
• 자동화된 프로세스 : 리엑트 같은 라이브러리는 이 전체 과정을 자동화함. 개발자가 할 일이라고는 상태관리와 상태변화에 따라 UI를 어떻게 변경할지 선언 뿐임

React에서의 Virtual DOM

리엑트에서 값이 변할때 화면의 깜빡임 없이 빠르게 값이 변경되는건 모두 Virtual DOM 때문임
가상 돔을 실제 돔과 비교해 다른 부분만 빠르게 반영해 새로 화면에 렌더링해줌