vanilla JS와 React의 차이점을 되새겨 보던 와중에,
다시 한 번 reflow, repaint의 개념을 되짚어보고 싶다.
Reflow란?
렌더링 엔진에서 요소를 배치하는 과정
Repaint란?
렌더 트리가 탐색되고 paint 메서드가 호출, UI 기반의 구성요소를 사용해서 그리는 과정
그렇다면 브라우저 렌더링이란 무엇일까?
- 브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시한다.
- 자원 : 보통 HTML문서지만, 다른 형태의 파일일 수도 있다.
브라우저는 HTML과 CSS명세에 따라 HTML파일을 해석하여 표시한다. ( 기준은 웹표준 기구 W3C에서 정함 )
따라서, 렌더링 엔진은 요청 받은 내용을 브라우저 화면에 표시하는것이다.
렌더링 엔진의 기본적인 동작은 아래와 같다.
😙
- DOM트리 구축을 위한 HTML파싱
- 렌더 트리 구축
- 렌더 트리 배치
- 렌더 트리 그리기
렌더링 엔진은 HTML문서를 파싱하고, 콘텐츠 트리 내부에서 태그를 DOM 노드로 변환시킨다.
(파싱이란? 웹페이지에서 원하는 데이터를 추출하여 가공하기 쉬운 상태로 바꾸는 것)
(ex> json,xml,html같은 원시 프로그램이 parser를 통해 object, XML Document, Array로 변환되는것)
렌더링 엔진은 또한 배치할 때, 좀 더 나은 사용자 경험을 위해서 빠르게 내용을 표시하는데, HTML이 모두 파싱될때까지 기다리는 것이 아니라, 다 파싱되지 않아도 배치와 그리기를 시작한다.
Reflow는 렌더링엔진에서 요소를 배치하는 과정을 의미하기에, Dom트리와 스타일 규칙을 합쳐서 렌더 트리를 만들고, reflow를 통해 각각 요소들의 레이아웃을 위치시킨다.
렌더 트리는 DOM요소를 기반으로 만들어지지만, 완전히 대응되는건 아니다.
DOM 트리 = 문서의 구조
렌더 트리 = 문서의 시각적(see) 구조
예를 들어서, css 스타일중에
display: none이 있다고 가정해보자.
이 속성은 DOM에는 존재한다.
그러나 시각적으로 존재하지 않기때문에 렌더 트리에는 할당되지 않는다.
Repaint는 렌더트리가 있어야하고, Reflow 작업이 이루어진 후에 작업이 이루어진다.
(Reflow 과정이 긑난 후에 재 생성된 렌더트리를 그리는 작업이 RePaint)
reflow와 repaint가 모두 발생할 때?
=> 보통 화면의 구조가 변경될때.
reflow가 발생하지 않고 repaint만 발생하는 경우는?
=> 레이아웃에 영향을 주지 않는 엘리먼트 개별의 변화일때.
