Google DevTool टाइमलाइन: जबरन रिफ्लो संभावित प्रदर्शन बाधा

Question

मैंने अपने पृष्ठ पर लंबन प्रभाव जोड़ा है। और अब मैं प्रदर्शन और एफपीएस और कई सवाल के साथ समस्याओं :-)

मैं transform3d और requestAnimationFrame का उपयोग यह महसूस करने के लिए (इस तरह की सिफारिश की http://www.html5rocks.com/en/tutorials/speed/animations/) है।

मेरे कोड इस तरह दिखता है:

मजबूर पुनर्प्रवाहित संभावना प्रदर्शन टोंटी है

कॉल:

window.addEventListener('scroll', function() { 
    latestKnownScrollY = window.scrollY; 
}); 

function updateParallax() { 
    var y = latestKnownScrollY * 0.4; 
    element.style.transform = 'translate3d(0, ' + y + 'px, 0)'; 
    requestAnimationFrame(updateParallax); 
} 

updateParallax(); 

कभी कभी मैं स्क्रीनशॉट पर की तरह चेतावनी हैपर स्टैक अंक।

लेकिन यह चेतावनी केवल कभी-कभी क्यों दिखाई देती है? मैं window.scrollY प्रत्येक स्क्रॉल ईवेंट का उपयोग करता हूं।

Answer 1

प्रत्येक बार जब आप window.scrollY पढ़ते हैं, तो आप एक रिफ्लो का कारण बन रहे हैं। इसका मतलब यह है कि ब्राउज़र आपको मूल्य देने के लिए शैलियों और लेआउट की गणना कर रहा है।

यह कहता है कि यह संभावित एक प्रदर्शन समस्या है क्योंकि इसमें समय लगता है और तुल्यकालिक है। यदि आप गुणों को पढ़ते हैं, सेट करते हैं, पढ़ते हैं, सेट करते हैं, पढ़ते हैं, सेट करते हैं, या यदि आपके पास एक लूप के अंदर इस तरह की चीज है, तो यह तब तक बाधा उत्पन्न करेगी जब तक कि यह आपके द्वारा रिफ्लो ट्रिगर करने पर पूरे पृष्ठ को फिर से खींचा जा सके। समाधान आमतौर पर आपको जो कुछ भी चाहिए उसे पढ़ता है, फिर उसे बदलने के लिए आवश्यक सब कुछ सेट करें।

लेकिन आपके मामले में यह कोई समस्या नहीं होनी चाहिए। यह कहता है कि यह सिर्फ 2 एमएस लेता है और यह सिर्फ एक बार कर रहा है। क्या आपको कोई प्रदर्शन समस्या दिखाई देती है? जब आप स्क्रॉल करते हैं तो एक अंतराल की तरह?