브라우저(Browser)
브라우저는 HTML 문서 및 그림, 멀티미디어 등의 월드 와이드 웹을 기반으로 한 인터넷의 컨텐츠를 열람할 수 있게 해주는 GUI 기반의 소프트웨어 프로그램이다.
* 월드 와이드 웹(World Wide Web, www)이란 인터넷에 연결된 컴퓨터를 이용해 사람들과 정보를 공유할 수 있는
거미줄(Web)처럼 얼기설기 엮인 공간을 뜻하는 용어다.
HTTP 프로토콜을 기반으로 HTML로 작성된 하이퍼텍스트 페이지를 '웹브라우저'라는 특정한 프로그램으로
읽을 수 있게 하도록 구성되어 있다. - 나무위키
브라우저 동작 방식
이전에 배운 내용들 참조.
- 네트워크 기초 https://riverpigeon.tistory.com/94
- TCP / IP https://riverpigeon.tistory.com/153
브라우저 구조
⓵ User Interface(UI)
사용자 인터페이스로 사용자가 요청한 사이트 외에 탭, 주소창, 뒤로가기등 사용자와 상호작용하는 곳을 말한다.
⓶ Browser Engine
UI와 렌더링 엔진 사이의 동작을 제어한다. 브라우저 엔진의 주된 역할은 HTML 문서와 기타 자원의 웹페이지를 사용자의 장치에 시각 표현으로 변환시키며, 문서 객체 모델(DOM) 자료 구조를 구현한다.
⓷ Rendering Engine
사용자가 요청한 사이트를 그려주는 역할을 한다. 사이트를 구성하고 있는 html, css, xml 등을 파싱하고, 화면에 표시한다.
⓸ NetWorking
HTTP 요청과 같은 네트워크 호출에 사용된다.
⓹ Javascript Interpreter
자바스크립트 번역기. 자바스크립트 코드를 해석하고 실행한다. 자바스크립트 엔진이라고도 부른다.
⓺ UI Backend
렌더링 엔진이 분석한 Render Tree를 브라우저에 그리는 역할을 담당한다. Select, Input 창과 같은 기본적인 위젯을 그려준다.
⓻ Data Persistence
자료 저장소. Data Persistence는 쿠키, 캐시, 서비스워커, 로컬 스토리지 등 모든 데이터를 저장한다.
브라우저 렌더링 과정
⓵ DOM Tree 파싱
브라우저는 javascript 언어만 알아듣기 때문에 HTML 태그나 속성들을 브라우저가 알 수 있도록 객체형태로 바꿔주는 작업이 필요하다. DOM이란 Document Object Model의 약자로 HTML 문서의 요소들을 중첩관계를 기반으로 트리구조로 형성한 것을 의미한다.
⓶ CSSOM Tree 파싱
HTML 파일을 DOM Tree 로 파싱하던 중에 <link>태그나 <style>태그를 만나면 DOM Tree 파싱을 일시중단하고 해당 리소스 파일을 서버로 요청한다. 받은 파일을 HTML과 비슷하게 파싱하는데, 이렇게 만든 트리를 CSSOM 이라고 한다.
CSSOM을 완성하면 일시중단한 지점으로 돌아가 HTML 파싱을 마저 진행한다.
⓷ Render Tree
DOM 트리와 CSSOM 트리는 독립적인 트리이므로 두 트리를 합치는 과정이 필요하다. 이렇게 두 트리를 합쳐서 만들어진 트리를 Render Tree 라고 한다.
⓸ Layout
레이아웃은 Render Tree를 기반으로 HTML 요소의 레이아웃(위치, 크기 등)을 계산하여 브라우저 화면 어디에 배치할 지 결정하는 과정이다. 렌더링 엔진이 Render Tree 위에서 아래로 읽어서 어디에 어떻게 어떤크기로 배치해야 하는지 계산한다.
⓹ Paint
위에서 만들어진 Render Tree와 Layout을 바탕으로 화면에 그림을 그린다.
리플로우, 리페인트
사용자가 브라우저 화면 크기를 조정하거나, 다른사이트로 이동하는등 화면에 변화를 주는 행동을 하게 되면 당연히 화면이 변경된다. 이 과정에서 변경에 영향을 받는 모든 노드에 대해서 렌더 트리 생성과 레이아웃 과정을 다시 거치게 된다. 이러한 과정을 리플로우(Reflow)라고 한다.
또한 변경된 렌더 트리와 레이아웃을 다시 화면에 그려줘야 하는데 이과정을 리페인트(Repaint)라고 한다.
기존 요소에 변경 사항이 생겼다고 해서 항상 리플로우,리페인트가 일어나는 것은 아니고, 레이아웃에 영향이 미치지 않는 단순한 색상 변경 같은 변경사항은 리플로우 수행 없이 바로 리페인트만 수행한다. (단, 리플로우가 일어나면 반드시 리페인트가 일어난다.)
반응형 웹
반응형 웹 디자인이란 여러 장치의 다양한 특성에 대응하는 하나의 웹 문서 또는 사이트로써 브라우저의 크기(스크린의 크기, 디바이스의 종류)에 실시간으로 반응하여 크기에 따라 레이아웃이 변하는 웹 사이트를 의미한다.
반응형 웹의 특징
⓵ 하나의 소스코드로 모든 스크린에 최적화된 웹사이트를 구축할 수 있다.
⓶ 하나의 URL을 사용한다.
반응형 웹의 장점
⓵ 효율적인 유지보수 가능
하나의 콘텐츠에 하나의 HTML만 있기 때문에 하나의 소스를 수정하면 모든 기기의 화면이 수정되므로 효율적으로 유지보수를 할 수 있다.
⓶ 검색엔진 최적화(SEO) 유리
하나의 URL로 여러 기기의 화면을 보여줄 수 있기 때문에 검색 포털 등 광고를 통한 사용자 접속을 효율적으로 관리할 수 있다.
반응형 웹의 단점
⓵ 속도 저하
여러 크기의 스크린을 모두 커버하기 위해 소스코드의 양이 늘어나므로 속도 저하가 일어날 수 있다.
⓶ 웹브라우저 호환성 문제
여러 웹브라우저는 각각의 스펙 및 사양이 다르기 때문에 웹 브라우저에 따라 화면이 제대로 나오지 않을 수도 있다.
Reference
- 코드스테이츠
- 나무위키
'코드스테이츠' 카테고리의 다른 글
| 3/20 일일정리 번들링과 웹팩 (0) | 2023.03.20 |
|---|---|
| 3/17 일일정리 애니메이션, 캔버스 (0) | 2023.03.17 |
| 3/15 일일정리 트리/그래프 (0) | 2023.03.15 |
| 3/14 일일정리 스택/큐 (0) | 2023.03.14 |
| Section3 회고 (0) | 2023.03.13 |
댓글