प्रदर्शन CSS3 CSS3 एनीमेशन (क्रोम डेवलपर टूल्स में अभी भी सरल एनीमेशन नहीं)

Question

मैं सीएसएस पेज संक्रमण को Google क्रोम में अच्छा प्रदर्शन करने के लिए एक रास्ता खोजने के साथ संघर्ष कर रहा हूं।

टाइमलाइन पर क्रोम डेवलपर टूल में मैंने कुछ लाल मार्करों को देखा और वे सभी एक ही बात कहते हैं: लंबे फ्रेम के समय जंक और खराब प्रतिपादन प्रदर्शन का संकेत हैं। रेंडरिंग प्रदर्शन पर वेब फंडामेंटल्स गाइड पर और पढ़ें।

जिस ऐप पर मैं काम कर रहा था उस पर कानूनी लग रहा था और मैंने जांच करने की कोशिश की, लेकिन स्रोत नहीं मिला।

मैं एक सरल डेमो बनाने है और मैं अभी भी लाल मार्कर मिलती है: http://codepen.io/anything/full/qOOpza/

.page { 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    background:#ccc; 
    &--1 { 
    background:green; 
    } 
    &--2 { 
    background: yellow; 
    } 
    &.moveToRight { 
     animation: moveToRight ease .5s; 
     animation-fill-mode: forwards; 
    } 

    &.moveToLeft { 
     animation: moveToLeft ease .5s; 
     animation-fill-mode: forwards; 
    } 
} 


@keyframes moveToRight { 
    from { } 
    to { transform: translateX(100%); } 
} 

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

Answer 1

मैं चारों ओर ytour डेमो के साथ खेल रहे हैं, और मैं 2 मुद्दा नहीं मिला:

सबसे पहले, अनुवाद से बदलना 3 डी में सुधार (कम से कम मेरे सिस्टम में) प्रदर्शन थोड़ा सा। तो, यह

@keyframes moveToRight { 
    from {  transform: translate3d(0%, 0px, 0px); } 
    to {  transform: translate3d(100%, 0px, 0px); } 
} 

लिखना बेहतर है। (यह कई बार पहले बताया गया है, लेकिन यह जांचना हमेशा अच्छा होता है)।

इसके अलावा, एक नई संपत्ति को कुछ हद तक मदद करनी चाहिए। सेटिंग

बदलेगा: परिवर्तन;

इस संपत्ति में भविष्य के बदलाव के लिए ब्राउज़र को तैयार करना चाहिए। लेकिन मैं कोई अंतर नहीं देख पा रहा हूं।

दूसरा, क्रोम आंकड़ों को इकट्ठा करने के तरीके में एक समस्या प्रतीत होती है। आपके पास "स्क्रीनशॉट" सक्षम है। और यह देरी का मुख्य कारण प्रतीत होता है, उस समय क्रोम को स्क्रीनशॉट प्रस्तुत करने और स्टोर करने की आवश्यकता होती है।

परिभाषा के अनुसार, अपने काम करने के लिए प्रदर्शन उपकरण द्वारा आवश्यक समय विश्लेषण में गणना नहीं की जानी चाहिए। लेकिन ऐसा लगता है कि यह मामला नहीं है ... मैं कहूंगा कि यह एक बग है।

कम से कम मेरे मामले में, दोनों मुद्दों को बदलने लाल मार्कर लगभग गायब हो जाते हैं

और, शेष चिह्नित फ्रेम में, वहाँ किसी भी प्रदर्शन मुद्दा हो प्रतीत नहीं होता है बनाता है। स्क्रीनशॉट में नोटिस कि फ्रेम अवधि 25.57 मीटर लंबा है, लेकिन सीपीयू का समय 1.239 एमएस है।