translate3d 대 번역 성능
이제 우리 모두는 특히 그 멋진 기사 를 통해 위치를 애니메이션하는 데 css-transforms를 선호해야한다는 것을 알고 있습니다.
그러나 우리는 사이의 선택을 가지고 translate()와 translate3d()...
일반적으로 어느 것이 더 빠릅니까?
실행 테스트 아래이 사이트는 비교 translate(), translate3d()그리고 몇 가지 다른 속성. 그것에 따르면 translate3d()대부분의 브라우저에서 더 빠릅니다.
http://jsperf.com/translate3d-vs-xy
translate3d를 사용하면 CSS 애니메이션이 하드웨어 가속으로 푸시됩니다. 기본 2D 번역을 수행하려는 경우에도 translate3d를 사용하여 더 많은 힘을 얻으십시오! 따라서 'T3d'는 CSS 애니메이션이 애니메이션을 3D 파워로 푸시하도록 지시하기 때문에 더 좋습니다! 그것이 더 빠른 이유입니다. (Cameron Little의 대답이 증거입니다)
cameron이 제안했듯이 translate3d대부분의 브라우저에서는 렌더링 속도를 높이기 위해 gfx 하드웨어 가속을 사용하는 브라우저에서 더 빠릅니다. 특히 웹킷 translate3d에서는 페이지 항목에 하드웨어 가속을 강제하는 선호되는 방법이었습니다.
경험상 때때로 3d 변환을 사용하는 데 한 가지 단점이 있습니다. 특정 브라우저 버전 / OS 조합 (osx + safari 내가보고 있습니다)에서 하드웨어 가속 렌더링은 글꼴 다듬기 및 보간을 약간 변경하여 약간의 깜박임 또는 흐림. 이러한 상황은 대부분 해결할 수 있지만 명심해야합니다.
참조 URL : https://stackoverflow.com/questions/22111256/translate3d-vs-translate-performance
'Development Tip' 카테고리의 다른 글
| Python 3 인터프리터에 JIT 기능이 있습니까? (0) | 2020.12.30 |
|---|---|
| Express.js 응답 시간 초과 (0) | 2020.12.30 |
| Windows에서 PostgreSQL을 시작하는 방법 (0) | 2020.12.30 |
| Docker-Compose를 사용하는 경우 및 Docker-Swarm을 사용하는 경우 (0) | 2020.12.30 |
| 브랜치가없는 태그에 대한 Git 커밋 (0) | 2020.12.30 |