모바일 네이버 지도 개편을 하면서 검색창 부분과 상세페이지 스크롤 부분에 애니메이션이 추가되었습니다.
초기 검색창 부분 애니메이션은 CSS 속성 중
margin,
height
을 사용하여 구현했습니다. 하지만 애니메이션이 부자연스러운 현상이 있어 자료를 찾아보니
margin,
height
속성은 애니메이션에 사용했을 때 성능 저하를 유발하는 속성 중 하나였습니다. 성능에 영향이 있는 속성들은 페이지
reflow
를 일으키는 속성들이였고 이를 수정하여 성능을 향상 시킬 수 있었습니다.
언뜻 보이게는 애니메이션이 잘 적용된 것으로 보입니다. 하지만 여기에 애니메이션으로 사용하면 안되는 CSS 속성이 추가되어 있습니다.
왼쪽으로 축소: margin(성능 문제)
아래쪽으로 천천히 확장: height(성능 문제)
fade in / fade-out: opacity
‘X’ 버튼 회전: rotate
‘↑↓’ 버튼 아래쪽으로 이동: translateY
UX 엔지니어이자 자바스크립트 개발자인 윌 보이드(Will Boyd)는 조금 더 부드러운 애니메이션을 만들 수 있는 방법과 그 예시를 소개하였습니다.(
참고 영상
,
카지노사이트
)
“브라우저에서 하나의 애니메이션 프레임을 처리한다는 것은 애니메이션 구현에 필요한 모든 계산 과정과 계산을 통해 얻어진 픽셀 자리를 업데이트 하는 것까지 포함합니다. 목표는 브라우저가 이 과정에서 할일을 최대로 줄여서 초당 60프레임 정도의 부드러운 애니메이션을 만드는 것입니다. CSS 애니메이션 구현 비용과 직접적으로 연관되어 있는 것은
재조정
(
reflow
)
와
재색칠
(
repaint
)
를 일으키지 않는 속성들입니다.”
즉, 부드러운 애니메이션을 적용하려면
reflow
와
repaint
를 최소화 시켜야 합니다.
위치 이동을 구현한 애니메이션(넓이나 높이값 변경 등)은
reflow
가 짧은 시간 내 반복적으로 일어나게 됩니다. 그래서 사용하지 않는 것이 가장 바람직하나 반드시 사용해야 한다면 애니메이션이 들어간 요소에
position
:
absolute
혹은
position
:
fixed
속성을 적용합니다. 다른 요소에는 영향을 끼치지 않으므로 페이지 전체가 아닌 해당 요소만
reflow
가 발생합니다.
위의 그림은 보라색 정사각형(블록1)에 세로 길이가 늘어가는 애니메이션이 추가되어 있습니다.
왼쪽 그림의 경우 보라색 정사각형(블록1)의 세로 길이가 늘어남에 따라 흰색 직사각형(블록2) 위치가 이동하므로 블록1, 블록2 모두
reflow
가 발생하고 있습니다.
가운데 그림의 경우 보라색 정사각형(블록1)에
position
:
absolute
속성이 적용되어 있으므로 세로 길이가 늘어나도 흰색 직사각형(블록2)의 위치는 이동하지 않습니다. 그래서 블록1만
reflow
가 발생합니다. 하지만 원하던 결과가 발생하지 않습니다.
오른쪽 그림의 경우 보라색 정사각형(블록1)에
position
:
absolute
속성이 적용되어 있고 흰색 직사각형(블록)에
transform
:
translateY
(
)
속성이 적용되어 있습니다. 그러므로 블록1만
reflow
가 발생하고 원하는 결과가 나타납니다.
테이블 레이아웃을 사용하게 되면 테이블 값에 따라 넓이를 계산하므로 랜더링이 느려집니다. 그러므로 꼭 필요한 경우를 제외하고는 테이블 레이아웃을 사용하지 않는 것이 좋습니다. 만약 사용한다면 CSS 속성
table-layout
:
fixed
를 사용하면 랜더링을 조금 더 빠르게 할 수 있습니다.
10×10 테이블
table-layout: fixed 미 적용
table-layout: fixed 적용
table-layout: fixed
미 적용(0.6ms) <
table-layout: fixed
적용(0.4ms)
reflow
자체보다는
reflow
가 유발시키는
CSS
Recalculation
에 필요한 내용입니다. CSS 규칙은 오른쪽에서 왼쪽으로 이동합니다. 이 과정에서는 더 이상 일치하는 규칙이 없거나 잘못된 규칙이 나올 때 까지 계속됩니다. 그러므로 불필요한 선택자를 사용하는 것은 성능을 저하시킬 수 있습니다.
스크롤 할 때 엘리먼트의 위치가 변경될 것을 알려줍니다. 이 값을 설정하면 브라우저는 스크롤 가능한 엘리먼트를 미리 최적화 하여 랜더링 합니다. 한 번에 많은 양을 스크롤하거나 빠른 스크롤이 필요한 경우에 사용합니다.
contents
엘리먼트의 컨텐츠가 변경될 것을 알려줍니다. 브라우저는 보통 엘리먼트의 랜더링 결과를 캐싱합니다. 대부분의 엘리먼트가 변경되지 않고 변경되어도 위치가 바뀌는 정도의 미미한 변경만 발생하기 때문입니다. 하지만 엘리먼트가 계속해서 변경되는 경우 브라우저 캐시는 무의미하게 됩니다. 이 속성을 사용하게 되면 캐시를 하지 않고 변경될 때마다 처음부터 랜더링하게 됩니다.
변경하고 싶은 속성을 사용할 수 있습니다. 쉼표(,)를 이용하여 두 개 이상의 속성을 사용할 수 있습니다. 크롬에서는 현재 6가지 속성(opacity, transform, top, left, right, bottom)만 적용됩니다.
온라인카지노
.
will-change
속성을 사용하면 해당 레이어는 GPU에 업로드 됩니다.
아래의 그림은 빨간색 네모에 마우스를 올리면
will-change
속성이 적용되도록 한 그림입니다. 크롬개발자도구 Layer창에서 보면 GPU에 업로드 시 색깔이 변하는 것을 확인할 수 있습니다.
브라우저가 변화에 최적화를 시도하면 일반적으로 비용이 발생합니다. 브라우저는 보통 필요한 경우에 최적화를 실시하고 최적화가 필요가 없으면 다시 원래되로 되돌아 옵니다. 하지만 will-change의 경우는 최적화를 길게 유지하게 됩니다. 그러므로 엘리먼트에 변경이 종료되면 반드시 will-change를 삭제해야 합니다. 그러면 will-change에 사용하고 있던 자원을 회수할 수 있습니다.
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 간단한 예제
// 클릭할 때 애니메이션을 재생할 엘리먼트를 선택합니다.
var
el
=
document
.
getElementById
(
'element'
)
;
// 엘리먼트에 마우스 커서가 올라가면 will-change를 설정합니다.
el
.
addEventListener
(
'mouseenter'
,
hintBrowser
)
;
el
.
addEventListener
(
'animationEnd'
,
removeHint
)
;
function
hintBrowser
(
)
{
// 애니메이션의 키프레임 블럭을 최적화할 수 있는 속성을 사용합니다.
this
.
style
.
willChange
=
'transform, opacity'
;
}
function
removeHint
(
)
{
this
.
style
.
willChange
=
'auto'
;
}
단, 슬라이드처럼 수초 내에 반드시 변화가 일어나거나 마우스 움직임에 따라 변화가 일어나는 경우는 자바스크립트로 will-change로 삭제하지 않고 스타일시트에 바로 선언해도 문제 없습니다.
CSS
1
2
3
.slide
{
will-change
:
transform
;
}
3. 조금 더 빨리 적용하려고 will-change를 사용해서는 안 됩니다.
will-change
를 사용하지 않아도 페이지가 잘 작동된다면
will-change
를 사용하지 않아도 됩니다. 조금 더 빨리하기 위해
will-change[content12][content13][content14]사설토토사이트추천[content15]tongyanglife.kr
속성을 추가하면 과도한 메모리 사용과 더 복잡한 렌더링으로 성능이 더 안좋아 질 수 있습니다.
will-change
로
width,
margin
의 변화를 브라우저에 알리고 싶지만 지원이 되지 않습니다.(적용되는 속성:
top,
left,
right,
bottom,
opacity,
transform
)
will-change
:
width,
margin
대신에
will-change
:
transform
을 적용하면 해당 레이어가 GPU에 업로드 되기는 합니다. 하지만
width,
margin
속성 자체가
reflow
를 계속해서 발생 시키기 때문에 좋은 방법은 아닙니다.
width
변경 속성에
will-change
:
width
적용 했을 때는 적용하지 않았을 경우와 동일합니다.