CSS 불투명도 필터가 불투명도 속성보다 빠릅니까?

https://stackoverflow.com//questions/22051391

21-12-2019
|

문제

일반적으로 CSS의 불투명도 '속성은 하드웨어가 가속되지 않지만 하드웨어 가속을 사용하여 필터를 구현하는 일부 브라우저는 훨씬 더 나은 성능을 위해 필터 버전의 불투명도 버전을 가속화합니다.

이는 성능 - 집중적 인 응용 프로그램에서는 불투명도 속성 대신 불투명도 필터를 사용해야한다는 것을 의미합니다.예를 들어 0.5의 불투명도 속성이있는 이미지 아래에 캔버스를 렌더링합니다.대신 필터를 사용해야합니까?이 필터 속성을 사용할 때 하나의 성능이 향상되는 방법은 어떻게 이익이 될 수 있으며, 어떤 플랫폼에서 눈에 띄는 개선이 가능할 수 있습니까?

해결책

첫째, CSS3 필터 효과는 아직도 초안 표준 및 브라우저 지원은 변합니다 . 그래서 당신이 정말로 필요 여부를 두 배로 생각하십시오 (예 : CSS 필터) 실제 세계 기사에서 (04.2013) 렌더링 아티팩트를보고합니다). WebKit의 하드웨어 가속 및 Chrome에서 합성을 가속화 CSS2에 대한 차별이 없으면 두 가지가 가속화됩니다. 또는 CSS3 (있을 경우 놀라지).

두 번째, PC 매거진에있는 리뷰 (01.2013) IE 및 Firefox 팀의 온라인 벤치 마크 결과를 보여줍니다. 캔버스, 입자 및 CSS (회전) 벤치 마크가 있습니다. Maxthon (WebKit 사용) 및 오페라 버전은 가속을 지원하지 않으므로 성능 향상에 대한 힌트를 제공합니다. 투명성에 관해서는 재명 이외의 계산이 적어 지므로이 특정 조작에 대한 차이를 알려주지 않아야합니다.

다른 팁

*는 * GPU가 가속화 된 몇 가지 CSS 속성 중 하나라는 것을 여기에 말합니다. https://plus.google.com/ + + + yostsman/posts/atreryczpts

또한 여기에서 볼 수있는 브라우저 전반의 필터에 대한 필터가 심각한 부족이 있습니다. http://caniuse.com/#search=Opacity .

불투명도 속성은 훨씬 쉽게 사용하기가 훨씬 쉽습니다.

당신이 가진 것을 붙잡고 싶습니다.

라이센스 : CC-BY-SA ~와 함께 속성

제휴하지 않습니다 StackOverflow