브라우저 동작 원리를 알아보자

안녕하세요 오늘은 개발을 좀 더 깊이 있게 하기 위해서 브라우저의 동작 원리를 알아보려고 합니다 

많이 어렵고 내용이 많을 수도 있지만 알아봅시다 !!

---

브라우저의 구조

브라우저 구조

 

브라우저의 구조는 7가지로 나눌 수 있습니다

브라우저 동작 원리
사용자 인터 페이스(UI)	브라우저에서 볼 수 있는 거의 모든 것  (주소창, 뒤로가기, 앞으로 가기, 새로고침, 북마크, 환경설정)
브라우저 엔진	사용자 인터페이스와 렌더링 엔진 사이에서 중재자 역할을 합니다
렌더링 엔진	HTML와 CSS, Javascript를 파싱하고 그 결과물로 페이지를 그려내는 역할을 합니다
통신	HTTP 요청과 같은 네트워크 호출 시에 실행합니다
JS 엔진	JavaScript 코드를 해석하고 실행합니다
UI 백엔드	브라우저가 동작하고 있는 운영체제의 인터페이스를 UI들을 처리합니다
자료 저장소	브라우저 자체에서 하드디스크처럼 데이터를 로컬에 저장합니다

---

🚂 렌더링 엔진 어떻게 동작할까?

웹킷 엔진 동작 과정 (크롬, 사파리)

 

게코 엔진 동작 과정 (fire fox)

그림과 용어가 둘이 다르지만 동작과정은 기본적으로 동일하다고 합니다

1. HTML 파싱
2. 렌더 트리 구축
3. 렌더 트리 배치 
4. 렌더 트리 그리기

파싱

문서 구조를 읽을 수 있는 코드로 변환한다는 것입니다

HTML 요소들을 파스트리로 파싱하고 파스트리를 DOM 트리 노드로 파싱 합니다

CSS를 CSSOM 트리로 파싱 합니다

렌더 트리 구축

위 과정에서 구축한 DOM트리와 CSSOM 트리를 합쳐서 render tree를 만들어줍니다

위치와 크기는 가지고 있지 않습니다

색상 또는 면적 같은 시각적 속성과 페이지를 렌더링 하는 데 필요한 노드만 포함되며 정해진 순서대로 화면에 표시됨

렌더 트리 배치

DOM node가 배치 정보를 가지고 있습니다

화면에 정해진 순서대로 배치하는 layout 단계를 거칩니다 (reflow)

렌더링 트리 페인팅

node 배치가 끝나면 UI 백엔드에서 렌더 트리의 각 node를 순회합니다

페인팅 작업을 해면 작업을 끝납니다

---

마무리

이렇게 브라우저의 구조와 그중 중요하다고 생각한 렌더링 엔진에 대해서 더 깊게 이야기해보았는데 

브라우저에 대해서 더 깊게 이해할 수 있는 계기가 된 것 같습니다

원리에 관한 글은 처음 써보았는데 모르는 걸 찾고 또 찾는 과정에서 얻어가는 것도 꽤 많았고 

재미도 있었던 것 같습니다 

글을 읽어주셔서 감사합니다