허원철의 개발 블로그

Reflow와 Repaint 본문

web

Reflow와 Repaint

허원철 2017. 11. 6. 14:14

이번 글은 Reflow와 Repaint에 대한 내용입니다.


Reflow와 Repaint는 브라우저 렌더링 과정의 일부 입니다. 그렇기 때문에 설명하기에 앞서 브라우저 렌더링에 대한 개념을 우선적으로 알아야합니다.



브라우저 렌더링


렌더링은 화면에 컨텐츠를 그리는 과정으로 우리가 흔히 쓰는 크롬 브라우저에 UI를 그리는 것을 말합니다.


크롬에 경우, Webkit 엔진을 사용하여 렌더링하게 되는데요. 간단하게 과정을 설명하자면, 문서(html, css)를 파싱하여 렌더 트리를 생성하고 이를 배치 및 표현하게 됩니다.


(출처http://taligarsiel.com/Projects/howbrowserswork1.htm)



렌더링 엔진은 해당 과정을 절차적으로 수행하지 않고 점진적으로 수행합니다. (단, Table Tag는 적용되지 않습니다.)



렌더 트리


렌더 트리는 스타일 정보와 HTML 표시 규칙을 가진 객체입니다. 어찌보면 DOM 객체와 동일하다고 생각될 수 있는데요. 하지만 이는 약간 다릅니다. 이유는 비시각적인 요소는 렌더트리로 생성되지 않기 때문입니다. (ex. style - display: none, <head> 등)


(출처: http://taligarsiel.com/Projects/howbrowserswork1.htm)



렌더 트리 배치(Reflow)


크기와 위치에 맞게 브라우저에 배치하는 과정을 Reflow라고 합니다. 위치를 결정하는 방법에는 3가지가 존재합니다.


- Nomal: 문서의 위치에 따라 배치, DOM 트리와 동일

- Float: Normal과 같이 배치된 후, 끝(왼 or 오른)으로 이동

- Absolute: DOM 트리와 다른 자리에 배치



렌더 트리 표현(Repaint)


시각적인 요소가 표현되는 과정을 Repaint라고 합니다. 표현이 되는 순서로는 아래와 같습니다.


1
배경색 > 배경이미지 > 테두리 > 자식 > 아웃라인
cs



최적화 방법


Reflow와 Repaint를 최소화하는 방법을 고려해야합니다.


1. 변경이 잦은 요소는 Absolute에 배치합니다.

2. 스타일 변경은 한번에 묶어서 처리합니다.

3. 테이블은 점진적 배치에서 제외되기 때문에 사용을 지양합니다.

4. 스타일을 최적화 합니다. (ex. css 최소화)



참고


https://github.com/nhnent/fe.javascript/wiki/Reflow%EC%99%80-Repaint

http://taligarsiel.com/Projects/howbrowserswork1.htm

https://github.com/Heo-Won-Chul/programming-study/blob/master/web/Reflow%EC%99%80_Repaint.md

https://github.com/Heo-Won-Chul/programming-study/blob/master/javascript/DOM_%EA%B0%9D%EC%B2%B4%EC%97%90_append_%ED%95%98%EB%8A%94_%EB%8B%A4%EC%96%91%ED%95%9C_%EB%B0%A9%EB%B2%95.md

'web' 카테고리의 다른 글

책 '토비의 스프링 3.1' 후기  (405) 2017.09.12
Spring Boot - CORS  (410) 2017.06.25
Spring Boot - Async 제대로 사용하기  (407) 2017.05.18
Spring Boot - Excel Upload & Download  (418) 2017.05.05
Spring Boot - Data JPA & ModelMapper  (414) 2017.04.30
Comments