컴포넌트를 통한 프로젝트 구성, 단방향 데이터 바인딩?
왜 DOM 조작이 비효율적인데?
<자바스크립트 엔진은 계속해서 성능이 좋아지고 있는데, 정확히 어떤 부분 때문에 DOM 이 느려지는거야?> 자바스크립트 엔진이 계속해서 성능이 좋아지는거랑, DOM이랑 무슨 상관인데?
DOM 조작이 비효율적인 것이 아니라, 그 이후에 일어나는 일 때문에 비효율적인것이다.
브라우저의 워크플로우가 어떻게 이뤄지는지 살펴보고 DOM 조작 후 어떤일이 일어나는지 대해서 알아보자 브라우저의 워크플로우가 뭔데?
직접 DOM에 접근하는 것은 지양해야 한다
각자의 IDE에서 작성한 HTML은 DOM이 아니고, 작성 된 HTML 문서가 브라우저에 의해 해석되어 실제 문서를 나타내는 노드 트리가 DOM이다. 그리고 이러한 DOM은 자바스크립트로 해당 문서에 노드 추가, 삭제, 변경, 이벤트 처리, 수정 등을 가능케 하는 API를 제공한다.
정리
⇒ Virtual DOM은 실제 DOM 변화를 최소화 시켜주는 역할
Virtual DOM은 무엇인가요?
Virtual DOM이 무엇인지 파헤쳐보기 전에 우선 DOM에 대해 알아보자.
DOM이란, 문서 객체 모델(DOM, Document Object Model)로 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스이다.쉽게 말하자면 웹 페이지의 모든 요소를 Document 객체가 관리한다. 웹 페이지의 요소들을 관리하고 제어하기 위해 이에 가장 적합한 자료형태인 트리 자료구조로 이루어져 있다. 그렇기때문에 작성한 HTML 파일이 브라우저를 통해 처리될 수 있도록 DOM 노드로 이루어진 트리로 표현된다.
웹 브라우저가 HTML 문서를 읽어 들이면 위에 그림처럼 Document 객체로 시작하는 DOM 트리가 만들어집니다.
트리 자료구조에서는 트리를 구성하고 있는 객체 하나를 노드(Node)라고 부릅니다.
문서 노드
요소 노드
텍스트 노드
DOM에 변화생기면, 렌더트리를 재생성하는 과정에서 노드들의 스타일이 다시 계산되며, 레이아웃을 만들고 페인팅을 하는 과정이 다시 반복된다. 하지만 Virtual DOM을 사용한다면, 뷰에 변화가 있을 때 실제 DOM 에 적용되기 전 가상의 DOM 에 먼저 적용시키고 그 최종적인 결과를 실제 DOM 으로 전달한다. 이로인해 브라우저 내에서 발생하는 연산의 양을 줄이면서 성능이 개선된다. 정리하자면, Virtual DOM은 DOM fragment를 관리하는 과정을 수동으로 하나하나 작업 할 필요 없이, 자동화하고 추상화한 것이다.
브라우저 동작원리
DOM이 브라우저에 동작되기까지 과정을 간단하게 훑어보면...
HTML파일을 파싱 => DOM 트리 생성CSS파일 파싱=>CSSOM 생성DOM에 CSSOM의 확장된 스타일을 반영해 렌더트리 생성페이지 레이아웃이 반영된 레이아웃 트리 생성(reflow)페인팅(화면 출력)
화면의 DOM이 수정될 때마다 브라우저는 전체 DOM트리의 변경사항을 수정하며처음부터 위의 작업을 반복해야한다. (글자하나, 위치px 하나 모두 계산해야하므로 비용이 큰 작업이다.) 작은 변화에도 처음부터 동일한 작업을 반복하는 것이 비효율적이고 페이지의 규모가 커질 수록 렌더링의 부담이 커져 VirtualDOM이 이를 해결하게 되었다.
리액트가 이 가상돔을 적용하고 있는데,
직접 엘리먼트를 지정하고 상태값, 스타일 값 변경을 명시하지 않아도
상태가 변경되면 알아서 바뀐 엘리먼트만 변경되니 사용상의 편리한 장점과 렌더링이 작게 일어나 전체 화면의 깜빡거림(렌더링)이 일어나지 않는다 장점이 있다.
잠깐! '파싱'이란?
어떤 페이지(문서, html 등)에서 내가 원하는 데이터를 특정 패턴이나 순서로 추출해 가공하는 것을 말한다. 먼저 파서는 컴파일의 일부로서 원시 프로그램의 명령문이나 온라인 명령문, HTML 문서 등에서 MArkup Tag 등을 입력으로 받아들여서 구문을 해석할 수 있는 단위와 여러 부분으로 분할해주는 역할을 한다.
자료 모음
자료 모음
브라우저의 작동 방식에 대해 알고싶다면?
질문
자바스크립트는 언제 처리가 되는건가?
body 요소의 가장 아래에 자바스크립트를 위치시키는 것은 좋은 아이디어이다. 그 이유는 아래와 같다.
•
HTML 요소들이 스크립트 로딩 지연으로 인해 렌더링에 지장 받는 일이 발생하지 않아 페이지 로딩 시간이 단축된다.
•
DOM이 완성되지 않은 상태에서 자바스크립트가 DOM을 조작한다면 에러가 발생한다.