오늘은 브라우저의 동작원리에 대해 포스팅해보려 합니다.
렌더링 엔진
- 렌더링 엔진은 HTML, CSS를 파싱해서 브라우저 화면에 요청한 컨텐츠를 표시해줍니다.
- 브라우저마다 사용하는 렌더링 엔진이 각각 다르므로, 모든 브라우저가 동일한 소스를 화면에 동일하게 그려주지 않습니다. 또한 렌더링 엔진마다 읽을 수 있는 코드 버전도 다릅니다. -> 크로스 브라우징 이슈
렌더링 엔진 동작 과정
1. DOM & CSSOM
- 렌더링 엔진의 HTML Parser가 HTML을 파싱하여 DOM 노드를 만듭니다. 이후 DOM 노드들을 병합하여 DOM 트리를 만듭니다.
- 렌더링 엔진의 CSS Parser가 CSS를 파싱하여 CSSOM 트리를 만듭니다.
2. 렌더 트리 구축(Attachment)
- CSSOM 트리와 DOM 트리를 결합하여 렌더 트리를 만듭니다. 이 과정을 Attachment라고 합니다.
- 렌더링 트리는 페이지에 표시되는 모든 DOM 컨텐츠와 각 노드에 대한 모든 스타일 정보를 가지고 있습니다.
- 렌더 트리는 화면에 표시되는 각 노드의 위치를 계산하는 레이아웃(Layout)에 사용되고 픽셀을 화면에 그리는 페인트(Paint)과정에도 사용됩니다.
3. 렌더 트리 배치(Layout or Reflow)
- 렌더 트리가 생성되고, 기기의 뷰포트 내에서 렌더 트리의 노드가 정확한 위치와 크기를 계산합니다. 이때 모든 상대적인 값이 픽셀값(절대값)으로 변환됩니다.(%, rem, vh -> px)
- 이 과정을 Layout이라고 합니다.
4. 렌더 트리 그리기(Paint)
- 렌더 트리의 각 노드를 화면의 실제 픽셀로 나타낼 때 Painting 메서드가 호출됩니다. Painting 과정 후 브라우저 화면에 UI가 나타나게 됩니다.
DOM의 변경
- DOM이 변경되면(추가, 수정, 삭제) 브라우저는 이 변경에 대해 가능한 최소한의 동작으로 반응하려고 노력합니다.
- 특정 액션이나 이벤트로 HTML 요소의 크기나 위치 등의 레이아웃 수치가 변하면 해당 요소의 영향을 받는 노드들은 Layout(Reflow)과정을 다시 수행하게 됩니다.
- 변경이 일어나면 크기와 위치를 다시 계산하게 되는데 이 과정을 Reflow, 그리고 Reflow된 렌더 트리를 다시 화면에 그려주는 방식을 Repaint라고 합니다.
- 화면의 구조가 변경되었을 때에는 Reflow 과정을 거쳐 화면 구조를 다시 계산한 후 Repaint 과정을 통해 화면을 다시 그립니다.(Reflow & Repaint)
- 화면의 구조가 변경되지 않는 화면 변화의 경우 Repaint만 발생합니다.
- ex) opacity, background-color, visibility, outline
자바스크립트 파싱 과정
- 렌더링 엔진은 HTML 문서를 한 줄씩 순차적으로 파싱하다가 자바스크립트 파일을 로드하는 script 태그를 만나면 DOM 생성을 일시 중단합니다.
- script 태그의 src에 정의된 자바스크립트 파일을 서버에 요청하여 응답받으면 자바스크립트 코드를 파싱하기 위해 자바스크립트 엔진에게 제어권을 넘겨줍니다.
- 자바스크립트 엔진 : 자바스크립트 코드를 해석하고 실행
- 아직 생성되지 않는 DOM(아직 파싱되지 않은 HTML 요소)을 조작한다면 에러가 발생할 수 있다. 따라서 body 요소 아래에 자바스크립트를 위치시키거나 DOM 생성이 완료된 시점에 자바스크립트가 실행되도록한다(window.onload)
Reflow가 일어나는 경우
- DOM 노드의 추가, 제거
- DOM 노드의 위치 변경
- DOM 노드의 크기 변경(margin, padding, border, width, height 등)
- 애니메이션과 트랜지션
- 폰트 변경, 텍스트 내용 변경
- 이미지 크기 변경
- offset, scrollTop, scrollLeft와 같은 계산된 스타일 정보 요청
- 페이지 초기 렌더링
- 윈도우 리사이징
참고자료
개발 일지를 작성합니다