CSS matrix3d가 CSS 위치보다 빨리 렌더링되는 이유는 무엇입니까?

의 내가 왼쪽에서 오른쪽으로 요소를 이동하고 싶은 말은하자, 나는 CSS matrix3d가 CSS 위치보다 빨리 렌더링되는 이유는 무엇입니까?

transform: matrix3d(x,x,x,x,x,x,x,x,x,x,x,x,200,x,x,x)

transform: translate3d(200px,0,0); 
/*or*/ 
transform: translateX(200px);

또는

을 수행하여이를 달성하거나 left position을 설정할 수 있습니다.

위치를 설정하는 것보다 CSS 매트릭스 3d가 더 빨리 렌더링되는 이유 왼쪽/위? enter image description here

는 UPDATE :

는

matrix3d를 '왼쪽'으로 설정하는 것보다 빠르게 만들 필요가 없으므로 어떤 브라우저를 추가해야합니다. 그러나,'matrix3d'를 설정하면 브라우저에서 하드웨어 가속을 사용하기 때문에 그럴 것이라고 생각됩니다. – zneak

막대의 설명을 읽었습니까? '초당 연산 수 (더 높을수록 좋다) ' –

@ t.niese 고맙습니다. –

보다 2 개 요인이있다, 여기

1) 잠재적 페이지에있는 모든 레이아웃에 영향을 미칠 수있는 남아 있기 때문에 관련이 그래서 그것은 스타일과 레이아웃의 재 계산을 강요합니다. 변환은이 단계를 필요로하지 않으며, 변환은 이웃 요소를 손상시키지 않습니다.

대부분의 3d 작업은 GPU가 아닌 CPU에 의해 처리되기 때문에 더 나은 설명

2)에 대한 html5 - high performance animations를 참조하십시오. GPU를 사용하면 훨씬 빠르게 처리 할 수있을뿐 아니라 CPU가 나머지 작업을보다 효율적으로 처리 할 수 있습니다. 당신은 많은 시간을

transform: translateZ(0px);

느릅 나무는 분명 아무것도하지 않는 스타일을 볼 수 있지만 그것은 broser가 GPU를 사용하게하고 프로세스를 가속화합니다. 이 줄을 추가하고 왼쪽의 변경 사항을 측정하고 성능을 확인하십시오.

2014-12-11 22:12:14 vals

답변