미새문지

24.06.19 day03 코드트리 연산자, 조건문(if else까지) 학습, 브라우저의 렌더링 원리 본문

개발 TIL

24.06.19 day03 코드트리 연산자, 조건문(if else까지) 학습, 브라우저의 렌더링 원리

문미새 2024. 6. 19. 23:02
728x90

 

파이썬에서 삼항연산자

a = v1 if 조건 else v2

 

다른 언어와 다르게 참 값을 맨 앞에 넣고 if문을 작성한다.

if문 참이라면 v1값을, 거짓이라면  else 부분의 v2값을 넣는다.

 

다른 언어의 삼항연산자

a = v1 > v2 ? v1 : v2

프론트엔드 기술면접 질문 - 2

브라우저의 렌더링(Rendering) 원리

브라우저의 렌더링 원리는 웹 페이지를 사용자가 볼 수 있는 형태로 변환하는 과정이다.

각각의 단계는 HTML, CSS, JavaScript를 해석해서 화면에 표시하는 역할을 한다.

 

1. HTML 파싱

  • 브라우저는 HTML 문서를 파싱하여 DOM(Document Object Model) 트리를 생성한다.
  • DOM 트리는 HTML 문서의 구조를 트리 형태로 표현한 것이다.
  • 예를 들어 <html>, <body>, <div> 등의 태그가 각각의 노드로 변환된다.

2. CSS 파싱

  • 브라우저는 CSS 파일을 파싱하여 CCSOM(CSS Object Model) 트리를 생성한다.
  • CSSOM 트리는 CSS 스타일을 트리 형태로 표현한 것이다.
  • CSS 규칙이 적용되는 각 요소를 정의하고, 스타일 속성들이 각 요소에 매핑된다.

3. DOM과 CSSOM 결합

  • 브라우저는 DOM 과 CSSOM를 결합하여 렌더 트리(Render Tree)를 생성한다.
  • 렌더 트리는 화면에 실제로 그려질 요소들만 포함하기 때문에 "display:none" 같은 보이지 않는 요소는 포함되지 않는다.

4. 레이아웃 계산

  • 렌더 트리의 각 노드의 정확한 위치와 크기를 계산하는데, 이 과정을 레이아웃(Layout) 혹은 리플로우(Reflow)라고 한다.
  • 브라우저는 뷰포트(viewport)의 크기와 각 요소의 스타일 속성에 따라 각 요소의 배치를 결정한다.

5. 페인트 단계

  • 레이아웃 단계가 끝나면 브라우저는 렌더 트리의 각 노드를 화면에 그리는데, 이 과정을 페인트(Painting)라고 한다.
  • 요소의 색상, 배경, 텍스트 등 모든 스타일이 이 단계에서 처리된다.

6. 합성 단계

  • 페인트 단계까지 완료되면 브라우저는 레이어를 합성하여 최종적으로 화면에 표시한다.
  • 복잡한 페이지는 여러 개의 레이어로 구성될 수 있으며, 각각의 레이어가 독립적으로 처리되고 최종적으로 합쳐져서 사용자에게 표시된다.

이 후 자바스크립트가 있다면 코드가 실행된다.

 

자바스크립트 실행

  • 자바스크립트는 DOM을 조작하거나 스타일을 변경할 수 있는데, 브라우저는 자바스크립트 엔진을 통해 스크립트를 실행하고, 필요에 따라 DOM과 CSSOM을 업데이트한다. 
  • 예를 들어 DOM을 변경하는 자바스크립트 코드는 다시 레이아웃과 페인트 단계를 실행할 수 있다.

브라우저의 렌더링 과정은 각 단계가 상호작용하며 최적화되어 있기 때문에 복잡한 웹 페이지도 빠르게 표시된다.

 

728x90
저작자표시 비영리 변경금지

'개발 TIL' 카테고리의 다른 글

24.06.22 day6 코드트리 반복문(break문까지) 학습, REST API란?  (0) 2024.06.22
24.06.21 day5 코드트리 반복문(반복문 안의 if까지) 학습, 클로저(Closure)란?  (0) 2024.06.21
24.06.20 day4 코드트리 조건문(중첩조건문까지) 학습, Reflow와 Repaint가 실행되는 시점  (0) 2024.06.20
24.06.18 day02 코드트리 입출력 코드 학습, 호이스팅(Hoisting)이란?  (2) 2024.06.18
24.06.17 day01 코테 대비 코드트리 풀이 시작  (3) 2024.06.17
'개발 TIL' Related Articles more