브라우저의 구성요소
1.사용자 인터페이스 : 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등. 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분
2. 브라우저 엔진:사용자 인터페이스와 렌더링 엔진 사이에 동작을 제어한다.
3. 렌더링 엔진: 요청한 콘텐츠를 표시, 만일 HTML을 요청했다면 요청한 HTML와 CSS를 파싱하여 화면에 표현
4. 통신 :HTTP 요청과 같은 네트워크 호출에 사용됨
5.UI 백엔드:콤보 박스와 창 같은 기본적인 장치를 그림. OS사용자 인터페이스 체계를 사용
6. 자바스크립트 해석:자바스크립트 해석 실행
7. 자료 저장소: 자료를 저장 되는 계층 HTML5명세에는 브라우저가 지원하는 웹 데이터 베이스가 있다.
여기서 우리가 살펴볼 동작원리는 바로 3번이다.
브라우저가 화면에 나타내는 요소를 렌더링 할때, 다양한 렌더링 엔진을 사용한다.
ex.웹킷(Webkit)이나 게코(Gecko)
렌더링 엔진이 HTML, CSS, Javascript 힐때는 CRP(Critical Rendering Path) 프로세스 단계를 따라간다.
Critical Rendering Path(CRP)는
브라우저가 서버로 부터 HTML 응답을 받아 화면을 그리기 위해 실행하는 단계이다.
각 단계는 다음과 같다.
1. DOM 트리 만들기
- Dom 트리는 HTML의 파싱된 Object표현이다. HTML을 시간으로 element,text노드가 만들어 진다.
//DOM코드
<!DOCTYPE HTML>
<html>
<body>
사슴에 관한 진실.
<ol>
<li>사슴은 똑똑합니다.</li>
<!-- comment -->
<li>그리고 잔꾀를 잘 부리죠!</li>
</ol>
</body>
</html>
2.CSSOM 트리 만들기
- CCSOM은 스타일의 Object표현이다.
css코드
body {
font-size:18px;
}
main{
color:firebick;
}
CSS는 렌더링을 차단한다. 따라서 완전히 파싱 되지 않는다면, Render 트리를 구성할 수 없다. HTML과 달리 CSS는 상속 계단 특성때문에,부분적으로 실행 될 수 없다. 뒷부분에 정의된 스타일은 이전에 정의된 스타일을 따라간다. JavaScript 파일은 실행되기 전에 CSSOM이 생성되는 것을 기다려야 한다.
3. JavaScript 실행
Javascript 는 파서 차단 리소스이다. 이는 HTML 문서의 파싱은 Javascript에 대해서 차단이 된다는 것이다.
4. Render 트리 만들기
Render 트리는 Dom과 CSSOM이 합쳐진 것으로 최종적으로 렌더링 할 트리이다.
5. 레이아웃 생성하기
- 레이아웃은 뷰포트의 크기를 결정하며, 뷰포트의 크기는 뷰포트의 크기와 관련있는 CSS 스타일에 대한 컨텍스트를 제공한다.
<meta name="viewport" content="width=device-width,initial-scale=1">6.페인팅
- 그리는 단계에서의 내용을 픽셀로 변환한다.
실제 렌더링 과정
'Tech.log > 프론트엔드' 카테고리의 다른 글
| 로컬스토리지(Local Storage) VS세션 스토리지 (Session Storage) 그리고 쿠키(Cookie) (0) | 2021.05.09 |
|---|---|
| [자바스크립트 엔진이 코드를 실행하는 과정] (0) | 2021.04.30 |
| [React] Component와 Props 알아보기 (0) | 2021.04.16 |
| Pre-rendring[SSR vs CSR _2] (0) | 2021.04.12 |
| SSR vs CSR ? 그리고 .. (0) | 2021.04.12 |
댓글