브라우저의 역할
코드를 읽어서 페이지 그려줌
브라우저의 공통적 구조 (7가지)
브라우저마다 다른 렌더링 엔진
렌더링 엔진의 목표
1) 모든 요소를 화면에 보여준다
2) 업데이트가 필요할 때 효율적으로 렌더링 할 수 있도록 자료구조를 생성한다
동작과정(Critical Rendering Path)
1) html태그를 파싱해서 태그들을 토큰화
2) 브라우저의 랙싱과정으로 토큰이 각 노드로, 노드간의 연관관게로 DOM Tree 생성
3) js, css 필요한 애들을 따로 요청함
4) CCSSOM 스타일규칙을 읽어서 마찬가지로 트리구조로 생성
5) DOM Tree, CSSOM Tree 를 합쳐서 Render Tree 생성
6) 레이아웃 (reflow) : 뷰포트 내에서 요소들의 정확한 크기나 위치를 계산하는 단계, %, em 사용시 뷰포트에 맞추어 px로 변환된다
7) 페인트 : 실제 픽셀로 그려진다
8) 합성하기(조합하기)
사용자의 액션에 따라 화면이 바뀌는 경우
1. 다시 레이아웃이 발생하는 경우
요소의 크기나 위치가 바뀔때, 브라우저 창 크기가 바뀌었을 때
ex) left 속성을 변경시키는 애니메이션 액션을 할때
2. 페인트부터 다시 발생
배경이미지나 텍스트 색상, 그림자 등
3. 레이어의 합성만 다시 발생하는 경우
레이어의 합성만 발생
성능상 이점
크롬의 경우 레이아웃 과정 이후 브라우저가 레이어를 생성하고 노드들이 레이어에 포함되고, 레이어를 각각 페인트로 그려주고 하나의 비트맵으로 합성함
ex) transform 속성 변화시
[손그림]
