브라우저 렌더링 과정과 성능

🙋🏻‍♀️브라우저 렌더링 과정을 같이 공부해 보겠습니다

• 홈페이지가 사용자에게 보이는 순서가 무엇인가요?
• 브라우저 렌더링 과정은 무엇인가요? 출처

대부분의 브라우저는 렌더링을 수행하는 렌더링 엔진이 있다.

구글이나 파이어폭스 사파리와 같은 브라우저에서 동작하는 각각의 렌더링 엔진들은 알고리즘이나 방식에 차이가 있다.

따라서 브라우저를 테스트하고 성능체크를 해야 한다.

렌더링 과정

1. 사용자가 검색을 하면 브라우저가 서버로부터 HTML, CSS를 다운로드
2. 다운로드된 파일들 변환(DOM Tree, CSSOM Tree)
3. 완성된 트리를 가지고 자기자신만의 렌더 트리를 생성
4. (모든 요소는 다 화면에 표기??)NO, display:none; 속성은 렌더 트리에서 제외됨
5. 레이아웃을 만들어 냄
6. 페인팅

렌더링 최적화 | Reflow, Repaint 줄이기

페인팅 과정이 끝났다고 해서 끝난건 아니다. 어떠한 액션이나 이벤트로 인해 레이아웃이 변하면 그에 영향을 받는 노드들은 모두 다시 레이아웃 과정을 수행한다. 이것을 Reflow 라고 한다.

Reflow가 일어나는 경우는 다음과 같다.

• 레이아웃과 관련된 모든 것
• 페이지 최초 렌더링
• 윈도우 리사이징(Viewport 크기 변경시)
• 노드 추가 또는 제거
• 요소의 위치, 크기 변경
• 폰트 변경과 이미지 크기 변경

Reflow, Repaint를 줄이고 성능을 개선하는 방법

1. 불필요하게 Render Tree에 포함되지 않게 만들기
2. visibility: invisible보다 diplay: none
3. 프레임 줄이기:

(0.1초에 1px씩 이동하는 요소보다 3px씩 이동하는 요소중에서 어떤 것이 프레임이 낮을까)

React의 Virtual DOM이라는 컨셉이 자리잡은 이유

1. 버추어돔은 기본적으로 가상메모리가 탑재되어 있는데 이것이 상태가 변할 수 있는 것들을 한방에 묶어서 돔에 전달
2. Reflow나 Repaint같이 전달된 된 것이 많긴 하지만 그 전과 비교해서 실직적으로 바뀐것만 업데이트함
3. 순수 JS로도 알고리즘 구현이 가능했지만, 더 쉬운게 리액트