브라우저 주소창에 velog.io/ybj1227을 입력하면 어떤 동작과정을 거쳐 화면이 보이게 될까?!

브라우저가 무엇인지부터 알아보자!!

❓브라우저란?

• 인터넷을 활용하기 위해서 사용하는 것이 브라우저이다. 즉, 사용자가 인터넷에 접속하기 위해 이용되는 프로그램 혹은 소프트웨어라고 보면 될 것 같다!!
• 양방향 통신을 지원하고 통신할 때 존재하는 html문서나 파일들과 연동하고 출력까지 담당하는 소프트웨어!

브라우저의 기본 구조

1. 사용자 인터페이스
   • 검색창, 새로고침, 뒤로가기.앞으로가기 버튼 등 사용자가 접근할 수 있는 영역
2. 브라우저 엔진
   • 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어한다.
3. 렌더링 엔진
   • 브라우저의 핵심, 요청한 콘텐츠를 화면에 표시한다. HTML과 CSS등을 해석해서 표시하는 엔진이다!
4. 통신
   • HTTP 요청 같은 네트워크 호출에 사용된다. 브라우저마다 독립적인 인터페이스이다!
5. UI 백엔드
   • 기본적인 위젯을 그린다. OS 사용자 인터페이스 체계를 사용한다.
6. 자바스크립트 해석기
   • 자바스크립트 코드를 해석하고 실행한다.
7. 자료 저장소
   • 자료를 저장하는 계층으로 Local Storage, Indexed DB, 쿠키 등 브라우저 메모리를 활용하여 저장하는 영역이다!

크롬은 대부분의 브라우저와 달리 각 탭마다 별도의 렌더링 엔진 인스턴스를 유지한다고 한다. 각 탭이 독립된 프로세스로 처리되어 메모리를 상대적으로 많이 잡아먹게 된다.

❓렌더링 엔진이란?

• 요청 받은 내용을 브라우저 화면에 표시하는 것이다. HTML 및 XML 문서와 이미지를 표시할 수 있다. 플러그인이나 브라우저 확장 기능을 이용해 PDF와 같은 다른 유형도 표시할 수 있다.

파이어폭스와 크롬, 사파리는 두 종류의 렌더링 엔진으로 제작되었다.
firefox : 모질라에서 직접 만든 Gecko엔진
safari, chrome : Webkit엔진

⁉️동작과정

• 통신으로부터 요청한 문서의 내용을 얻는 것으로 문서의 내용은 보통 8KB단위로 전송된다!

렌더링 엔진의 기본적인 동작 과정

1. DOM 트리 구축을 위한 HTML 파싱
   • 브라우저는 서버로부터 HTML 문서를 모두 전달받는다. 렌더링 엔진은 전달받은 HTML 문서를 파싱해서 DOM 트리를 구축한다. 그리고 외부 CSS 파일과 스타일 요소도 파싱한다.
2. 렌더 트리 구축
   • DOM(Document Object Model)트리와 스타일 정보를 합쳐서 렌더 트리를 만든다.
3. 렌더 트리 배치
   • 렌더 트리의 각 노드에 대해서 화면 상에서 어디에 배치할 지 결정한다.
4. 렌더 트리 그리기
   • UI 백엔드에서 렌더 트리를 그리게 되고, 우리가 보는 화면에 출력된다.

웹킷의 렌더링 엔진 동작 과정

모질라의 게코 렌더링 엔진 동작 과정

시각적으로 처리되는 렌더 트리를 "형상 트리(frame tree)",
각 요소를 형상(frame)이라는 용어를 사용
요소를 배치하는데 "리플로(reflow)" 라는 용어를 사용
"콘텐츠 싱크(content sink)"는 DOM 요소를 생성하는 공정
웹킷과 게코가 용어를 다르게 사용하지만 기본적인 동작과정은 동일하다는 것을 알 수 있다!

2탄.. 파싱과 DOM에 대해..

출처
https://flash-ctf.tistory.com/36
https://d2.naver.com/helloworld/59361
https://woong-jae.com/web/210821-how-does-browser-work