[JavaScript/ React] 브라우저의 동작원리

반응형

브라우저의 랜더링 과정

1. 브라우저의 랜더 엔진이 HTML을 파싱을 통해 DOM TREE를 생성한다.

2. CSS파일과 inline로 작성된 스타일을 파싱해서 CSS DOM을 구성한다.

CSS는 우선 순위가 존재한다. 속성 값 뒤에 !important 를 붙인 속성 HTML에서 style을 직접 지정한 속성 #id 로 지정한 속성 .클래스, :추상클래스 로 지정한 속성 태그이름 으로 지정한 속성 상위 객체에 의해 상속된 속성

3. 위에서 만들어진 DOM TREE와 CSS DOM을 결합하여 하나의 RENDER TREE가 만들어진다.

여기서 RENDER TREE는 문서의 시각적인 구조를 나타내고 있다.

4. 뷰 포트 내에서 생성된 RENDER TREE의 각 NODE가 어느 위치에 있어야 할지 결정이 된다. 위치를 결정하는 position이나 크기를 결정하는 size가 해당 단계에서 결정이된다.

5. 실제 화면에 그리게 된다.

 

1번부터 5번까지 설명을 했지만 단계로 구분하면 총 4가지 단계가 발생합니다.

1. DOM TREE 생성          => 위 과정의 1번 2. RENDER TREE 생성   => 위 과정의 2~3번 3. REFLOW(Layout)        => 위 과정의 4번 4. REPAINT(Paint)           => 위 과정의 5번

 

그럼 의문이 생게 됩니다.. 화면에 변화가 있을때는 위 과정을 반복할까? 

즉, 인터렉션에의해 DOM의 변화가 생기면 RENDER TREE가 재 생성되게 됩니다. 

변화가 있다는것은 요소에 대한 스타일이 변한것이고, 그렇기 때문에 위치및 크기등을 다시계산하여 화면에 그립니다.

 

우리가 흔히 댓글을 남긴다거나, 화면의 인터렉션이 발생하게되면 불필요하게 DOM을 재랜더링하게 됩니다.

-> 왜 불필요할까? 댓글을 남기면 다시 그리는게 맞지않나?

 

그렇지 않습니다. 

우리는 댓글을 남긴것 뿐 content내용은 변화된것이 없다. 즉, 우리가 한 행동을 극 일부가 바뀐것 뿐이지 화면전체가 바뀌는것이 아닙니다.

그러니 불필요한 과정이 반복되게 되는것이죠.

그래서 web에서는 DOM을 조작하는게 굉장히 소모적인 과정이었습니다.

 

여기까지가 기존 HTML과 CSS를 이용해 화면을 그려왔습니다.

이제 시대가 지나면서 SAP라는 개념이 나오게 탄생하게 되었습니다.

 

SAP가 등장하면서  DOM TREE가 자주 변경하게 되고, 그러므로 좀더 효율적으로 DOM의 관리가 필요하게 되었습니다.

 

그래서 나오는 개념이 Virtual DOM입니다.

Virtual DOM은 말그대로 가상의 DOM으로 기존 DOM을 복제해놓은 것입니다.

또한 HTML의 추상화버전으로 object와 같은 속성은 가지고있지만 api는 가지고 있지않습니다.

 

댓글을 입력하게 되었을때 전체 UI는 Virtual DOM에 랜더링이 되게 됩니다.

그리고 이전에 Virtual DOM이 가지고있는 내용과 방금 랜더링된 Virtual DOM의 내용을 비교하고, 바뀐 부분만 실제 DOM에 적용시킵니다.

 

이로써 효율적으로 DOM의 관리가 되었습니다.

 

방금 내용을 정리하자면, 화면에서 어떠한 내용이 변경되었을때 DOM이 아닌 가상의 DOM, Virtual DOM을 이용해 이전값과 비교후 변경사항이 있을때 DOM에 필요한 변화만 반영되어, 전체 real DOM을 바꾸지 않고 필요한 UI를 업데이트 할수있게 되었습니다.

 

그럼 Virtual DOM은 뭔데 이러한 일을 가능하게 할지 다음에 알아보도록 하겠습니다.