OMS
Web - 브라우저 동작 방법
주연배
2024. 10. 14. 23:07
브라우저란?
- 인터넷 사이트에 접속할 수 있는 도구
- 웹에서 정보를 보고 HTML 문서, 이미지 등의 콘텐츠를 표현해 주는 sw도구다. (웹 서버의 모든 정보를 보여줌)
- ex) 크롬, 사파리, 엣지
주요 기능
- 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시한다.
- *자원은 HTML 문서, PDF, IMG등 다양한 형태
- *자원의 주소는 url에 의해 정해진다.
브라우저는 HTML, CSS 명세에 따라 HTML 파일을 해석해서 표시한다.
* 명세 : 웹 표준화 기구인 W3C(World Wide Web Consortium)에서 정해짐
사용자 인터페이스
사용자에게 필요한 서비스들로 갖춰지게 된 것
- 홈 버튼
- 새로 고침 버튼
- 북마크
- 이전, 다음 버튼
- (url) 주소 표시 줄
브라우저 기본 구조
- 사용자 인터페이스
- 사용자가 활용하는 서비스들
- 주소 표시줄, 이전 / 다음 버튼 등
- 브라우저 엔진
- 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어한다.
- 렌더링 엔진
- 요청 받은 내용을 브라우저 화면에 표시
- 기본적으로 html, xml 문서와 이미지를 표시할 수 있음 (pdf 등 다른 유형도 표시 가능)
- 확장이 필요한 유형 -> 팝업으로 확장 여부 묻는다
- HTML 요청 -> HTML, CSS을 파싱해서 화면에 표시
- 통신
- HTTP 요청과 같은 네트워크 호출에 사용
- 플랫폼의 독립적인 인터페이스로 구성
- 자바스크립트 해석기
- JS 코드를 해석 및 실행
- UI 백엔드
- 플랫폼에서 명시하지 않은 일반적인 인터페이스
- 기본적인 장치를 그림(콤보 박스)
- 자료 저장소
- 쿠키와 같은 모든 종류의 자원을 하드 디스크에 저장하는 계층
렌더링
서버로부터 HTML 파일을 받아 브라우저에 뿌려주는 과정 ( with 렌더링 엔진 )
렌더링 엔진 종류
- 크롬, 사파리 : 웹킷 엔진 사용
- 웹킷(Webkit) : 최초 리눅스 플랫폼에 동작하기 위한 오픈소스 엔진
- 파이어폭스 : 게코 엔진 사용
1) html 문서 파싱 -> 트리 내부에서 태그를 모두 DOM노드로 변환 -> CSS 스타일 요소 파싱 ->
2) 스타일 정보와 html 표시 규칙은 랜터 트리를 생성함
3) 렌더 트리, 정해진 순서대로 화면에 표시(배치)
4) UI 백엔드에서 렌더 트리의 각 노드를 가로지으며 형상을 만드는 그리기 과정 진행
DOM
Document Object Model (문서 객체 모델 - 모듈화로 만들어짐 / 객체를 인식함)
<html>, <body>태그 -> js가 활용할 수 있는 객체 (문서 객체)
DOM은 웹 브라우저가 HTML페이지를 인식하는 방식 (트리구조)
웹킷 동작 구조
어태치먼트 : 웹킷이 렌더 트리를 생성하기 위해 DOM 노드와 스타일 정보를 연결하는 과정
파싱
브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것
- 파서 생성 : 복잡 so - > 자동으로 생성해주는 파서 생성기 많이 활용함
- ex) head태그 실수로 빠뜨려도, 파서가 돌면서 오류 수정
- 서버로 받은 문서 -> DOM 트리구조로 변환
오늘 함쌤과의 수업에서 웹 브라우저가 어떻게 동작하는지 설명을 들었는데, 이 부분이 내가 공부하고 있는 주제와도 겹쳐서 브라우저의 동작 원리와 관련 용어들을 다시 한 번 정리할 수 있는 시간을 가졌던 것 같다.
그동안 웹의 구조에 대해 잘 알지 못한 채 막연하게 개발을 해왔는데, 사용자에게 원하는 정보를 보여주기까지 많은 과정이 있다는 사실을 알게 되니 신기했다!