레퍼런스
https://d2.naver.com/helloworld/59361 (Naver D2)
https://www.youtube.com/watch?v=oLC_QYPmtS0&ab_channel=%EA%B0%80%EC%9E%A5%EC%89%AC%EC%9A%B4%EB%A6%AC%EC%95%A1%ED%8A%B8withdavid ( 정말 설명이 잘 되어있는 유튜브 영상)
https://davidhwang.netlify.app/Developments/browser-rendering-process/ (위 유튜브 영상 제작자의 블로그)
브라우저 동작 원리
브라우저의 기본 구조
브라우저는 위 그림 과 같은 요소들로 브라우저는 이루어져 있다.
- 사용자 인터페이스
주소 표시줄이나, 뒤로가기,앞으로 가기 버튼, 즐겨찾기, 북마크 등등 사용자가 접근할 수 있는 브라우저의 기능을 의미한다.
- 브라우저 엔진
브라우저 엔진은 URI에 해당하는 데이터 (쿠키,캐싱)을 자료 저장소에서 가져와 렌더링 엔진에 전달한다.
- 렌더링 엔진
요청한 콘텐츠를 처리하는 엔진
URL을 서버에 요청하거나, 서버로 부터 받은 응답(HTML,CSS,JS)을 파싱하여 DOM Tree을 만드는 일을 수행한다.
- 자료 저장소
쿠키,캐시와 같이 브라우저에 사용되는 자료를 컴퓨터 하드웨어에 저장하는 영역
- 통신
렌더링 엔진의 명령에 따라 HTTP 요청을 수행한다.
- 자바스크립트 해석기
자바스크립트 코드를 해석하고 실행한다.
- UI 백엔드
render Tree을 browser에 그린다.
브라우저 동작의 흐름 (사용자 입장)
- 사용자가 주소창에 URI을 입력한다. (사용자 인터페이스)
- 브라우저 엔진은 해당하는 URI에 대한 데이터를 자료 저장소에서 찾은 후 렌더링 엔진에게 전달한다.
- 렌더링 엔진은 전달받은 자료 (HTML,CSS,Image)을 해석하고, 통신 레이어에 URI 요청을 전파하고, JS가 있을 경우 자바스크립트 해석기에 전파한다. DOM Tree가 완성되면 UI 백엔드에 DOM Tree을 전파한다.
- 통신 레이어는 응답을 받으면 HTML CSS을 렌더링 엔진에 전달한다.
- DOM Tree가 완성되면 각 Dom Tree의 Node들은 render Object로 변환된다.
- UI 백엔드는 render Object을 통해서 브라우저 화면을 완성시킨다.
webKit 엔진의 동작 흐름
HTML 파서의 결과로 DOM Tree가 생성된다.
CSS 파서의 결과로 CSSOM이 생성되고
그후 Dom Tree와 CSSOM을 Attachment 하여 render Object(render Tree의 노드)을 생성한다.
redner Object는 render Tree의 구성요소이고 현재 자신과 자식 요소을 어디에 배치 할 것인지에 대한 정보를 가지고 있다.
이후 구축한 render Tree 을 화면 왼쪽 위 부터 배치하기 시작한다.
그후 render object의 paint method를 호출하여 그리기 시작한다.
