브라우저에서 화면이 그려지는 원리

브라우저를 구성하고 있는 요소

 

렌더링 엔진의 동작 원리

 

파싱 - HTML  파싱

HTML 파서의 특징

1. 오류에 너그럽다.

HTML Tag가 정확하게 쓰여있지 않더라도 브라우저가 자체적으로 수정하여 에러를 제거한다.

2. 파싱 과정이 중단될 수 있다.

외부 태그 (<script>, <link> 등) 를 만나면 파싱을 중단하고 외부 소스를 모두 다운로드하고 해석한 후 다시 시작한다.

3. 파싱이 재 시작된다.

파싱이 중단되면 처음부터 다시 파싱 과정을 거친다.

따라서 파싱을 반복적으로 재시작할 경우 파싱 시간이 오래걸릴 수 있다.

 

 

파싱 - CSS  파싱

 

렌더트리 구축

랜더트리란 DOM 트리와 CSS DOM트리를 조합하여 화면에 어떤 요소들이 나타나야하고, 숨겨져야 하는지를 반영한 트리다.

 

 

레이아웃

레이아웃은 노드들의 크기, 위치, 레이아어간 순서 등을 계산하여 좌표에 나타내는 과정이하.

루트 노드부터 재귀적으로 실행된다.

 

레이아웃의 종류

1. 전역적 레이아웃 (Global Layout)

화면 전체를 다시 계산하는 것.

폰트적용, 폰트 사이즈 변경, DOM관련 자바스크립트 API 접근 등을 할 때에 전역적으로 레이아웃이 계산된다.

노드 수가 많아지면 속도가 느려진다.

2. 증분적 레이아웃 (Incremental Layout)

변경사항이 생기면 처음부터 다시 계산하지 않고, 특정 부분만 다시 계산하는데 즉시 수행하지 않고 비동기로 일괄 적용한다. 연상 횟수와 범뤼를 줄여서 성능을 개선한다.

 

※ 개발자가 레이아웃 과정의 성능을 최적화할 수 있는 방법 : DOM 레이아웃값을 직접 읽거나 변경하는 자바스크립트 코드는 최대한 묶어서 작성한다.

 

페인트 

페인트 단계는 레이아웃 단례를 거쳐서 배치된 엘리먼트들을 색칠하고 위치를 결정하는 단계이다. 마찬가지로 루트노드부터 재귀적으로 실행된다.

페인트의 종류

1. 전역적 페인팅 : 화면 전체를 페인팅 하는 것

2. 증분적 페인팅 : 변경사항이 생기면 처음부터 다시 계산하지 않고 특정 부분만 다시 페인팅 하는 것.

 

페인팅 순서

z-index가 낮은 순서대로 페인팅 된다.

(배경 색 -> 배경 이미지 -> 테두리 -> 자식 노드들 -> outline)

 

 

브라우저가 HTML문서를 읽고 그리는 과정을 다시 정리하자면

1. 불러오기 - Loader가 서버로부터 전달받은 리소스 스트림을 읽는다. 
2. 파싱 – HTML, XML 파서가 문서를 파싱하여 DOM Tree를 만든다. DOM Tree는 자바스크립트에서 접근하는 DOM객체를 쓸 때 이용하는 것. 보이지 않아도 있는 것 (head 태그, display:none 등이 모두 포함) -> $(document).ready / DOMContentLoaded  실행됨.

3. 렌더링 트리 만들기 –화면에 표기하기 위한 트리. 위치, 크기, 순서 등을 저장하기 ‘위한' 트리 를 만든다.

4. CSS 결정 – CSS 스타일을 분석해 각각 태그에 규칙이 적용되게 설정한다.

5. 레이아웃 – 렌더링 트리에서 위치, 크기 등을 정해주는 과정이다.

6. 그리기 – 렌더링 트리를 탐색하면서 실제로 그린다. -> $(window).load() 실행됨

 

때문에 css파일은 위에, js파일은 아래에 두는 것이 좋다.