브라우저에서는 Reflow와 Repaint 작업을 진행한다.
이 둘은 웹 애플리케이션의 성능을 떨어뜨리는 주된 요인인데, 한번 천천히 알아보자
DOM Tree
HTML을 전달 받은 브라우저는 렌더 엔진에서 이를 파싱하고 DOM 노드로 이루어진 트리인
DOM Tree를 만들어낸다.
Style Rules
이어서 외부 CSS 파일과 엘리먼트의 inline 스타일을 파싱해서 메모리 상 Style Rules을 생성한다.
Render Tree
DOM Tree와 Style Rules을 바탕으로 실제 브라우저 화면에 노출되는 노드에 대한 정보를 가진
Render Tree를 만들어준다.
이때 <head> 태그나 display 속성이 none인 태그들과 같이 보이지 않는 노드는 Render Tree를
생성할 때 제외하고 생성된다.
Layout ( Reflow )
Render Tree가 만들어지면 Layout, Reflow 작업을 실행한다.
각 노드들의 스크린 좌표가 주어지고 어디에 나타나야 하는지 위치가 주어진다.
정리하면 노드들이 화면의 어디에 어떤 크기로 배치되어야 하는지에 대한 정보를 계산해준다.
Painting ( Repaint )
Render Tree의 노드들을 거쳐가면서 스크린(브라우저의 화면)에 그려준다.
여기서 Layout ( Reflow )와 Painting ( Repaint )가 브라우저 레이아웃 렌더링 중 리소스를
가장 많이 잡아먹는 연산이다.
Repaint와 Reflow
Repaint
Repaint는 레이아웃에 영향을 주진 않지만, 가시성에는 영향을 주는 엘리먼트가 변경되면 발생한다.
가시성에 영향을 주는 스타일로는 opacity, background-color, visibility, outline
또는 Reflow가 발생하면 또다시 Repaint가 발생한다.
Reflow
Reflow는 모든 엘리먼트의 위치와 길이 등을 계산하는 것으로 HTML 문서의 일부 혹은 전체를
다시 렌더링한다.
단일 엘리먼트 하나를 변경하더라도 그것의 하위 엘리먼트나 상위 엘리먼트에 영향을 미칠 수 있다.
레이아웃에 영향을 미치는 작업을 하지 않는 선에서 변경을 한다면 Reflow는 발생하지 않겠지만
여전히 Repaint는 발생하게 된다.
Reflow가 발생하는 경우
▶ DOM 엘리먼트 추가, 제거 또는 변경
▶ CSS 스타일 추가, 제거 또는 변경
▷ CSS 스타일을 변경하거나 클래스를 추가하므로 엘리먼트의 길이가 변경되면 DOM 트리의
다른 노드에 영향을 줄 수 있다.
▶ 애니메이션과 트랜지션
▶ offsetWidth와 offsetHeight 속성 사용
▷ offsetWidth와 offsetHeight 속성을 읽어오면, 초기 Reflow가 트리거되어 수치 계산을 한다.
▶ 유저 행동
▷ hover 효과, 창 크기 조절, 글꼴 크기 변경 등 활성화를 하면 Reflow가 발생한다.
참고
https://wonism.github.io/reflow-repaint/
WONISM's Blog
WONISM's Blog
wonism.github.io
https://it-eldorado.tistory.com/87
[React] Virtual DOM이란? (+ 브라우저 렌더링 과정, Reflow, Repaint)
1. 브라우저 렌더링 과정 1-1. DOM 트리 생성 HTML 파서가 전달받은 HTML 파일에 담겨 있는 HTML 코드들을 파싱 하여 메모리 상에 DOM 객체들로 이뤄진 DOM 트리를 생성한다. DOM(Document Object Model)은 문서..
it-eldorado.tistory.com
[번역] 리액트에 대해서 그 누구도 제대로 설명하기 어려운 것 – 왜 Virtual DOM 인가? | VELOPERT.LOG
리액트를 지난 2년간 사용하면서도 막상 말끔하게 설명하라고 하면 어려웠던 주제, 원래 번역글은 잘 안쓰지만 글 자체가 구성이 잘 되어있어서 글을 번역해보았습니다. 원본: https://hashnode.com/p
velopert.com
'React > 이론' 카테고리의 다른 글
| [React] DOM vs Virtual DOM (0) | 2022.11.08 |
|---|---|
| [React] 렌더링 (0) | 2022.11.07 |
| [React] Custom Hook (1) | 2022.10.22 |
| [React] Redux (1) | 2022.10.14 |
| [React] Flux (1) | 2022.10.13 |
