Browser
참고 사이트: https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/
Browser Components
- UI: 눈에 보이는 화면
- Browser engine: 브라우저 소프트웨어를 동작 시켜주는 핵심 엔진
- Rendering engine: 웹 페이지에 대한 컨텐츠 및 데이터를 위해 동작하는 엔진
- Rnedering engine basic flow
- Parsing HTML to construct the DOM tree
- Render tree construction
- Layout of the render tree
- Painting the render tree
- Rnedering engine basic flow
- Data Persistenece: 브라우저가 일부의 데이터를 캐시하고 저장하는 공간
- Networking: 서버 통신을 위한 네트워킹 모듈
- JavaScript Interpreter: JavaScript 코드를 해석
- UI Backend
DOM
예제 코드
<html>
<body>
<p>
Hello World
</p>
<div> <img src="example.png"/></div>
</body>
</html>위 예제에서 DOM tree는 다음 이미지와 같이 브라우저가 처리한다.
'WebStudy' 카테고리의 다른 글
| React 기본 1 (0) | 2021.02.12 |
|---|---|
| Web Server 및 WAS (0) | 2021.02.06 |
| HTTP (0) | 2021.02.06 |
| 프로젝트A. 명함 관리 프로그램 (0) | 2021.02.05 |
| JDBC (0) | 2021.02.05 |
최근댓글