24

मैं क्रोम देव उपकरण v27 में टाइमलाइन का उपयोग कर निम्नलिखित कोड के मेमोरी उपयोग को प्रोफाइल कर रहा हूं।अनुरोधएनीमेशन फ्रेम कचरा संग्रह

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv='content-type' content='text/html; charset=UTF-8' /> 
    <title>RAF</title> 
</head> 
    <body> 
    <script type='text/javascript' charset='utf-8'> 
     var frame = function() { 
     window.webkitRequestAnimationFrame(frame); 
     }; 
     window.webkitRequestAnimationFrame(frame); 
    </script> 
    </body> 
</html> 

ध्यान दें कि यह आसान है। लेकिन अंततः मुझे एक दांत पैटर्न दिखाई देता है जो इंगित करता है कि कचरा कलेक्टर स्मृति को पुनः प्राप्त कर रहा है।

Chrome Dev Tools Timeline

आरएएफ डिफ़ॉल्ट रूप से कचरा वस्तुओं को बनाने करता है? क्या इससे बचने का कोई तरीका है? धन्यवाद।

+0

संबंधित। इस क्षेत्र में अधिक संभावित मुद्दे दिखाई देते हैं। मैं शायद इस पूरे मेमोरी मॉनिटरिंग टूल के आउटपुट को नमक के अनाज के साथ लेने की सलाह दूंगा? ईमानदारी से, मुझे सच में यकीन नहीं है कि इनमें से किसी से क्या निष्कर्ष निकालना है। http://stackoverflow.com/questions/19395565/chrome-requestanimationframe-issues –

+0

यदि कोई और ऐसा करने के इच्छुक है तो मैं इस पर एक बक्षीस डालूंगा:> पहले से ही सोच रहा था कि क्या यह दो कार्यों को फ़्लिप करने में मदद कर सकता है एक दूसरे को पंजीकृत फ्लॉप। –

उत्तर

2

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

किसी भी तरह से मैं इसके बारे में चिंता नहीं करता। यदि आप अपना ऐप या पेज कलाकार प्राप्त करने का प्रयास कर रहे हैं तो पता करने के लिए बहुत बड़े मुद्दे हैं। जब तक जेएस 16ms से कम में पूरा हो जाता है, तब तक कोई भी कुछ भी नहीं देख पाएगा।

सबसे बड़ी मेमोरी/सीपीयू समस्याएं हैं: नेटवर्क कॉल, पीएनजी/जेपीजी को डीकंप्रेस करना, डीओएम तत्वों को बनाना और नष्ट करना, गैर-कार्यकर्ता थ्रेड पर डेटा प्रोसेसिंग/पार्सिंग करना, जीपीयू बनावट का खराब उपयोग और डेटा के बहुत सारे आवंटन के कारण डेटा इकट्ठा करने के लिए जीसी लेने में लंबा समय लगता है।

मैं क्रोम (https://github.com/puppybits/BackboneJS-PerfView) पर 120FPS पर चलाने के लिए 1,000,000 आइटमों के साथ स्क्रॉल सूची को अनुकूलित करने में सक्षम था। प्रदर्शन टूल आपको उपयोगकर्ता को देखे जाने वाले सबसे बड़े मुद्दों को ढूंढने में मदद कर सकते हैं और आपको मामूली चीजों के बारे में चिंता करने की आवश्यकता नहीं है।

+0

अरे वहाँ! क्या आपको कोई विचार है कि आरएएफ एनिमेशन के लिए इस विचार का उपयोग कैसे किया जाए? – thednp

4

enter image description here

मैं निम्नलिखित बाहर पाया है: आप कार्यों की तरह दो "पिंगपांग" में अपने आरएएफ समारोह बदलते हैं तो आप बहुत कम कचरा मिलता है। आप पहले प्रारंभिक "बड़े जीसी" से नहीं बच सकते हैं, लेकिन उसके बाद आप 700kb-1mb जीसी के बजाय लगभग 50 केबी के केवल मामूली जीसी देखते हैं। कोड इस तरह दिखेगा:

<script type='text/javascript' charset='utf-8'> 
    window.frameA = function() { 
    window.webkitRequestAnimationFrame(window.frameB); 
    }; 
    window.frameB = function() { 
    window.webkitRequestAnimationFrame(window.frameA); 
    }; 
    window.webkitRequestAnimationFrame(window.frameA); 
</script> 

मुझे लगता है कि यह क्रोम में आप सबसे अच्छा कर सकते हैं। मैंने देखा कि एफएफ में जीसी अंतराल या स्मृति शायद ही कभी बदलती है, इसलिए शायद यह क्रोम डीबगिंग सामग्री से संबंधित है (अधिक जानकारी के लिए उपरोक्त लिंक की गई क्रोम बग रिपोर्ट देखें)। हालांकि, मैंने इस तरह के आरएएफ को तैनात करते समय अपने खेल में सुधार देखा - और बिल्ली मुझे कृत्रिम जीसी के बिना इसे डीबग करने में सक्षम होना चाहिए जो सामान्य उपयोगकर्ताओं मशीनों पर नहीं होगा।

+1

मैं यह काम कहने के लिए चौंक गया हूं। आश्चर्यजनक खोज, मैं यह भी कल्पना नहीं कर सकता कि आपने इसे किस प्रकार किया है।:) – Jaruba

+0

मुझे यह काम नहीं दिख रहा है – kevzettler

+0

केवज़ेटलर: यह हमेशा एक हैक था जो (उम्मीद है) एक दिन अप्रचलित हो जाएगा। क्या आप हमें बता सकते हैं कि आपने किस ब्राउजरवर्जन का परीक्षण किया था? क्या आप अभी भी सामान्य रूप से जीसी समस्या का पालन करते हैं? मैं तदनुसार जवाब संपादित करूंगा। –

संबंधित मुद्दे