자바스크립트의 다중프로세스 아키텍처, 렌더러, DOM, 컴포지터

DOM

웹페이지는 일종의 document이다. 이 문서가 웹브라우저를 통해 그 내용이 화면에 나타나거나, 그저 html 소스 자체로 나타나기도 한다. 이 웹브라우저와 관련된 집합을 브라우저 객체모델(BOM : Browser Object Model) 이라고 부른다. 이 BOM을 이용하여 브라우저와 관련된 기능으 ㄹ구성하는데, DOM은 BOM의 여러종류 중 하나다.

BOM의 최상위 객체는 window라는 객체로, DOM은 window객체의 하위객체이기도 하다.

그렇다면 DOM은, Document Object Model으로, 문서 객체 모델이다.,같은 html 문서의 태그를 자바스크립트가 이용가능한 객체로 만들면!! 그것이 DOM이 되는 것이다! 풀어서 말해서 이렇지, 한마디로 웹 브라우저가 HTML코드를 인식하는 방식이자 document객체와 관련된 객체의 집합이다.

 

DOM의 구조

dom 의 트리 구조
tree형식의 자료구조로, root node 에서 시작하여 아래로 퍼저나가는 형태이다.

 

 

---

 

cpu, gpu, mem, 다중 프로세스 아키텍처

• CPU는 실행성능을 높이고 여러종류의 작업을 하나씩 순서대로 처리하며 대부분의 일을 처리한다
• GPU는 비교적 간단한 작업을 동시에 수행할 수 이쓰며 그래픽 작업 처리(빠른 렌더링, 상호작용)에 크게 관여한다.
• 프로세스 : OS가 애플리케이션 하나 당 하나의 프로세스공간을 메모리에 만들어준다. IPC를 사용하여 두 프로세스 간 정보를 공유하여 작업 프로세스가 진행하지 않을 때 애플리케이션의 다른 부분을 실행하는 프로세스를 중지하지 않고도 응답하지 않는 프로세스를 다시 시작할 수 있다.
  • Browser Process
  • GPU Process
  • Renderer Process
  • Plugin Process
  • 이러한 다중 프로세스 아키텍처를 통해 크롬의 한 탭이 응답하지 않아도 다른탭은 살아남았다!
• 스레드 : 그 프로세스 내부에서 실행된다.

 

렌더러

렌더러 프로세스

• 렌더러 프로세스는 웹 콘텐츠를 처리한다. Renderer Process의 main Thread가 브라우저로 전송되는 대부분의 코드를 담당하며 html, css, javascript를 웹페이지로 변환한다.
  그리고 worker thread가 일부 자바스크립트코드를 변환한다. 그리고 compositer thread, raster thread가 렌더링을 부드럽게 하기위한 역할을 한다.

DOM 구축

위에서 설명한 Renderer process의 main Thread는 html을 parsing 하여 DOM으로 변환하기 시작한다.
참고로, html문서는 xml문서와 다르게 오류가 존재하지 않는다. (Xml : 데이터 전송, html : 웹페이지 구현에 목적을 둔 코드)

하위 리소스(sub resource) 로딩

DOM을 구축하기위해 파싱하는동안 외부 리소스인 image, css, javascript를 만날때마다 메인 쓰레드가 하나하나 요청하면 너무 느리기 때문에, 속도를 위하여 preload scanner가 동시에 실행된다.
Html 문서에서  <img> 같은 태그를 만나면, 프리로드 스캐너가 바로 html파서가 생성한 토큰을 확인한후에 브라우저 프로세스의 네트워크 스레드에 request를 보내고 -> 리소스를 loading한다.

그 이후 css 스타일 계산을 하고, 페인트, 

flex박스를 구현하며 많이 만져보았던

레이아웃트리 또한 생성된다.

 

합성 composite

브라우저는 웹페이지의 정보들을 화면의 픽셀로 변환하는 작업인 rasterizing(래스터화)를 거쳐 비로소 웹페이지에 우리가 볼수있는 형태로 문서를 띄워준다.
합성은, 웹페이지의 각 부분을 layer별로 분리하여 -> rasterizing 하고 -> 컴포지터 스레드(composites thread) 에서 웹페이지로 합성하는 과정이다.
다시말해 웹페이지의 각 부분을 레이어로 분리하여 별도로 래스터화하고, 컴포지터 스레드라는 별도의 스레드에서 웹페이지로 합성한다! 그리고 스크롤하여 로드해야하는 레이어는 이미 래스터화는 되어있으므로, 새프레임을 합성하기만 하면 된다!

특히나 배경과 위의 텍스트나 오브젝트들..을 다른 레이어에 두고 싶은 경우(예를들어 배경이 움직이고 글씨는 그대로라거나..) 합성에서 별도의 layer로 분리하여 rasterizing -> composites thread 한다.

 

 

 

 

---

 

 

 

컴포지터가 사용자 입력을 받았을 때

브라우저 관점에서 입력 이벤트

1. Browser Process가 가장 먼저 사용자 제스처를 수신한다. 하지만 이때 (x,y)좌표에서 touchstart이벤트유형이벤트가 발생함! 만 알 수 있어서,
2. Renderer Process가 내부의 컨텐츠를 처리한다. 이 안에서 이벤트 대상을 찾고, 해당 대상과 연결된 event listner을 실행하여 이벤트를 적절히 처리한다.

-> 이때, 컴포지터(스레드)가 입력 이벤트를 받아 메인스레드로 보내는데 가장 첫번째업무로 hit test를 진행한다.

그렇다면 스크롤을 하여 새롭게 나타난 애니메이션을 화면주기(hz)에 맞춘다는등의 이벤트가 발생할 떄 마다 컴포지터 스레드가 메인스레드로 바로 전송을 한다고 했다. 그리고, 이벤트가 너무 많이 전송해야 할 경우 메인스레드로 이벤트 전송을 최소화한다.