GPU त्वरण धुंधला सामग्री

Question

प्रश्न: क्यों मेरी सीपीयू रजिस्टर करता ~ 30% जब कोई कलंक एक एनिमेटेड वस्तु पर लागू होता है जब कलंक बनाम ~ 6% लागू किया जाता है?

विवरण:

मैं एक पेज सौंपा एक सीएसएस एनीमेशन है (एक सीएसएस फ़ाइल में) पर अनियमित रूप से उत्पन्न वस्तुओं का एक सेट है और चौड़ाई, ऊँचाई के लिए बेतरतीब ढंग से उत्पन्न मूल्यों, और महत्वपूर्ण बात, धुंधला, लागू किया पंक्ति में।

सीएसएस फ़ाइल शैलियों लगता है:

animation-name: rise; 
animation-fill-mode: forwards; 
animation-timing-function: linear; 
animation-iteration-count: 1; 
-webkit-backface-visibility: hidden; 
-webkit-perspective: 1000; 
-webkit-transform: translate3d(0,0,0); 

transform: translateZ(0); 

चौड़ाई, ऊंचाई और कलंक style विशेषता के माध्यम से इनलाइन लागू होते हैं।

<div class="foo" style="width:99px;height:99px; 
         filter:blur(2px); 
         -webkit-filter:blur(2px) opacity(0.918866247870028); 
         -moz-filter:blur(2px) opacity(0.918866247870028); 
         -o-filter:blur(2px) opacity(0.918866247870028); 
         -ms-filter:blur(2px) opacity(0.918866247870028);"></div> 

धुंध सक्षम होने के साथ मेरा सीपीयू उपयोग ~ 30% है। जब मैं धुंध को अक्षम करता हूं, तो CPU उपयोग ~ 6% तक चला जाता है।

यहां क्या हो रहा है? क्रोम केवल तब लागू होता है जब कोई ब्लर लागू नहीं होता है? यदि हां, तो क्यों?

अद्यतन 1:

एनीमेशन rise इस प्रकार दिखता है:

@keyframes rise { 
    0% { 
     transform: translateY(0px); 
    } 
    100% { 
     transform: translateY(-1000px); 
    } 
} 

Answer 1

इनलाइन शैलियों में यह धुंधला है। स्टाइल फ़ाइल में अपना धुंध डालें।

Answer 2

मुझे नहीं लगता कि धुंध वास्तव में आपके मुद्दों का कारण बन रहा है, ऐसा लगता है कि यह पहले से अधिक ध्यान देने योग्य लगता है। समस्या यह है कि आपकी एनीमेशन में transform: translateYtransform: translateZ(0) ओवरराइट कर रहा है जिसका उपयोग आप GPU त्वरण को मजबूर करने के लिए कर रहे हैं।

यह एक समय कोड आप अभी चल रहे हैं के लिए रिकॉर्डिंग है, ध्यान दें कि किस वहाँ मुख्य और रास्टर थ्रेड पर यह सब गतिविधि है:

अब एक रिकॉर्डिंग करने के लिए इस तुलना मैं कहाँ .foo को will-change: transform लागू:

कोई गतिविधि मुख्य और जो भी रेखापुंज पर।

इसे ठीक लागू करने के लिए दो कदम है:

1. .foo को will-change: transform लागू करें। इससे ब्राउजर को पता चलेगा कि आप उस संपत्ति को बदलने का इरादा रखते हैं और इसके लिए जीपीयू पर उस तत्व को प्रस्तुत करना है।

2. इस समय एज और आईई का कोई संस्करण will-change का समर्थन नहीं करता है। इसलिए हम जीपीयू त्वरण को मजबूर करने के लिए एनीमेशन में transform: translate3d(0, -1000px, 0); का उपयोग करेंगे। ध्यान दें यह एक हैक है, इसलिए हम will-change के लिए समर्थन का पता लगाएंगे और इसका समर्थन करने वाले ब्राउज़र में transform: translateY का उपयोग करेंगे।

अंतिम कोड:

@keyframes rise { 
    0% { 
     transform: translate3d(0, 0, 0); 
    } 
    100% { 
     transform: translate3d(0, 1000px, 0); 
    } 
} 

@supports (will-change: transform) { 
    @keyframes rise { 
     0% { 
      transform: translateY(0px); 
     } 
     100% { 
      transform: translateY(1000px); 
    } 
    } 
} 

div { 
    width: 100px; 
    height: 100px; 
    background: #f00; 
    animation: rise forwards 2s linear infinite; 
    will-change: transform; 
} 

यहाँ एक काम संस्करण के लिए देखें: http://jsbin.com/mosuvikoto/edit?html,css,output