Notice
Recent Posts
Recent Comments
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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
- javascript arrow function
- react class method bind
- parcel
- client side rendering
- 순차리스트
- 자료구조
- es6 module
- Browser API
- web server vs was
- #javascript #자바스크립트 완벽가이드 #자바스크립트 코뿔소
- js arrow function
- javascript destructuring
- server side rendering
- javascript eventloop
- es6 destructuring
- JavaScript
- react
- 선형리스트
- 크롬 익스텐션 개발
- DOM API
- chrome extension development
- react lifecycle
- javascript spread
- js promise
- react event bind
- task queue
- es6 promise
- javascript class method bind
- es7 async await
- es6 symbol
- Today
- 31
- Total
- 400,412
비실이의 개발 성장기
[Web] 브라우저의 기본 구조 본문
브라우저 구조
<이미지 출처: https://d2.naver.com/helloworld/59361>
1. User Interface
브라우저 화면에서 웹사이트가 표시되는 부분을 제외한 나머지 영역 (ex. 주소창, 이전/다음 버튼, 새로고침 버튼, 즐겨찾기 탭 등)
2. 브라우저 엔진
User Interface 와 렌더링 엔진 사이에서 발생하는 동작 제어
3. 렌더링 엔진
HTML, CSS 를 파싱하여 화면에 표시 담당 (ex. 서버측에서 전달받은 리소스 중에 .html 이나 .css 파일을 파싱하여 화면에 표시)
4. 네트워크 통신
네트워크 호출 시 역할 수행 (ex. URL 입력 시, 해당 서버측과 HTTP 통신을 통해 웹페이지 소스를 받음)
5. Javascript 해석기
Javascript 코드를 해석하고 실행 (ex. 서버측에서 전달받은 리소스 중에 .js 파일을 해석하고 실행)
6. UI 백엔드
7. 데이터 저장소
브라우저 자체적으로 관리할 데이터 저장공간 (ex. 쿠키, HTML5 표준인 IndexedDB, 크롬 브라우저의 Web SQL 등)
크롬 개발자도구에서 확인한 데이터 저장소
참고
- https://d2.naver.com/helloworld/59361
- https://www.slideshare.net/JinKyoungHeo/1-2-53043752
'기타 Web 관련 공부' 카테고리의 다른 글
[Web] Server-Side Rendering(SSR) / Client-Side Rendering(CSR) (0) | 2020.08.19 |
---|---|
[Web & HTTP] CORS / SOP 학습 (0) | 2020.07.01 |
[Web] 브라우저의 기본 구조 (0) | 2018.08.23 |
[Web] 브라우저가 웹 페이지 리소스를 받아오는 과정 (0) | 2018.08.23 |
0 Comments