✅ 브라우저
- 웹 브라우저라고도하고, 웹 탐색기라고도 불린다.
- 웹 서버에서 양방향으로 통신하며 HTML 문서 및 그림, 동영상 등의 컨텐츠를 열람할 수 있게 해주는 GUI 기반의 소프트웨어 프로그램
- 페이지 다운로드 하기 위해 HTTP를 통해 송수신
✅ 웹(Web)
- 인터넷상에서 텍스트나 그림, 소리, 영상 등과 같은 멀티미디어 정보를 하이퍼텍스트(hypertext) 방식으로 연결해 제공
- HTML 언어를 사용하여 작성된 문서 형태로 제공이 되며, 이러한 문서들을 웹 페이지(Web Page)라고 함.
- 웹 페이지 중 서로 관련된 내용으로 작성된 웹 페이지들의 집합을 웹 사이트라고 부름
웹 브라우저 종류
- 크롬, 넷스케이프, 모자이크, 웨일 등등
브라우저의 특징과 웹의 동작 원리
- 브라우저는 사용자가 선택한 자원(Resource)를 서버에 요청(Request)하고, 서버의 응답(Response)을 브라우저에 띄우는 (Rendering) 방식으로 동작
- 자원은 대개 HTML 문서, 가끔 PDF나 멀티미디어 등 다른 형태도 존재
- 자원의 주소는 URI로 구성.
- 사용자가 웹 브라우저를 통해 찾고 싶은 웹페이지의 URL 주소 입력
- DNS 서버에서 사용자가 입력한 URL 주소 중 도메인 네임을 검색
- 해당 도메인 네임에 해당하는 IP 주소를 찾아 사용자가 입력한 URL 정보와 함께 전달
- 웹 페이지 URL 정보와 전달 받은 IP 주소는 HTTP 프로토콜을 사용, 해당 IP 컴퓨터로 전송, HTTP 프로토콜을 통해 웹 페이지 URL 정보로 변환
- 웹 서버는 HTTP 프로토콜을 통해 HTTP 응답 메시지를 생성하고, 이 메시지는 다시 TCP 프로토콜을 이용해 인터넷을 거쳐 사용자의 컴퓨터로 전송
- 사용자의 컴퓨터에 도착한 HTTP 응답 메시지는 HTTP 프로토콜을 사용해 웹 페이지 데이터로 변환이 되고, 변환된 데이터는 웹 브라우저 상에 출력되어 사용자가 볼 수 있게 된다.
✅ 브라우저의 구조
UI(사용자 인터페이스)
- 유저와 밀접하게 맞닿아있는 부분
- ex) 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등 관련 GUI
브라우저 엔진
- 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어
- HTML 문서와 기타 자원의 웹페이지를 사용자의 장치에 시각 표현으로 변환시키며, 문서 객체 모델(DOM) 자료 구조를 구현
- 레이아웃 엔진(Layout Engine)라고도 부르며, 렌더링 엔진(Rendering Engine)과 밀접한 연관이 있어 보통은 브라우저 엔진과 렌더링 엔진을 묶어 브라우저 엔진으로 부르나 여기서는 구분해서 표현
렌더링 엔진
- 요청한 콘텐츠를 화면에 출력하는 역할
- HTML, CSS 등을 파싱해 최종적으로 화면에 그려주며, 렌더링 엔진은 HTML 및 XML 문서와 이미지를 표시
- 브라우저 엔진과 밀접하게 결합되어 있으므로 보통은 하나의 엔진으로 보는 시각이 많다.
통신
- HTTP 요청과 같은 네트워크 호출에 사용
- 플랫폼의 독립적인 인터페이스, 각 플랫폼의 하부에서 실행
JS 해석기
- JavaScript는 코드를 위에서 아래로 한 줄씩 읽어 내려가는 방식으로 파싱(parsing)하는 언어
- 자바스크립트 엔진(JavaScript Engine)이라고도 부르는 자바스크립트 해석기는 여러 목적으로 사용이 되지만 대체로 웹 브라우저에서 이용이 되며, 브라우저마다 전용 엔진이 탑재
- 크롬의 V8의 경우 Heap Memory와 Call Stack으로 구성
힙 메모리
- 힙 메모리 내부에는 다양한 공간 존재, 복잡하기에 커 다란 하나의 공간으로 가정
- 힙은 동적 메모리 할당에 사용되는 자료구조
- 힙을 이용하여 V8은 객체 또는 동적 데이터 저장
- V8에서 가장 큰 공간 차지, 가비지 컬렉션 또한 발생
콜 스택
- JS는 기본적으로 싱글 스레드 기반의 언어
- 콜 스택이 하나이다.(한번에 하나의 작업만 사용가능)
- 프로그램 상 우리가 어디에 있는지 기록하는 자료 구조
- 함수 실행 함수는 콜 스택 가장 상단에 위치
- 스택 (LIFO) 구조, 실행이 끝난다면 상단에 있기에 제거 가능
- 크기에 제한이 있다. 한정된 메모리 공간 넘을 시 스택 오버플로(Stack Overflow) 발생!
UI 백엔드
- 렌더링 엔진이 분석한 Render Tree를 브라우저에 그리는 역할을 담당
- Select, Input 창과 같은 기본적인 위젯을 그려준다. 플랫폼에서 명시하지 않은 일반적인 인터페이스로, OS 사용자 인터페이스 체계를 사용한다.
✅ 브라우저 렌더링
- 브라우저 렌더링에서 렌더링(rendering)이란 HTML, CSS, JavaScript 등 개발자가 작성한 문서가 브라우저에서 출력되는 과정
브라우저 렌더링 과정
- 사용자가 브라우저를 통해 웹 사이트 접속
- 브라우저는 서버로 부터 HTML, CSS, JS 같은 리소스 다운
- 렌더링 엔진은 전달받은 HTML 문서를 파싱(parsing)해 DOM(Document Object Model, 문서 객체 모델) 트리를 만든다.
- 다운받은 외부 CSS 파일과 함께 포함된 스타일 요소를 파싱(parsing)해 CSSOM(CSS Object Model, CSS 객체 모델) 트리를 만듭니다.
- 만든 DOM 트리와 CSSOM 트리를 결합해 Render 트리 구축
- 레이아웃 과정을 통해 각 요소를 어디에 배치할지 결정
- 레이아웃 과정이 끝나면 UI 백엔드에서 Render 트리를 화면에 그리기 시작
파싱
- 파싱은 프로그래밍 언어로 작성된 파일을 실행시키기 위해 구문 분석
- 파싱을 파서(parser)가 진행하며, 일종의 인터프리터나 컴파일러 구성 요소 가운데 하나
- 파서는 HTML 파일의 코드를 문법적 의미를 갖는 최소 단위인 토큰(token)으로 한 번 분해하고, 이 토큰들을 문법적 의미와 구조에 따라 노드(node)라는 요소로 바꾼다.
- 노드들은 상하 관계에 따라 하나의 트리를 형성하는데 이를 파스 트리(parse tree), 혹은 문법 트리(syntax tree)라고 부릅니다.
문서 파싱
- 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것
- 렌더링 과정에서는 HTML 파일을 바탕으로 DOM 트리를 구축하고 및 CSS 파일로 CSSOM 트리를 만드는 것을 파싱
✅ 리블로우와 리페인트
- 사용자가 브라우저 화면을 늘리거나 줄이는 등 크기조절, 다른 사이트로 이동을 하는 등 다른 요소들을 불러와야하는 상황이 생기면 요소의 크기가 변화
- 화면에 나타나는 모습을 바꾸기 위해서는 모든 요소의 위치와 크기를 다시 계산하고, 다시 그려 보여주어야 한다.
- 웹 인터랙션으로 인해 앞서 보았던 렌더링 과정의 레이아웃을 반복해 수행하는 것을 리플로우, 페인트 과정을 반복해 수행하는 것을 리페인트라고 합니다.
CSS에서 레이아웃, 페인트를 발생시키는 속성들
- 리 플로우 시 리페인트는 필연적으로 일어나므로 가능하다면 리플로우가 발생하는 속성 보다 리페인트만 발생하는 속성 사용 권장
🤔 리플로우가 일어나는 대표적인 속성
- 위치, 너비와 관련된 속성이 다수
- treansform 속성 권장(좌표 값을 사용해 위치 이동하지만, 레이 아웃을 발생 시키지 않고 페인트만 다시 발생시키는 쪽으로 렌더링 발생)
| position | width | height | left | top | right |
|---|---|---|---|---|---|
| bottom | margin | padding | border | border-width | clear |
| display | float | font-family | font-size | font-weight | line-height |
| min-height | overflow | text-align | vertical-align |
리페인트가 일어나는 대표적인 속성
- 리페인트가 일어나지 않게 해주는 opacity라는 속성도 있습니다. visibility/display 보다 opacitiy를 사용하는 것이 성능 개선에 도움
| background | background-image | background-position | background-repeat | background-size | border-radius |
|---|---|---|---|---|---|
| border-style | box-shadow | color | line-style | outline | clear |
| display | float | font-family | font-size | font-weight | outline-color |
| visibility | ... |
매일매일