브라우저 렌더링

브라우저란?

브라우저란 웹 서버에서 쌍방향으로 통신하며 HTML 문서 및 그림, 멀티미디어(ex. 동영상) 등의 컨텐츠를 열람하기 위한 GUI 기반의 소프트웨어 프로그램입니다.

프론트엔드 개발자라면 단순히 코드 개발을 하는 것을 뛰어넘어 브라우저가 어떻게 동작을 하는지, 어떻게 렌더링을 수행하는 지에 대해 아는 것이 굉장히 중요합니다.

브라우저를 화면에 표시하기 위해서는 렌더링 엔진이 반드시 필요한데 브라우저마다 다른 엔진을 가지고 있어 개발자는 브라우저 간의 지속성을 유지하기 위해 웹 표준을 고려해야합니다. (ex. Chrome: Blink, Safari: Webkit...)

 

브라우저 렌더링 방식

 

렌더링이란 HTML,CSS, 자바스크립트 등 개발자가 작성한 문서가 브라우저에서 출력되는 과정을 말합니다.

 

1. URI에 접속합니다.
2. 브라우저는 서버로부터 HTML 문서를 모두 전달 받아 읽어들입니다.
3. 렌더링 엔진은 전달받은 HTML 문서를 파싱하여 DOM 객체 모델을 만듭니다.
4. 다운 받았던 외부 CSS 파일과 함께 포함된 스타일 요소를 파싱해 CSSOM 객체 모델을 만듭니다.
5. DOM 트리와 CSSOM 트리를 합쳐 렌더 트리(Render Tree)를 구축합니다.
6. 렌더 트리에서 각 노드의 위치와 크기를 계산합니다. (Layout)
7. 계산된 값을 이용해 각 노드를 화면상의 실제 픽셀로 변환하고, 레이어를 만든다. (Paint)

 

렌더링 최적화

렌더링 과정을 모두 마치고 브라우저에 페이지가 그려진다고 렌더링 과정이 모두 끝난 것은 아닙니다. 특정 이벤트에 따라 HTML요소의 크기나 위치 등의 레이아웃 수치를 수정하면 그에 영향을 받는 자식 노드나 부모 노드들을 포함하여 렌더 트리와 각 요소들의 크기와 위치를 다시 계산하는 Reflow와 Reflow된 렌더 트리를 다시 화면에 그려주는 과정인 Repaint가 발생할 수 있는데 빈번한 Reflow와 Repaint가 일어나면 성능에 악영향을 주기 때문에 최적화를 해주는 것이 좋습니다.

 

Reflow의 원인

• 페이지 초기 렌더링 시
• 브라우저 리사이징 시
• 노드 추가 또는 제거
• 요소의 위치, 크기 변경
• 폰트 변경과 이미지 크기 변경

 

Reflow 최소화하기

• JavaScript와 CSS를 조합해 애니메이션이나 레이아웃 변화가 많은 요소의 경우 position을 absolute 또는 fixed와 같이 변경해도 영향을 받는 노드가 전혀 없는 경우 Reflow과정이 전혀 필요없어져 Repaint연산비용만 들게 되어 효율적입니다.
• 인라인 스타일을 최대한 배제하는 것도 Reflow 최소화에 도움이 됩니다.
• 클래스 변화에 따른 스타일 변경 시, 최대한 DOM 구조 상 끝단에 위치한 노드에 위치시켜줍니다. 가급적 말단에 위치한 노드의 수치를 변경하면 Reflow 수행 반경을 일부 노드로 제한시킬 수 있기 때문입니다.