Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
Tags
- vue3
- 큐
- 코딩테스트
- 연결리스트
- 프로그래머스
- cors
- 배열
- 자바스크립트
- GraphQL
- 타입스크립트
- 알고리즘
- pytorch
- 브라우저
- RxJS
- 자료구조
- 릿코드
- APOLLO
- 해시테이블
- alexnet
- RT scheduling
- Machine Learning
- 이진탐색
- 프로세스
- 컨테이너
- 스택
- 포인터
- C
- 웹팩
- 프론트엔드
- 연결 리스트
Archives
- Today
- Total
목록CSSOM (1)
프린세스 다이어리
브라우저 렌더링 엔진의 역할과, 렌더링 트리를 만들어서 그리는 과정
렌더링 엔진은 브라우저 엔진으로부터 사용자가 입력한 URI를 받아서, 해당하는 데이터를 렌더링 하는 역할을 한다. 브라우저마다 렌더링 엔진의 상세한 동작 과정이나 용어는 조금씩 차이가 있지만, 전반적인 원리는 기본적으로 동일하다. 크롬과 iOS의 경우, webkit이라는 렌더링 엔진을 사용한다. 렌더링 하는 과정은 다음과 같다. 객체 모델 생성 -> 렌더링 트리 구축 -> 렌더링 트리는 배치 -> 렌더링 트리 페인팅 1. 객체 모델(Object Model) 생성 브라우저가 페이지를 렌더링하려면, 먼저 HTML 문서를 파싱 하여 DOM트리를 생성하고, CSS 문서를 파싱 하여 CSSOM 트리를 생성해야 한다. DOM과 CSSOM은 서로 독립적인 데이터 객체이며, 나중에 이 두 가지가 병합하여 렌더링 된다...
FE
2021. 10. 11. 12:00