웹 페이지 렌더링
웹 브라우저 내에서 페이지가 어떻게 렌더링 되는지?
- 모던 웹 브라우저 들여다보기
- 렌더링 트리 생성, 레이아웃 및 페인트
- How Browsers Work : Behind the scenes of modern web browsers
웹 브라우저의 기본적인 구조
사용자 인터페이스
↓
브라우저 엔진
↓ → 자료 저장소
렌더링 엔진
↓
통신/ 자바스크립트 해석기 / UI 백엔드1. 사용자 인터페이스
- 웹 브라우저 주소창, 뒤로 가기, 앞으로 가기, 즐겨찾기, 새로고침
(보이는 영역 외의 영역을 사용자 인터페이스가 차지!) - 브라우저 엔진 : 렌더링 엔진과 사용자 UI를 중개해주는 역할을 수행!
- 렌더링 엔진
: 웹 페이지 소스를 사용자에게 렌더링해주는 엔진으로
우리가 만든 코드를 해석하면서
1) 통신 : 이미지, 다른 스크립트, 스타일시트를 다운
2) JS해석기 : 작성한 코드를 해석
3) UI백엔드 : OS에 의존하는 UI형태 - 자료 저장소 : 쿠키와 같이 지속적으로 저장해야 할 것들을 저장하는 장소
렌더링 엔진의 역할
렌더링 순서
1) 파싱 2) 스타일 계산 3) 레이아웃 4) 페인트 5) 컴포지팅
1. 파싱
- 파싱 단계 : HTML을 DOM으로 변환하는 과정 (우리가 작성한 코드를 트리 구조로 만들어줌)
1) 오타 혹은 잘못된 문법을 사용했을 경우 예외처리
-> 에러 코드가 뜨진 않음
2)<link>,<img>와 같은 태그를 만나면 리소스를 다운로드
3)<script>태그를 만나면 DOM 파싱을 중단하고 JS를 해석
-> 중단하는 이유 : 스크립트 코드 내에 DOM 구조를 변화시키는 코드가 있을 수도 o
<html>
...
<body>
<script>
document.write("<h2>hi~</h2>");
</script>
</body>
</html>2. 스타일 계산
- 스타일 계산 단계 : CSS을 파싱하여 CSSOM으로 변환
1) CSSOM 정보를 통해 돔 노드에 대한 스타일을 결정
2) 결정된 스타일은 크롬 개발자 도구의 computed 항목에서 확인 가능
(스타일 계산 단계에서 확정된 스타일!)
3. 레이아웃
- 레이아웃 트리 (렌더 트리)를 생성
1) 돔과 계산된 스타일을 따라가며 요소의 크기나 좌표와 같은 정보를 담은 레이아웃 트리를 생성
2) 화면에 표현되는 정보만 트리에 담기게 됨
ex) display:none X, 가상요소 O
visibility : hidden은 화면에 안보이지만, 영역 레이아웃 자체는 유지되어 있음!
4. 페인트
- 레이아웃 트리(렌더 트리)가 생성되면 이 트리를 따라 페인트 기록이 생성됨
- 페인트 기록에는 요소를 렌더링하는 순서가 저장됨 그리고 지금까지의 정보를 바탕으로 한 페이지를 여러 개의 레이어로 나눈 뒤 그 위에 텍스트, 색, 이미지, 보더, 그림자 등의 모든 시각적 부분을 그리는 작업이 진행됨
- 색, 모양이 실제로 그려지는 단계
5. 컴포지팅 단계
- 각각의 레이어를 스크린에 픽셀에 표현 (레스터링)
- 나누었던 레이어들을 합성해 페이지를 그림
정리
- 파싱 : HTML을 파싱해서 트리 모델을 만듦
- 스타일 계산 : DOM + CSSOM = 스타일 확정
- 레이아웃 : 요소의 크기, 좌표 정보가 계산 (렌더트리)
- 페인트 : 레이어 위에 시각적인 부분을 그림
- 컴포지팅 : 각각의 레이어를 픽셀화하고 다시 합성
Front-End Developer