[Web] 브라우저 동작 방법

최지수·2022년 8월 8일
0

Web

목록 보기
1/6
post-thumbnail

주요 기능

사용자가 선택 자원을 서버에 요청하면 브라우저에 표시해요. 여기서 자원은 html, pdf, image 등 다양한 형태가 존재해요. 자원의 주소는 URI에 의해 정해져요.

💡 URI vs. URL
URI : 특정 리소스를 '식별'하는 Uniform Resource Identifier를 말해요. 웹 기술에서 사용하는 논리적 또는 물리적 리소스를 식별하는 고유한 문자열 시퀀스에요.
URL: 웹 주소, 컴퓨터 네트워크 상에서 리소스가 어디 있는지 알려주기 위한 규약이에요.

쉽게 예를 들자면,
URL \to http://jisus.com
URI \to http://jisus.com/users/1

또한 브라우저는 htmlcss 명세에 따라 html 파일을 해석해서 표시해요. 이 명세는 웹 표준화 기구인 W3CWorld Wide Web Consortium에서 정해져요.

예전 브라우저들은 일부만 명세에 따라 구현하고 나머진 독자적으로 구현했어요. 그래서 심각한 호환성 문제가 발생했었어요. 요즘은 대부분 모두 표준을 따라요.

브라우저 기본 구조

1. 사용자 인터페이스

주소 표시줄, 이전/다음 버튼, 북마크 등 사용자가 활용하는 서비스들이에요.

2. 브라우저 엔진

사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어해요.

3. 렌더링 엔진

요청한 콘텐츠 표시, html 요청 \to html, css 파싱 후 화면에 표시해요.

4. 통신

http 요청과 같은 네트워크 호출에 사용되요. 플랫폼의 독립적인 인터페이스로 구현되었어요.

5. UI 백엔드

플랫폼에서 명시하지 않은 일반적 인터페이스, 콤보 박스 창 같은 기본적 장치를 그려줘요.

6. 자바스크립트 해석기

자바스크립트 코드를 해석하고 실행해요.

7. 자료 저장소

쿠키 등 모든 종류의 자원을 하드 디스크에 저장하는 계층이에요.

렌더링 엔진

렌더링 엔진에 대해서 조금 더 알아봐요. 렌더링 엔진은 요청받은 내용을 브라우저 화면에 표시해요.

기본적으로 html, xml 문서랑 이미지 표시가 가능하고, 플러그인이나 브라우저 확장 기능으로 pdf 등 다양한 포맷도 표시가 가능해요.

엔진 종류

  1. 웹킷Webkit : 최초 리눅스에 동작하기 위한 오픈 소스 엔진이에요. 이후 애플이 맥과 윈도우에서 사파리 브라우저 지원을 위해 수정했어요. 크롬이나 사파리에서 사용되요.
  2. 게코Gecko : 파이어폭스에서 사용되는 엔진이에요.

동작 과정

  1. html 문서를 파싱해요.

  2. 콘텐츠 트리 내부에서 태그를 모두 DOM 노드로 변환해요.

  3. 외부 css 파일과 함께 포함된 스타일 요소를 파싱해요.
    여기서 이 스타일 정보와 html 표시 규칙은 렌더 트리라는 또 다른 트리를 생성해요.

  4. 생성된 렌더 트리는 정해진 순서대로 화면에 표시되요.
    생성 과정이 끝나고 배치가 진행되면서 노드가 화면의 정확한 위치에 표시되요.

  5. UI 백엔드에서 렌더 트리의 각 노드를 가로지으며 형상을 만드는 그리기 과정을 진행해요.
    이 과정은 점진적으로 진행되며, 보다 빠르게 사용자에게 서비스를 제공하기 위해 모든 html을 파싱할 때까지 기다리지 않고 배치와 그리기를 병행해요.

  6. 전송을 받고 기다리는 동시에 받은 내용을 먼저 화면에 표시해요.
    웹페이지에 접속할 때 한꺼번에 뜨지 않고 점점 화면에 뜨는 이유가 이것 때문이에요.

DOM(Document Object Model)

브라우저가 html 페이지를 트리 구조 형태로 인식해요. 웹 페이지 소스를 보면 <html>, <body> 같은 태그가 존재하죠. 이것을 자바스크립트가 활용할 수 있는 '객체'로 만들면 문서 객체(Document Object)가 되요. 모델Model은 말 그대로 모듈화로 만들었다거나 객체를 인식한다라고 해석하면 되요.

웹킷(Webkit) 동작 과정

크롬이랑 사파리에서 사용되는 렌더링 엔진의 동작 과정을 넣어봤어요. 위에 설명한 동작 과정을 이해하기 쉬울 것 같아 올려봅니다.

파싱 & DOM 트리 구축

여기서 파싱Parsing이란 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환한다는 의미에요.

💡 파싱 동작방식
1. 문서를 가지고 어휘 분석 및 분석 과정을 거쳐 파싱 트리를 구축해요.
2. 이 과정에서 구문 규칙과 일치하는지 비교하고 일치하는 노드만 파싱 트리에 추가해요.
(끝까지 규칙이 맞지 않는 부분은 문서가 유효하지 않고 구문 오류가 포함되요)
3. 파싱 트리 \to 기계 코드 문서로 변환해요.

보통 이런 파서 생성은 문법에 대한 규칙 부여 등 복잡하고 최적화하기가 어려워요. 그래서 자동으로 생성해주는 파서 생성기를 많이 사용해요. 가령, 태그를 실수로 빠뜨려도, 파서가 돌면서 오류를 수정해주는 거죠. 웹킷Webkit의 경우엔 flexbison을 통해 파싱해요.

결과적으로 이런 파싱 과정을 거쳐 서버로부터 받은 문서를 브라우저가 이해하고 쉽게 사용할 수 있는 DOM 트리 구조로 변환해줘요.

참고

Gyoogle님 블로그 - 브라우저 동작 방법

profile
#행복 #도전 #지속성

0개의 댓글