transform 사용시 3d를 사용 하는 이유
- 3d에서는 하드웨어 가속을 사용 할 수 있다...?
인터넷을 통해 찾아봤을때는
하드웨어 가속이 3d를 사용할 때 활성화 되고, 2d를 사용할때는 비활성화된다고 설명하고 있어서 실제로 테스트를 간단하게 진행해봤습니다!
간단한 다음과 같은 에니메이션을 작성한 후 사진상으로는 3개지만 실제로는 50개 정도를 동시에 보이게 한 후 했습니다!
css 코드
.flex {
margin: 10px;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.item {
position: relative;
width: 200px;
height: 200px;
border: 1px solid;
}
.target {
position: absolute;
width: 50px;
height: 50px;
background-color: lightblue;
border-radius: 50%;
animation-name: move-target;
animation-duration: 1000ms;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-direction: alternate-reverse;
will-change: transform;
}
@keyframes move-target {
0% {
/* top: 0; */
/* left: 0; */
/* transform: translate(0, 0); */
transform: translate3d(0, 0, 0);
}
100% {
/* top: 150px; */
/* left: 150px; */
/* transform: translate(150px, 150px); */
transform: translate3d(150px, 150px, 10px);
}
}html body 코드
<ul class="flex">
<li class="item"><span class="target"></span></li>
...
</ul>크롬 개발자 도구 성능 체크
2d를 사용 했을때
3d 옵션을 사용 했을 때
2d는 하드 웨어 가속을 사용하지 못한다고 했는데 사용이 가능한걸로 보아서는...
가설 1. 최신의 브라우저들은 2d를 자동으로 하드웨어 가속을 해준다..?
가설 2. 애니메이션을 너무 적게 해서 사용이 안된다..?
가설 3. 하드웨어 랜더링은 확인 방법이 잘못 되었다..?둘다 gpu를 사용하는걸로 보아 지금의 방식으로는 하드웨어 렌더링이 일어나는지 확인할 방법이 없어보입니다.
d2 - 하드웨어 가속에 대한 이해와 적용 블로그를 참고하여 확인을 해봤을때 결과는 다음과 같습니다.
사진은 translate(150px, 150px)의 결과 입니다.
간단하게 설명하자면
오른쪽 레이어에 로드된 부분들이 gpu에 올라가서 하드웨어 가속이 진행된다고 보면 된다고 하는데 2D와 3d의 결과가 크로미움 기반의 브레이브 브라우저와 크롬 브라우저 모두 동일하게 gpu를 사용한다고 나옵니다.
결론
확실하지는 않지만 최신의 크로미움 기반의 브라우저들은 transform 속성을 2d, 3d구분 없이 하드웨어 가속이 사용 가능한거 같다!
번외 - trasform 2d vs top, left
transform 2d, 3d의 가속에 의한 속도 차이는 없는걸로 보입니다.
그렇다면 만약 요소를 top, left 속성을 이용해 옮길경우는 어떻게 될까 궁금해서 실험을 진행해 보겠습니다!
사진을 보아서는 li태그가 gpu에 업로드 되는 요소에서는 사라진걸로 보아 더 효율적인 사용이 가능해 졌다고 생각했지만 좌측 상단의 프레임 레이트를 보면 이벤트가 엄청 추가되는걸 볼 수 있습니다.
이벤트 로그 비교
top, left를 사용한 이벤트 로그
transfrom()을 사용한 이벤트 로그
두 이벤트 로그를 비교한 결과
- top, left 속성을 사용하면 10ms 마다 스타일을 계산 해서 cpu의 로드율이 올라가는걸로 보입니다.(+ 레이웃을 다시 그리는 LS 이벤트도 일어나는걸로 보입니다)
- transform() 속성을 사용하면 150ms 마다 스타일을 계산 해서 top, left속성에 비해 더 적은 자원으로 처리가 가능한 것이 보입니다.
translate()으로 처리가 가능할 경우 top,left 속성보다는 translate()를 사용하여 처리하는 쪽이 성능면에서 더 좋아 보입니다!
참고
