Repaint만 일어나는 속성, 아예 Repaint도 일어나지 않는 속성

브라우저에서 웹 사이트를 꾸미는 것에 있어서 우리는 각자 다양한 방식으로 많은 스타일 속성들을 사용하여 꾸미게 됩니다.

그런 상황에서도 브라우저 렌더링을 최소화 할 수 있고 Reflow를 아예 안할 수 있는 속성들이 있어 소개드리려고 합니다.

 

기본적으로 브라우저 렌더링 상황에서는

 

Javscript > Style > Layout > Paint > Composite 순서를 따르게 됩니다.

 

Layout(Reflow)단계를 뛰어넘게 되면 연산하는 양이 줄어들기 때문에 렌더링이 개선됩니다.

 

Reflow가 일어나는 속성들

position	width	height	left	top
right	bottom	margin	padding	border
border-width	clear	display	float	font-family
font-size	font-weight	line-height	min-height	overflow
text-align	vertical-align	white-space	...

 

Repaint만 일어나는 속성들

background	background-image	background-position	background-size	background-repeat
border-radius	border-style	box-shadow	color	line-style
outline	outline-color	outline-style	outline-width	text-decoration
visibility	....

위에서 주의깊게 보시면 확인할 수 있는 사실은 border 같은 경우 outline과 달리 reflow가 발생하며 우리가 trasnform이나 animation으로 엘리먼트에 변화를 줄 때 border를 재할당 하는 것 보다 필요한 부분만 업데이트하는 것이 훨씬 더 이익이라는 것입니다.

 

 

위와 같이 Reflow만을 피해서 렌더링 최적화를 이룰 수도 있겠지만 Repaint 조차 하지 않아도 되는 속성들이 있습니다.

 

transform, opacity, cursor, orphans, perspective등이 있을 수 있겠는데요.

앞서, 언급했던 각 레이아웃 렌더링 단계에서 Layout과 Paint를 건너뛰게 되므로 매우 렌더링 속도에 대한 이득을 많이 볼 수 있습니다.

 

이상입니다.

 

 

 

 

 

출처 : boxfoxs.tistory.com/409