CSS 블렌드 모드에서 실제로 GPU를 사용합니다.

"오버레이"혼합 모드로 레이어를 사용하는 웹 사이트에서 작업하고 있습니다. 이 레이어는 배경에 그라디언트 효과를 만들기 위해 움직입니다. CSS 애니메이션을 사용하여 GPU 렌더링을하고 있지만 꽤 무거워서 웹 사이트가 열리고 렌더링 될 때마다 컴퓨터에서 팬의 소리를들을 수 있습니다.CSS 블렌드 모드에서 실제로 GPU를 사용합니다.

과열 문제를 줄이기 위해 성능을 어떻게 향상시킬 수 있는지 알 수 없습니다. 너 나 좀 도와 줄 수있어? 여기

웹 사이트의 관련 부분 :

HTML

<div class="backgroundTransparent"> 
    <img id="img1" class="transparent_background" src="{{ url_for('static', filename='calques_de_fond_1.png') }}"> 
    <img id="img2" class="transparent_background" src="{{ url_for('static', filename='calques_de_fond_2.png') }}"> 
    <img id="img3" class="transparent_background" src="{{ url_for('static', filename='calques_de_fond_3.png') }}"> 
    <img id="img4" class="transparent_background" src="{{ url_for('static', filename='calques_de_fond_4.png') }}"> 
    <img id="img5" class="transparent_background" src="{{ url_for('static', filename='calques_de_fond_5.png') }}"> 
    <img id="img6" class="transparent_background" src="{{ url_for('static', filename='calques_de_fond_6.png') }}"> 
</div>

CSS 그것을 할 수있는 경우는, 지금처럼 여기

@keyframes move { 
    from { 
     transform: translateX(0); 
    } 

    to { 
     transform: translateX(20%); 
    } 
} 
.transparent_background { 
    height:100%; 
    width: 100%; 
    position: absolute; 
    transform: translateZ(0); 
    mix-blend-mode: overlay; 

    animation-duration: 3s; 
    animation-name: move; 
    animation-iteration-count: infinite; 
    animation-direction: alternate; 
}

사이트에 대한 링크입니다 도움 : http://brunobosse.wiboyd.fr:8080

또한 중요하지 않을 수도 있습니다. 레어 블렌드 모드로 연주하는 것이 훨씬 좋습니다. 오버레이 혼합 모드를 향상시킬 수 있습니까?

출처

2017-02-02 Arnaud Miguet

변환하는 이미지의 크기는 얼마나됩니까? SVG 이미지를 위해 PNG 이미지를 바꿔보십시오. –

이미지는 약 100KB이고, SVG와 더 작은 것들로 시도해 보겠습니다. –

약간의 주제에서 벗어나지 만, 아무런 문제가 없다면 과열 문제가되지는 않을 것입니다. 집중적 인 작업을하는 동안 팬이 회전하는 것은 정상적인 동작입니다. 애니메이션에 실제 가시적 인 성능 손실이 있습니까? – Roope

그래서 GPU가 너무 강렬하기 때문에 배경에 오버레이를 적용하지 않아 결국 DOM의 더 작은 요소에만 적용됩니다.

출처

2017-02-02 14:30:58

CSS 블렌드 모드에서 실제로 GPU를 사용합니다.

답변

관련 문제