일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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
- git
- useEffect
- async
- react-router
- 코린이
- React Native
- TypeScript
- 코딩공부
- scss
- SasS
- 자바스크립트
- 코딩기초
- 프론트엔드
- 리덕스
- 코딩독학
- Vue3
- react
- 타입스크립트
- 참조자료형
- 사용하는 이유
- redux
- 리액트
- html기초
- 깃
- 비동기
- 코딩초보
- JavaScript
- CSS
- 리액트 네이티브
- http
Archives
- Today
- Total
목록리페인트 (1)
맨 땅에 프론트엔드 개발자 되기
브라우저 렌더링 동작 과정
1. HTML 파일과 CSS 파일을 파싱(Parsing)해서 각각 Tree를 만든다. 브라우저가 HTTP 프로토콜을 통해 IP 주소에 해당하는 서버에 접속해서 웹사이트를 구성하기 위한 리소스(HTML, CSS, JavaScript)를 받아오면 가장 먼저 HTML 파일을 해석(Parsing)한다. 그리고 해석 단계를 거쳐 DOM(Document Object Model) 트리를 구성한다. HTML 파일에 스타일시트도 연결이 되어 있다면, 스타일시트도 해석해서 CSSOM(CSS Object Model) 트리를 구성한다. - DOM 트리 생성 브라우저가 HTML의 원시 바이트를 읽어와서, HTML 파일에 정의된 인코딩 방식(예: UTF-8)에 따라 개별 문자로 변환한다. 브라우저가 문자열을 W3C 표준에 지정된..
코딩 공부 일지/Browser & Network
2022. 3. 23. 18:04