style

CSS will-change 속성

css, transform
Views: 261

시작하기

웹킷 계열 브라우저에서 CSS transform이나 animation 같은 프로퍼티를 사용할 때 발생하는 깜빡이는 현상에 관해 알고 있는 사람은 “하드웨어 가속”이라는 용어를 한번쯤 들어본 적이 있을 것 입니다.

하드웨어 가속

하드웨어 가속을 활성화하는 방법으로 브라우저를 속여 강제로 animation이나 transform의 시키는 방법을 이용했습니다.
transform: translate3d(0, 0, 0);
이 방법은 translateZ(또는 translate3d)라고 부르는 CSS 핵(때때로 null transforms 핵이라 불리는)을 이용하여, 3차원적 변형이 필요하지 않은 엘리먼트에 단순히 3D 변형을 지시를 하여 렌더링 처리를 고속화합니다.

will-change

값이 변경될 속성에 대한 힌트를 미리 지정해주는 것입니다.

웹 어플리케이션이 진화함으로서 opacity, transform 등의 CSS 속성 값이 동적으로 변화는 상황이 갈수록 자주 생깁니다.
동정으로 변화하는 상황시에, will-change 속성을 이용하면 브라우저에 엘리먼트의 어떤 속성이 높은 확률로 변할 것인지 알려 줄 수 있습니다.
브라우저는 이것을 통해 앞으로 동적으로 변화할 값을 알고 더 부드러운 이벤트를 구사할 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
.button{
    will-change: auto;
}

.button:hover{
    will-change: transform;
}

.button:active{
    transform: scale(1.1);
}
1
2
3
4
5
6
7
8
will-change: auto; /* 기본값 */
will-change: scroll-position; /* 엘리먼트의 스크롤 위치가 바뀔 것 */
will-change: contents; /* 엘리먼트의 컨텐츠 중 일부가 바뀔 것 */

/* 혹은 특정 CSS 속성을 명시할 수 있습니다. */
/* transform, opacity, top, left, right, bottom가 많이 사용됩니다. */
will-change: transform;
will-change: left, top; /* 여러 속성을 동시에 명시할 수 있습니다 */

하지만 이러한 will change를 사용할때는 사전 준비에 비용이 듭니다.
필요하지않은 상황에서 사용하게 될시에는 성능이 저하될 것입니다.
기본적으로 css사용할때 성능의 문제가 없다면 따로 will change를 사용할 일은 없습니다.

참고로 will-change의 사용이 끝날시에는 다시 auto로 초기화를 시켜주는 것이 좋습니다.
좀더 깊이 있으며 자세한 내용으로는 다음 사이트를 참고합니다.
참고사이트

Share