우리는 이미 일상 속에서 익숙하게 웹 서비스를 이용하고 있다.
각 웹 서비스마다 서로 다른 UI를 보여주고 그에 맞는 동작을 하는데 이러한 부분은 브라우저가 어떻게 처리를 해주는걸까?
데스크탑, 노트북, 휴대폰 등 디바이스 내 브라우저 에서 구글, 네이버와 같은 웹 서비스에 접속을 시도하면 브라우저는 네트워크 통신을 통하여 HTML, JS, CSS와 같은 리소스를 불러와 우리가 사용중인 브라우저에 화면을 노출시켜준다.
오늘은 위에서 말한 브라우저에 원하는 웹 서비스를 노출시켜주는 렌더링 과정에 대해 적어보려 한다.
렌더링이란?
먼저 렌더링이란, 사용자가 완성된 화면 구성을 접하기 전 설계도를 완성품으로 만들어 주는 과정이라고 생각하면 이해가 쉽다.
렌더링의 과정은 아래와 같이 크게 두 가지로 나누어 볼 수 있다.
- DOM 요소와 스타일에 기반을 둔 레이아웃 계산
- 계산된 요소의 화면을 표현
그럼 이 레더링 과정 하나하나에 대해 자세하게 다뤄보자.
렌더링 과정
1. DOM, CSSOM 생성
먼저 브라우저는 서버로부터 HTML, CSS와 같은 리소스를 전달 받은 뒤, 리소스 파일 내 태그들을 참조 후 각자 상응하는 노드를 통해 연산과 관리가 유리한 Object Model를 구성한다. 이 과정에서 HTML 문서는 DOM Tree로 CSS 문서는 CSSOM으로 구성된다.
이해를 돕기 위해서는 아래 ‘Render Tree 생성’에 첨부된 이미지를 참조하자.
2. Render Tree 생성
위 과정을 통하여 DOM, CSSOM을 생성한 이후에는 이 두 가지 요소를 이용하여 Render Tree를 생성한다.
DOM Tree와는 달리 Render Tree에는 각 노드에 스타일 정보가 포함되어 있으며 실제로 화면에 노출되는 내용들이 포함되어 있다.
그렇기에 DOM Tree 노드 중 head, title, script 등 화면에 노출되지 않는 노드는 Render Tree에 포함되어 있지 않다.
출처: http://bitly.kr/B6FidDq
3. Layout 처리
Layout 처리 단계에서는 렌더 트리 내 각 노드의 위치와 크기를 계산한다.
쉽게 얘기하면 사용자가 이용하는 브라우저 화면 내에서 각 노드들이 어떤 위치에 어떤 크기로 출력이 될 지 계산하는 단계라고 할 수 있다.
추가적으로 이 과정 중 %, vh, vw와 같이 상대적인 속성을 가진 노드들은 노출되는 화면의 크기이 변경되면 그에 맞춰 재계산이 이루어져 위치와 크기가 그에 맞게 변경된다.
4. Paint
이렇게 Layout 처리까지 완료되면 브라우저는 지금까지 정리된 요소들을 이용하여 계산된 위치, 크기로 픽셀을 채워나가며 사용자가 접할 화면을 그리게 된다. 이 과정을 Paint 라고 한다.
Paint 과정에서는 각 브라우저의 렌더링 엔진에 따라 보여지는 외형이 약간씩 차이가 있을 수 있으며, 스타일 속성에 따라 Paint 과정의 처리 속도가 조금 차이 날 수 있다.
이 Paint 과정까지 마치면 렌더링을 마쳤다고 볼 수 있다.
5. Reflow & Repaint
최근 웹 서비스는 렌더링 후 시각적인 동적 변화를 주며 사용자에게 기능적 유용함과 편리함을 주는 경우가 많다.
그렇다면 위 과정과 같이 각 요소들에 대하여 계산을 마치고 난 뒤 화면 내 요소에 변화를 주면 브라우저는 어떻게 대응할까?
그에 대한 답은 Reflow & Repaint 이다.
사용자의 특정 액션이나 이벤트를 통해 html 요소가 변경될 경우, 해당 요소의 자식 노드와 부모 노드를 포함하여 Layout 과정부터 다시 수행을 하게 된다. 이 과정을 Reflow 라고한다.
Reflow가 발생하는 경우는 아래와 같다.
- 노드의 추가 또는 제거가 되는 행위
- 요소의 위치, 크기 변경과 같은 스타일 변화
- 요소의 노출 속성 변경
- 브라우저의 크기 변경 및 글꼴, 크기 변경
Reflow를 통해 다시 계산을 하고 난 후 Repaint 과정을 통하여 다시 화면을 그리게 된다.
하지만 Repaint가 발생한다고 반드시 Repaint가 발생하는 건 아니다. Background-color, visibility와 같이 레이아웃에 영향을 주지 않는 속성들에 변경에 대해서는 Repaint만 수행을 하게 된다.
성능 개선을 위한 Reflow & Repaint 최소화
위에서 언급했듯 화면 내 동적인 요소 변경을 통해 사용자에게 편리함과 유용함을 제공할 수 있지만 Reflow와 Repaint 과정은 자원을 소모한다.
따라서 렌더링 성능을 향상시키기 위해서는 Reflow를 최소화 시키는 것이 중요하다.
Reflow & Repaint를 줄이기 위한 방법
아래에 작성된 방법은 렌더링 성능 개선을 위한 몇가지 방법일 뿐, 개선 방법의 전부는 아니다.
아래와 같은 방법이 있다는 정도만 참고해보자
노출이 필요하지 않은 부분은 ‘dispay:none’을 사용하기
visibility, invisible은 Layout을 차지하기 때문에 reflow의 대상이 되지만
dispay(:none) 속성은 Layout 공간을 차지하지 않아 Render Tree 에서 제외된다.
작업 그루핑
Reflow를 발생시킬만한 DOM 요소의 속성 변경을 할 경우
같은 형태의 작업끼리 그룹 지어 실행 시키는 쪽이 성능 개선에는 유리하다.1
2
3
4
5
6function handleTag1() {
var width = document.getElementById("layer1").style.width;
document.getElementById("layer2").style.width = width;
var height = document.getElementById("layer3").style.height;
document.getElementById("layer4").style.height = height;
}1
2
3
4
5
6function handleTag2() {
var width = document.getElementById("layer1").style.width;
var height = document.getElementById("layer3").style.height;
document.getElementById("layer2").style.width = width;
document.getElementById("layer4").style.height = height;
}위 ‘handleTag1’와 같은 이벤트의 경우 코드 내 요소들의 정보를 요청하고 변환하는 과정이 교차로 발생함으로써 Reflow가 여러번 발생할 수 있다. 따라서 ‘handleTag2’와 같이 비슷한 형태의 작업끼리 그룹을 묶어 처리하면 렌더링 성능을 향상 시킬 수 있다.
렌더링에 관련된 추가적인 팁
CSS가 HTML 문서 상단에 배치되면 유리한 점
브라우저가 전달받는 HTML 문서는 위에서 아래로 처리가 되기 때문에 CSS를 HTML 문서 상단에 배치하면 렌더링 엔진이 CSS를 이용하여 렌더 트리를 구성하는 과정에서 조금이라도 빨리 스타일 정보를 제공받기 때문에 이 편이 조금 더 유리하기 때문이다.
때문에'body' 태그가 선언되기 전 CSS를 선언하는 것이 일반적이다.
JS를 HTML 하단에 배치하면 유리한 점
CSS의 경우 HTML 문서 상단에 배치하는 것이 유리하지만 JS의 경우에는 문서 하단에 배치하는 것이 유리하다.
JS 영역을 처리하는 과정에는 모든 작업을 정지하고 해석과 구현을 하는 데에 우선적으로 대응하기 때문이다.
때문에DOM Tree 구성과 Render Tree 구성을 최대한 진행한 뒤 JS를 처리하는 것이 유리하다.
마무리
해당 내용은 프론트엔드 개발자 면접 질문으로도 종종 나오는 내용이며 필자 또한 웹 개발에 대한 기본기를 다듬기 위해 학습하며 이번 포스트를 작성하였다.
앞으로도 웹 개발에 대한 기본기에 대해 조금 더 다뤄볼 예정이며 다음 포스트에서는 Virtual Dom에 대한 내용을 작성해보려고 한다.
참고
https://12bme.tistory.com/140
https://boxfoxs.tistory.com/408