브라우저란

웹 브라우저 작동 방식

브라우저 화면에 google.com을 입력하면 구글 페이지가 표시될 때까지에 어떤 동작을 하는지 알 수 있습니다.

브라우저는 기본적으로 선택한 웹 리소스를 서버에 요청하여 브라우저 창에 표시하는 것입니다. 리소스의 위치는 사용자가 URI를 사용하여 지정합니다. 

 

브라우저에서 HMTL 파일을 해석/표시하는 방법은 지정되어 있습니다. 웹 표준 기구(W3C) 에서 관리하고 있습니다. 보통 모든 방법을 지키진 않았고, 자체 확장 프로그램을 개발했는데 이는 지금 호환성의 문제들이 생긴 이유이기도 하다. 허나 브라우저의 공통 부분들 ( 뒤로가기 버튼, 주소표시줄, 북마크 기능 )은 공식 가이드문서에 있는 사항이 아니다.

 

그럼에도 동일한 부분들이 많은 이유는 수년간 사용했던 UX, UI가 고착화되고, 서로를 모방한 끝에 완성된 결과이기 때문입니다.

 

웹 브라우저의 상위 수준 구조

1. 사용자 인터페이스 : 주소 표시줄, 북마크, 뒤로가기 버튼 등, UI/UX를 포함
2. 브라우저 엔진 : UI ↔ 렌더링 엔진 작업을 마샬링
   1. 마샬링이란 : 메모리 상에 형상화된 객체 데이터를 적당한 다른 데이터 형태로 변환하는 과정 (=직렬화)
3. 렌더링 엔진 : 컨텐츠 표시, HTML인 경우 렌더링 엔진이 HTML , CSS 등을 파싱하여 화면에 표시
4. 네트워킹 : HTTP 요청 같은 네트워크 호출에 사용, 여러 플랫폼에 특화된 인터페이스가 존재하며 브라우저마다 독자적인 구조, 구현을 가질 수 있음
5. UI 백엔드 : OS 사용자 인터페이스 체계 아래에 구축
6. JS 인터프리터 : JS 코드를 해석하고 실행
7. 데이터 스토리지 : 쿠키 / 로컬 스토리지 / Index 등을 포함하여 웹 데이터를 저장-보관

기본적인 흐름

렌더링 엔진이 네트워크 계층에 있는 문서의 컨텐츠를 8KB 청크로 가져오기 시작한다. 

렌더링 엔진이 HTML 컨텐츠 파싱을 시작하면 DOM 노드로 요소를 변환한다. 엔진이 외부 CSS 파일과 요소들을 파싱한다. HTML의 시각적 지침과 함께 스타일 지정 정보를 만드는데 사용된다. 혹은 렌더링 트리가 만들어진다.

 

렌더링 트리가 생성된 후에는 레이아웃 프로세스를 거친다. 화면에 표시되어야 하는 위치의 좌표를 각 노드에 제공한다.

 

그 후의 단계는 페인팅 단계입니다. 렌더링 트리가 순화되고, 노드들이 UI 백엔드 레이어를 통해 페인팅됩니다.

 

해당 흐름은 렌더링 엔진의 HTML을 그리는데 사용되는 점진적인 단계이다. WebKit 같은 경우도 해당 구조와 뼈대는 같지만 세세한 부분이 조금씩 다르니 참고해야합니다.

 

HTML 파서

HTML 파서의 역할은 HTML 마크업을 파싱 트리로 파싱하는 것입니다. 출력 트리는 DOM 요소 및 속성 노드의 트리입니다. DOM은 Document Object Model의 약자입니다. 

 

DOM과 마크업은 일대일 관계를 가집니다.

HTML은 관용적인 언어이고, 파싱 프로세스에 재진입할 수 있다. 다른 언어들은 파싱 중에 소스가 변경되지 않지만, HTML 에서는 동적 코드가 추가 토큰을 추가하기 때문에  일반적인 하향식 또는 상향식 파서를 사용하여 파싱할 수 없다.