브라우저 작동 원리/Reflow+Repaint/Virtual dom

브라우저 작동 원리/Reflow+Repaint/Virtual domFrontend/웹 관련 지식2022. 9. 13. 15:27@덕구공

Table of Contents

브라우저란?

네트워크상의 사이트나 정보(World Wide Web)에 엑세스하는 데 사용되는 컴퓨터 프로그램
- World Wide Web? 월드 와이드 웹(World Wide Web, WWW, W3)은 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 전 세계적인 정보 공간을 말한다.
클라이언트(사용자)와 웹 서버(서버)의 양방향 통신을 지원하고 주고받는 HTML 문서, 파일, 이미지 등을 연동하고 출력을 담당하는 소프트웨어이다.
즉, 컴퓨터에 설치되어 있는 하나의 프로그램으로, 이 프로그램을 다운받고 실행하게 된다면 주소창을 입력할 수 있는 도구가 되는 것이다.
- 주소창에 URL를 통해 서버의 자원을 요청하면 화면에 띄워줌
크롬, 사파리, 파이어폭스 등이 있다

브라우저 구성

사용자 인터페이스 : 주소 표시줄, 이전/다음 페이지 버튼, 북마크, 새로고침 버튼 등
브라우저 엔진 : 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어
렌더링 엔진 : 화면을 창에 보여줌
통신 : HTTP같은 프로토콜을 이용해서 서버에 요청을 보내는 등에 사용
UI 백엔드 : 얼럿 창, 셀렉트 박스, 콤보 박스 등을 OS 별로 그림
자바스크립트 해석기 : 자바스크립트를 해석하고 실행
자료 저장소 : Cookie, Local Storage, Session Storage 등 데이터 저장

렌더링 엔진

HTML, XML, 이미지 등 요청받은 내용을 브러우저 화면에 표시하는 엔진
사용자가 웹 서버에 요청해서 응답받은 HTML 문서를 HTML과 CSS로 파싱(Parsing)해서 화면을 구성한다.
- Parsing?
  어떤 페이지(문서, HTML)에서 내가 원하는 데이터를 특정 패턴이나 순서로 추출해 가공하는 것
  문서를 파싱한다는 것은 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것이다.
  파싱 결과는 보통 문서 구조를 나타내는 노드 트리인데 파싱 트리 또는 문법 트리 라고 부른다.

렌더링 엔진 종류

Trident: Internet Explorer (IE)
Blink: Chrome, opera → Webkit의 일종으로 구글이 Webkit을 대체하기 위해 개발한 엔진
Webkit: Safari
Gecko: Firefox

렌더링 엔진 동작

1. 파싱 단계

DOM 트리와 CSSOM 트리를 만든다.

DOM 트리 생성

브라우저가 서버로부터 HTML 문서를 전달 받아서 HTML 파서를 이용해서 각 요소들을 DOM Tree의 각 DOM 노드로 변환한다.
- HTML → DOM

CSSOM 트리 생성

CSS파일은 CSS파서에 의해 파싱 되어 CSSOM트리로 변환된다.
- CSS → CSSOM
CSSOM?
- CSS만의 문법, 규칙이 존재하고 그 규칙과 스타일 시트를 객체로 나타낸다.
- DOM이 웹 페이지를 객체로 나타내는 것과 유사하다

2. 렌더 트리 단계

DOM과 CSSOM을 묶어서 렌더 트리를 만든다.
DOM 트리가 구축되는 동안 브라우저는 DOM 트리를 기반으로 렌더 트리를 생성한다. 렌더 트리는 문서를 시각적인 구성 요소로 만들어주는 역할을 한다.
DOM 트리가 웹페이지 상에 나타날 내용을 구성한다면 렌더 트리는 시각적 요소, 어떻게 나타날지 그 스타일을 지정한다.
<head>, display:'none'와 같은 사용자가 볼 수 없는 DOM 요소는 렌더 트리에 추가되지 않는다.

3. 플로우, 레이아웃 단계

렌더 트리에서 각 노드가 어디에 어떻게 그려져야 하는 지 모양을 계산한다.
Gecko 렌더링 엔진에서는 플로우, webkit은 layout이라고 부른다.
- 플로우 작업을 다시 하는 것을 reflow라고 부른다!

4. 페인트, 드로우 단계

계산한대로 화면에 엘리먼트들을 배치한다. (페인팅한다고 해요!)
paint가 다시 일어나면 repaint!

Reflow

Layout(화면 구조)가 변경되었을 때, viewport 내에서 렌더 트리상 노드의 정확한 위치와 크기를 계산하는 과정!
element의 reflow 발생은 DOM에 있는 모든 하위와 상위요소의 reflow를 유발한다!
reflow가 일어나면 repaint가 필연적으로 일어나기 때문에 reflow가 발생하는 속성보다 repaint만 발생하는 속성을 사용하는 것이 좋다!

Reflow가 일어나는 경우 → repaint도 같이 일어남!

엘리먼트의 위치나 길이, 크기를 계산하는 과정
DOM을 추가, 제거, 업데이트하는 경우
DOM 요소의 위치나 크기 변경 → margin, padding, border, width, height 등!
display: none
scrollTop, scrollLeft와 같은 계산된 스타일 정보 요청 시
hover
JS를 이용한 DOM의 변화
input에 텍스트 입력

Repaint

Paint 과정을 다시 수행하는 것을 Repaint라고 한다. Reflow가 일어나면 각 노드가 어디에 어떻게 그려져야 하는지 계산이 되고 Repaint가 일어난다
하지만 Reflow 과정 없이 Repaint가 일어날 수 있다!

Repaint만 일어나는 경우 → 화면에 가시성이 변하지만 레이아웃에 영향을 미치지 않는 경우

레이아웃에 영향을 주지 않지만 눈에 보이는 요소 → background-color, color, visibility 등!

Repaint와 Reflow 최소화 시키는 방법

inline 스타일 자제
position을 absolute와 fixed 사용
css에서 JS 자제

Virtual DOM 과 Reflow, Repaint

Repaint와 Reflow 작업으로 인해 DOM 노드를 조작하는 작업은 동적인 UI를 구성하는 것에 적합하지 않다. DOM 노드 하나를 조작할 때마다 리플로우나 리페인트 작업이 수행되면서 브라우저의 성능 저하를 유발하기 때문이다. 이러한 문제점을 해결하기 위해 Virtual DOM이 등장하게 되었다. Virtual DOM은 실제 DOM을 모방하는 형태로 메모리 상에서만 존재하는 가상의 DOM을 의미한다. 실제로 화면에 렌더링 하는 과정을 거치지 않고 메모리 상에서만 그려지는 DOM이기 때문에 훨씬 오버헤드가 작다는 특징이 있다. 이러한 Virutal DOM을 활용하면 문서의 각 요소를 훨씬 더 효율적인 방식으로 동적 제어가 가능해진다. 이를 채택한 대표적인 JavaScript 라이브러리가 React이다.

React는 문서의 특정 부분이 리렌더링 되어야 할 때 그 부분에 해당하는 Virtual DOM 트리를 메모리에 새로 생성한다. 그리고 이전에 존재하던 Virtual DOM 트리와 O(n)의 휴리스틱 알고리즘으로 비교하여 차이점을 파악한다. 그리고 그 차이점들을 하나로 모아서 실제 DOM에게 전달해준다. 이로 인해 실제 DOM의 리렌더링 연산(리플로우, 리페인트)은 단 한 번만 일어나게 되어, 큰 성능의 이득을 얻게 된다(Batch Update). 물론 React는 JavaScript 라이브러리이기 때문에, React가 할 수 있는 건 바닐라 JavaScript로도 할 수 있다. 즉 바닐라 JavaScript로 실제 DOM을 조작할 때도 DOM fragment를 잘 활용하면 여러 차이점들을 하나로 모아서 딱 한 번의 리렌더링 연산만 수행하는 것이 가능하다. 그러나 이를 위해서는 매번 어떤 DOM 노드가 변경되어야 하고 어떤 DOM 노드는 변경될 필요가 없는지 등을 파악할 수 있어야 하고, 이는 복잡한 과정이기 때문에 실수가 발생할 가능성도 커진다. React의 Virtual DOM은 이러한 복잡한 과정들을 자동화 및 추상화해준다는 점에서 의미가 있다고 할 수 있다.

렌더링 엔진이 자바스크립트를 만나면?

위의 내용은 HTML 문서를 파싱하여 HTML과 CSS를 처리하는 과정을 나타냈고 이 과정이 웹 페이지에 화면을 나타내는 것은 충분하지만 Js를 만나면 어떻게 될까?
Javascript는 렌더링 엔진에서 처리되지 않는다!
Javascript는 자바스크립트 엔진이 처리하고 HTML 파서가 <script> 태그를 만난다면 Javascript 코드를 실행하기 위해 DOM 생성을 잠시 중지하고 자바스크립트 엔진에 권한을 넘긴다.
자바스크립트 엔진은 <script> 태그 내의 Javascript 코드나 src 속성에 정의된 Javascript 파일을 로드하고 파싱하여 실행한 후 실행이 완료되면 다시 HTML 파서가 DOM을 생성한다.

'Frontend > 웹 관련 지식' 카테고리의 다른 글

Semantic Web (시맨틱 웹) (0)	2022.09.16
SPA, MPA, MVC (0)	2022.09.16
SOP, CORS (0)	2022.09.13
Rest API / Rest-ful (0)	2022.05.30
JWT TOKEN🍗 (0)	2022.05.23

@덕구공 :: Duck9s'

주니어 개발자에욤

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!