브라우저 렌더링

브라우저의 기본 구조

---

• 사용자 인터페이스
• 브라우저 엔진 : ui와 렌더링 엔진 사이의 동작을 제어
• 렌더링 엔진 : 요청한 자원을 파싱하여 표시
  ( ex: Firefox-Gecko, Chrome-Blink, Safari-Webkit )
• 통신 : http
• 자바스크립트 엔진
• ui 백엔드 :
• 자료 저장소 : 쿠키 등을 저장

렌더링 엔진의 동작 과정(Chrome 기준)

: Critical Rendering Path

---

1. DOM 트리 구축을 위한 HTML 파싱 => DOM, CSSOM 트리 생성
   • 어휘 분석
     • 토큰화 [tokenize]
     • 각 토큰을 노드 객체로 변환
   • 파싱트리 생성 : 구문 규칙에 따라 문서 구조 분석, 파싱 트리 생성
     • DOM 트리
     • CSSOM 트리 : DOM이 화면에 표시되는 방법 표시
2. 렌더 트리 구축

• 렌더트리 = DOM 트리 + CSSOM 트리
• 화면에 표시되어야 할 모든 노드에 대한 정보(컨텐츠, 스타일 등)를 포함한 트리
  • DOM의 최상위 노드부터 순회하면서 CSSOM으로부터 관련된 요소를 트리에 포함시킨다.

3. 렌더 트리 배치(Layout)

• 뷰포트 내에서 요소들의 정확한 위치와 크기를 계산하는 과정
• 레이어 구성

4. 렌더 트리 그리기(Paint)
   

   [웹킷의 렌더링 과정]

UI 업데이트 과정

---

Javascript >> Style >> Layout >> Paint >> Composite

자바스크립트 엔진

---

자바 스크립트 엔진은 js 코드를 해석하고 실행시켜주는 프로그램 혹은 인터프리터

• 종류
  • v8 : 구글에서 c++로 개발, 크롬과 nodejs에서 주로 사용
  • spiderMonkey, Rhino, JavaScriptCore, Chakra, Nashorn, JerryScript 등
    
    
• js의 메모리 구조
  • Memory Heap : 참조 타입의 데이터가 저장됨
  • Call Stack : 원시타입, 실행 컨텍스트가 저장됨
    
    

※DOM(Document Object Model)
: HTML을 객체로 표현한 것

※ 렌더트리

• DOM 트리 + CSSDOM 트리 = 렌더 트리
• 화면에 표시되지 않을 토큰은 제거하여 트리를 생성함 (ex: display:none)
• 표시되는 각 요소의 레이아웃을 계산하는 데 사용됨
• 페인트 프로세스에 대한 입력값으로 사용됨

※

렉시컬 환경