일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- 웹팩
- APOLLO
- vue3
- 프론트엔드
- 타입스크립트
- pytorch
- 포인터
- 릿코드
- 알고리즘
- RxJS
- 프로세스
- alexnet
- 스택
- 이진탐색
- 연결 리스트
- C
- 자바스크립트
- Machine Learning
- 자료구조
- 프로그래머스
- 해시테이블
- 브라우저
- 큐
- cors
- RT scheduling
- 배열
- 코딩테스트
- 컨테이너
- GraphQL
- 연결리스트
- Today
- Total
목록렌더링 (2)
프린세스 다이어리
1. 브라우저의 구성 요소 브라우저도 OS상에서 실행되는 하나의 애플리케이션이다. 이 애플리케이션을 활용해 사용자는 원하는 사이트에 들어가 정보를 찾고 소통을 하는 등의 행동을 한다. 브라우저가 이렇게 데이터를 주고받고 화면에 띄워주는 역할을 수행할 수 있는 이유는 브라우저를 구성하는 요소들이 다음과 같이 구성되어 있기 때문이다. 사용자 인터페이스, 브라우저 엔진, 렌더링 엔진, 네트워크, 자바스크립트 인터프리터, UI백엔드, 스토리지로 이루어져 있다. (1) 사용자 인터페이스 브라우저를 켰을 때 바로 확인할 수 있는 주소표시줄, 뒤로 가기 버튼, 플러그인 버튼, 새로고침 버튼 등, 요청한 페이지를 보여주는 창 외에 사용자가 컨트롤할 수 있는 부분이다. (2) 브라우저 엔진 사용자가 주소창에 입력한 UR..
렌더링 엔진은 브라우저 엔진으로부터 사용자가 입력한 URI를 받아서, 해당하는 데이터를 렌더링 하는 역할을 한다. 브라우저마다 렌더링 엔진의 상세한 동작 과정이나 용어는 조금씩 차이가 있지만, 전반적인 원리는 기본적으로 동일하다. 크롬과 iOS의 경우, webkit이라는 렌더링 엔진을 사용한다. 렌더링 하는 과정은 다음과 같다. 객체 모델 생성 -> 렌더링 트리 구축 -> 렌더링 트리는 배치 -> 렌더링 트리 페인팅 1. 객체 모델(Object Model) 생성 브라우저가 페이지를 렌더링하려면, 먼저 HTML 문서를 파싱 하여 DOM트리를 생성하고, CSS 문서를 파싱 하여 CSSOM 트리를 생성해야 한다. DOM과 CSSOM은 서로 독립적인 데이터 객체이며, 나중에 이 두 가지가 병합하여 렌더링 된다...