मैं एक पेज सुंदर (मध्य वजन बल्कि) भारी canvas संचालन हो रहा है कि नहीं है। मोबाइल उपकरणों और पुराने कंप्यूटरों पर उपयोगकर्ताओं को पूरा करने के लिए मैं सोच रहा था कि मैं एक तंत्र को कार्यान्वित कर सकता हूं जो जांच करेगा कि कैनवास तत्व वास्तव में दिखाई दे रहा है और यह तय करता है कि निरंतर गणना और कैनवास अपडेट (30fps पर चल रहे एनीमेशन) को करना है या नहीं ।क्या ब्राउज़र कैनवास तत्व प्रस्तुत करते हैं जो व्यूपोर्ट के अंदर नहीं हैं?
यह ठीक काम कर रहा है, फिर भी क्रोम देव टूल्स के साथ एक प्रदर्शन परीक्षण करते समय मैंने देखा कि जब भी मैं अपनी दृश्यता जांच अक्षम करता हूं और केवल चीजों को प्रस्तुत करने देता हूं तो प्रश्न में सीपीयू का उपयोग काफी हद तक गिर जाता है जब कैनवास तत्व का कोई भाग दिखाई नहीं दे रहा है (हालांकि सिद्धांत में यह अभी भी वही कार्य कर रहा है)। तो: कम से कम मेरे कंप्यूटर पर क्रोम 17 चल रहा है, यदि मैं तत्व की वास्तविक दृश्यता की जांच करता हूं तो यह वास्तविक अंतर नहीं बनाता है।
एक लम्बी कहानी ही समाप्त हो करने के लिए: मैं यह करने की जरूरत है या ब्राउज़र यहां तक कि उन्हें बताए बिना इस तरह के मामले को संभालने के लिए बहुत चालाक हैं करते हैं (और मैं दृश्यता जाँच बचा सकता है)?
संपादित:
इसलिए मैं इस विषय पर कुछ "अनुसंधान" बना दिया है और बनाया this fiddle.
क्या होता है कि यह सिर्फ प्रति सेकंड 30 फ्रेम शोर उत्पन्न करता है। आंखों के लिए बहुत प्रसन्न नहीं है, लेकिन ... अच्छा हिस्सा व्यूपोर्ट को ब्लॉक करने के लिए सिर्फ एक सादा div है। जब मैं स्क्रॉल करता हूं और व्यूपोर्ट में canvas तत्व है CPU उपयोग मुझे बताता है कि यह लगभग 40% ले रहा है, तो स्पष्ट रूप से ब्राउजर के पास बहुत कुछ करना है। जब मैं बैक अप करता हूं तो मेरे पास मेरे व्यूपोर्ट में मैरून रंग div है और सीपीयू उपयोग को प्रोफाइल करने के लिए यह लगभग 10% तक गिर जाता है। जब मैं नीचे स्क्रॉल करता हूं: उपयोग फिर से बढ़ जाता है।
तो जब मैं की तरह एक दृश्यता की जांच लागू इस modified fiddle में, मैं वृद्धि (एक छोटे से एक ईमानदार होना) एक बूंद के बजाय CPU उपयोग में देखते हैं (जैसा कि कैनवास अगर जाँच के अतिरिक्त कार्य है कर व्यूपोर्ट के अंदर है)।
तो मैं अब भी सोच रहा हूं कि यह किसी चीज का कुछ दुष्प्रभाव है जिसे मैं जानता हूं (या मैं प्रोफाइलिंग करते समय कुछ बड़ी गलती कर रहा हूं) या यदि मैं ब्राउज़र को ऐसी स्थितियों को संभालने के लिए पर्याप्त स्मार्ट होने की उम्मीद कर सकता हूं?
किसी को भी उस पर एक प्रकाश डाला सकता है मैं बहुत आभारी होगी!
वाह, उस सुपर गहन उत्तर के लिए बहुत बहुत धन्यवाद! मैंने पहले 'अनुरोधएनीमेशन फ्रेम' के बारे में सुना है, लेकिन मुझे हमेशा इसके बारे में क्या गड़बड़ है कि ऐसा लगता है कि यह 60fps पर चलने वाली एनीमेशन के लिए लक्षित है (जो मुझे लगता है कि कई प्रकार के एनीमेशन के लिए बहुत चिकनी लग रहा है)। इसे सीमित करने का एकमात्र तरीका मैं एक बार फिर से 'सेट इंटरवल' शामिल करने के बारे में सोच सकता था .... क्या आपको पता है कि क्या इसे प्रतिबंधित/बदलने का कोई तरीका है? – m90
बहुत चिकनी है? मैंने कभी एनीमेशन के बारे में नहीं सुना है जो बहुत चिकनी है, उसके साथ क्या गलत है? : एस – AshleysBrain
शायद अजीब लग सकता है, फिर भी मेरे पास शास्त्रीय एनीमेशन में पृष्ठभूमि है इसलिए मैं वास्तव में 12fps पर सोचता हूं, ऐसा सोच रहा हूं कि यह अब तक मेरे दिमाग का हिस्सा है। 95% मामलों में मेरा आपत्ति मूर्खतापूर्ण हो सकती है, फिर भी कुछ मामलों के लिए अधिक नियंत्रण रखना बहुत ही अच्छा होगा। – m90