브라우저의 작동원리

1. 사용자가 주소표시줄에 URI를 검색하여 브라우저 엔진에 전달이 됩니다.

2. 브라우저 엔진은 먼저 자료저장소로 달려가 URI에 해당하는 자료를 찾습니다.
   (항상 웹서버에서 자료를 받아오게 되면 똑같은 자료를 계속 받아와야하는 불필요한 서버 통신이 이뤄지게 됩니다. 이러한 낭비를 방지하기위해 자료저장소에 자주 받아오는 데이터를 저장해두고 사용하기도합니다. (캐싱) 처음 받는 URI라면, 렌더링 엔진으로 넘겨줍니다.

3. 렌더링엔진은 네트워크쪽엔 HTTP 통신요청을 이후 받은 데이터를 갖고 파싱과 Js해석기에 JS데이터를 주고 파싱을받고난뒤 랜더트리를 형성하게됩니다.

4. 랜더트리가 형성되면 UI백엔드에서 브라우저에 그려주면서 유저에게 URI 데이터가 보이게 됩니다.

전반적인 큰 작동은 이런식으로 이뤄집니다.

그 중 좀 더 중점적으로 봐야할 부분은 랜더링 엔진 부분이다.

렌더링엔진

현재 주요 브라우저에서 사용되는 랜더링 엔진은 크게 애플의 webkit 구글의 크로미움 , 파이어폭스의 게코가 있다. webkit은 보안강화, 크로미움은 최적화와 다중처리 속도, 게코는 웹ui뿐아니라 앱인터페이스까지 어느 정도 지원하는 기능적 특징을 갖고있습니다.

랜더링 엔진은 브라우저 구조에 있어서 중추역할을 한다고 생각한다.

1. 돔트리 구축하기위한 HTML 파싱단계에선 HTML CSS, JS를 파싱하게되는데, content HTML문서를 파싱한후, content tree내부에서 태그(a, div)를 돔 노드로 변환하게되는데 여기서 돔노드는 document object model에 하나의 요소로 변환된다는 것입니다. 그다음은 css파일과함께 스타일 요소들을 파싱을해서 스타일 규칙을 만듭니다, 이러한 스타일 태그가 적용된 돔트리가 렌더트리가 구성됩니다.

2. 다음단계인 렌더트리 구축에서는 html과 css를 파싱해서 만들어진 렌더트리는 색상 또는 면적 등 시각적 속성을 갖는 부분들을 정해진 순서대로 렌더링을 하여 랜더트리를 구축하게되고,

3. 이후 배치 단계로 넘어가면서 브라우저 창에서 렌더트리가 어떻게 배치될지는 렌더트리의 구성요소인 노드에 위치정보가 담겨져있어서 그위치 정보에 맞게 배치가 됩니다.

4. 배치가 완료되면 백엔드 ui에서 각 노드들을 가로지르며 페인트 작업을 하게됩니다.

1단계와 2,3,4단계는 다르게 보면 병렬적으로 진행이됩니다
돔트리는 돔노드라는 자식요소로 구성되어있고, 마찬가지로 렌더트리도 렌더 오브젝트라는 자식요소로 구성되어 있습니다. 근데 돔트리가 다구축되고 그이후 랜더트리로 전환되는 것이 아니고 돔트리의 구성요소인 하나의 노드들, 각각의 노드들이 새로 생성 되자마자 랜더트리의 구성요소인 렌더 오브젝트로 전환됩니다. 바로바로 변환 되는 이 과정을 통해서 렌더트리가 바로바로 생성이 되는 것입니다.

그러면 사용자들은? 돔트리가 완전히 완성될때까지 흰화면 만보는게 아니라, 돔트리가 완성되는 중간중간에 렌더트리가 구축되어 지기 때문에 바로바로 렌더트리가 배치되고 그려지게 되는 것입니다. 따라서 사용자는 돔트리가 완전하게 구축되어질때까지 기다릴 필요없이 렌더트리가 조금씩 구축됨과 동시에 그려져서 브라우저에 조금씩 조금씩 컨텐츠들을 확인할 수 있게되는 것입니다.

참조 자료
(가장 쉬운 웹개발 with Boaz)
https://www.youtube.com/watch?v=oLC_QYPmtS0&list=PLpq56DBY9U2AZEPhHAbG7ZbfrXvqW1bX4&index=22

https://www.youtube.com/watch?v=EBe-OHkf9w8&list=PLpq56DBY9U2AZEPhHAbG7ZbfrXvqW1bX4&index=21

(네이버O2)

https://d2.naver.com/helloworld/59361