티스토리 뷰
브라우저에는 익스플로러, 파이어폭스, 사파리, 크롬, 오페라 등 여러 가지가 있습니다.
브라우저의 주요 기능은 사용자가 요청한 HTML 페이지, PDF, 이미지 등을 서버에서 요청해 보여주는 것인데요.
브라우저가 화면에 나타나는 요소를 렌더링할 때 파이어폭스는 게코, 사파리는 웹킷, 크롬은 블링크라는 렌더링 엔진을 사용합니다,
이 렌더링 엔진이 사용자가 선택한 콘텐츠를 표시해줍니다.
예를 들어 HTML 페이지를 요청하면 HTML과 CSS를 파싱해서 화면에 표시해 주는 것이죠.
파싱이란 브라우저가 코드를 이해하고 사용하기 쉬운 구조로 변환하는 것을 말합니다.
파싱의 결과는 노드 트리 또는 DOM 트리로 표현됩니다.
#1.DOM 트리 구축
DOM 트리는 HTML 페이지를 구조화해서 계층으로 표현한 개념입니다.
최상단 루트 태그인 <html> 태그로 시작해서 페이지에 대한 각 요소가 노드로 만들어지죠.
노드는 트리를 구성하는 객체 하나하나를 뜻합니다.
#2.CSSOM 트리 구축
그 다음엔 CSS 파일과 함께 스타일 요소도 파싱됩니다.
#3.JAVASCRIPT 실행
이렇게 파싱을 하다가 HTML 중간에 <script> 태그를 만나게 되면 중단되는데요.
<head> 태그안에 <script> 태그가 있는 경우 자바스크립트 파일 크기가 크고 인터넷이 느린 곳이라면 페이지를 보는 데 오랜 시간이 소요됩니다. 그래서 <body> 태그 아래에 <script> 태그를 추가하는 경우도 있는데요. 이런 경우에는 페이지를 먼저 볼 수는 있겠지만 페이지가 자바스크립트 파일에 의존적이라고 하면 완전하지 않은 페이지를 보게 됩니다.
개발자는 이런 경우도 고려해서 코드를 작성해야 합니다.
참고로 async나 defer 같은 속성을 사용하기도 하니 참고해주세요.
#4.렌더링 트리
이렇게 파싱되어 화면에 출력될 내용을 나타내는 렌더링 트리가 만들어집니다.
#5 레이아웃 생성
그 다음에 뷰포트(viewport) 크기에 맞게 레이아웃이 결정됩니다.
뷰포트란 Display 상의 표시 영역을 의미하는데, 브라우저 Display에 맞게 레이아웃이 결정된다는 뜻입니다.
#6.페인팅
마지막 페인팅 단계에서는 눈에 보이는 내용을 픽셀로 변환해서 브라우저에 표시해 줍니다.
'프론트엔드 > CS' 카테고리의 다른 글
| HTTP와 HTTPS의 차이점 (0) | 2022.09.14 |
|---|---|
| API와 REST API (0) | 2022.09.13 |
| 브라우저 저장소(쿠키, 웹스토리지, 로컬스토리지, 세션스토리지) (0) | 2022.09.09 |
| DNS 원리 (0) | 2022.08.31 |
| 1일 1로그 100일 완성 (0) | 2022.05.29 |
- Total
- Today
- Yesterday
- redux-middleware
- 참조형 데이터
- foreach
- 타입변환
- redux thunk
- 비교 연산자
- redux
- filter
- 기본형 데이터
- null
- EVERY
- 얕은복사
- map
- redux-thunk
- 불변 객체
- redux middleware
- undefined
- 동적(dynamic) 언어
- findindex
- 느슨한 타입(loosely typed)
- some
- find
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 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 |