updated 01/12/24
요즘 가장 큰 고민은
브라우저와 react 의 동작원리 자체에 대한 이해도가 부족하다는 것이다.
며칠 전 발생했던 이슈가 motivation 이 되어 제대로 공부를 해보기로하고 이렇게 포스팅을 해본다.
한 포스팅 한 포스팅 쌓아가다보면 지식이 쌓이지 않을지 기대해본다.
다음은 웹 브라우저 접속부터 - 페이지 내의 리액트 코드 동작까지의 과정을 정리한 포스팅이다.
1. DNS 이해하기
Network - DNS 이해하기 + 기본 동작원리
요즘 가장 큰 고민은 브라우저와 react 의 동작원리 자체에 대한 이해도가 부족하다는 것이다. 며칠 전 발생했던 이슈가 motivation 이 되어 제대로 공부를 해보기로하고 이렇게 포스팅을 해본다. 한
devbirdfeet.tistory.com
2. 브라우저 렌더링 이해하기
Network - 브라우저 렌더링 이해하기(Feat. Virtual Dom)
요즘 가장 큰 고민은 브라우저와 react 의 동작원리 자체에 대한 이해도가 부족하다는 것이다. 며칠 전 발생했던 이슈가 motivation 이 되어 제대로 공부를 해보기로하고 이렇게 포스팅을 해본다. 한
devbirdfeet.tistory.com
3. 가상돔(Virtual DOM) 이해하기
React- 가상돔(Virtual DOM) 이해하기
리액트 동작원리를 찾다보니 가상돔에 대한 이야기를 참 많이 들었다. DOM 에 대한 개념을 알고 있지만 가상돔은 생소한 개념이었다. 얘의 정체를 하나하나 공부해보자. 다음은 웹 브라우저 접
devbirdfeet.tistory.com
4. useState 동작원리 이해하기
React - useState 동작원리 이해하기
다음은 웹 브라우저 접속부터 - 페이지 내의 리액트 코드 동작까지의 과정을 순서대로 정리한 포스팅이다. 1. DNS 이해하기 Network - DNS 이해하기 + 기본 동작원리 요즘 가장 큰 고민은 브라우저와 r
devbirdfeet.tistory.com
Network - 브라우저 렌더링 이해하기
지난 포스팅에서는 웹페이지 접속을 위해 DNS 서버에서 IP 주소를 받아와 Client 에 전달해주는 부분까지를 공부하였다.
이번 포스팅에서는 웹페이지 접속 후에 어떤 과정을 통해 화면에 보여지는지에 대한 부분을 공부해볼 것이다.
브라우저 렌더링 기본동작
각 브라우저는 렌더링 엔진을 가지고 있다. 렌더링 엔진으로 파일들을 파싱(해석)하여 화면으로 그려낸다.
이 동작을 CRP(Critical Rendering Path) 라고도 한다. 그럼 렌더링 과정을 알아보자.
1. Client 가 → WEB Server 에게 받은 IP 주소로 요청하면,
WEB Server 는 → Client 에게 해당 웹페이지의 index.html 등의 파일들을 보내준다.
2. 브라우저는 서버가 보내준 HTML 파일 을 해석(Parsing)하여 DOM 트리 를 만든다.
(이 파일들은 단순한 텍스트이므로 연산과 관리가 유리하도록 Object Model로 만들게 된다)
3. 브라우저는 서버가 보내준 CSS 파일 을 해석(Parsing)하여 CSSOM 트리 도 만든다.
4. DOM 트리 + CSSOM 트리 를 결합해 렌더트리 를 만든다.
(렌더트리에는 스타일 정보가 들어있고, 실제 화면에 표현되는 노드들로만 구성된다.
예를 들어 display: none; 속성은 제외되고 visibility: invisible 은 포함된다)
5. 렌더트리로 각 노드의 위치와 크기를 계산한 레이아웃 을 만든다. 뷰포트(Viewport) 내에서 각 노드들의 위치와 크기를 계산한다.
(즉 , 브라우저 화면의 어떤위치에 어떤크기로 출력될지 계산 하는 단계이다)
6. Layout 계산이 완료되면 이제 요소들을 실제 화면을 그리는 페인트(Paint) 를 한다.
(요소들의 위치와 크기, 스타일 계산이 완료된 Render Tree 를 이용해 실제 픽셀 값을 적용한다.)
7. 페인트가 된 레이어들을 합쳐서 (Composite)하여 실제 유저가 보는 화면과 같이 내보낸다
CRP(Critical Rendering Path) 란
브라우저가 서버로부터 HTML 응답을 받아 화면을 그리기 위해 실행하는 과정이다. 바로 위에서 설명한 렌더링 과정에 해당한다
이를 최적화하게되면 렌더링 성능이 향상된다
DOM 이란
DOM 은 Document Object Model 약자로 웹페이지의 구성요소를 객체로 만든 개념이다
<html>이나 <body> 같은 html문서의 태그들을 JavaScript가 이용할 수 있는 객체(object)로 만들면 그것을 문서 객체라고 한다
웹페이지의 요소들을 (객체에서 어트리뷰트)들이 Node이고, 노드 중 최상위 노드가 document 객체이다
많은 수의 노드는 중요 렌더링 경로에서 다음의 이벤트를 더 오래 발생시킬 것입니다.
DOM 트리는 이러한 요소들을 트리로 구성한 것이다
CSSOM 이란
DOM 이 HTML 문서를 파싱하며 만들어지는 트리구조의 객체라면, CSS 도 마찬가지로 트리구조로 객체화 된다
브라우저는 DOM을 그리면서 <link> 도 함께 파싱하며 css 리소스를 가져온다
<link ref="stylesheet" href="style.css">
최적화를 위한 Virtual DOM
DOM은 새로운 요청이나 변경사항이 있을 때마다 페이지 전환시 리렌더링을 한다. (한글자만 수정해도 리렌더가 일어나는 것이다.)
하지만 매번 새롭게 구성하기 때문에, 양이 엄청 많으면 분명 퍼포먼스가 떨어질 것이다.
여기서 이제 Virtual DOM의 장점이 나오게 된다.
일반적으로 dom에 접근해서 속성이나 스타일을 수정하게 되면 매번 Reflow, Repaint가 발생하게 된다.
하지만 Virtual DOM은 Reflow, Repaint가 필요한 것들을 한번에 묶어서 dom에 전달한다.
따라서 처리되는 Reflow, Repaint의 규모가 커질 수는 있지만,
한번만 연산을 수행하게 되므로 반복적인 부분이 줄어들어 성능이 개선된다.
Dom 컨트롤을 통해 직접적으로 Dom 을 다루는 방법과 virtual DOM 중 어떤것이 더 성능이 좋을까?
Dom 컨트롤은 최하단에서 개별적으로 이루어지는 작업이라 가볍다.
(예를 들어 document.querySeletor('body').styles 어쩌고..)
Virtual Dom은 수정 전 후 차이를 비교해 렌더하는 기법이라 virutal dom 을 사용하면 이모든 과정이 일어난다.
그래서 virtual dom 이 무조건 더 성능이 좋다고는 말할 수 없다. 다만 상태 관리와 유지보수의 이점 때문에 virtual dom을 사용한다
ref : https://velog.io/@qortmdalsdl/React-%EB%8F%99%EC%9E%91-%EA%B5%AC%EC%A1%B0-Virtual-DOM
https://deftkang.tistory.com/104
https://boxfoxs.tistory.com/408
'OS & Network' 카테고리의 다른 글
| Network - CDN 이란 (Content Delivery Network) (0) | 2022.08.08 |
|---|---|
| 안드로이드 - ADB 로 웹모바일뷰 디버깅 하기(USB연결) (0) | 2022.06.17 |
| Network - DNS 이해하기 + 기본 동작원리 (0) | 2022.06.05 |
| Vim - 간단한 단축키 정리 (0) | 2022.06.03 |
| Mac - Karabiner 설치하고 맥 한영키 변경하기 (0) | 2022.05.14 |
댓글