जब देव कंसोल ऊपर होता है तो मुझे क्रोम में बेहतर प्रदर्शन क्यों मिलता है?

Question

मैं वर्तमान में स्क्रैच से शुद्ध जावास्क्रिप्ट में लिखे गए एक छोटे कैनवास गेम पर काम कर रहा हूं।

खेल एक 2d प्रकाश एल्गोरिथ्म similar to this one शामिल है, लेकिन एक प्रकाश स्रोत और 25 बहुभुज जो फ्रेम प्रति के बारे में 30,000 की गणना के लिए बनाता है।

मेरी फ्रेम दर हैफ़ारी में सफारी में, क्रोम में मेह, और फ़ायरफ़ॉक्स में अनुपयोगी है। हालांकि, अगर गेम खेलने के दौरान मेरे पास क्रोम डेवलपर कंसोल है, तो फ्रेम दर सफारी के समान ही है।

इसका कारण क्या हो सकता है?

---

के बाद टिप्पणी सुझाव विंडो का आकार फ्रेम दर प्रभावित हो सकता है, मुझे पता चला है कि छोटे खिड़की, चिकनी खेल रन लेकिन केवल क्रोम में। स्क्रीन पर खींची गई राशि या गेम द्वारा उपयोग की जाने वाली किसी भी गणना स्क्रीन आकार पर निर्भर नहीं होती है।

मैं आंख से विशुद्ध रूप से फ्रेम दर अंतर को मापने के लिए, और आप इन gifs में प्रभाव देख सकते हैं:

बुरा, बड़े खिड़की:

अच्छा, छोटी सी खिड़की:

यह गेम ब्राउज़र में बहुत आसान है, इन gifs में स्पष्ट है, लेकिन प्रभाव अभी भी ध्यान देने योग्य है।

मैं पोस्ट किए गए लिंक में पहले उदाहरण के साथ ऐसा ही प्रभाव प्राप्त कर सकता हूं। क्या यह सिर्फ मुझे है या किसी और को भी वही प्रभाव मिलता है?

---

यहां तक ​​कि अजनबी ... मुझे होम फीड स्क्रॉल करते समय फेसबुक जैसी कई अन्य वेबसाइटों पर भी यही प्रभाव पड़ा। खिड़की जितनी बड़ी होगी, स्क्रॉलिंग हो रही चॉपपियर। क्या यह क्रोम विशिष्ट चीज है, क्या कोई भी इसी तरह के परिणाम प्राप्त कर रहा है?

Answer 1

मैंने इसे अपने पृष्ठों/अनुप्रयोगों में भी देखा है। यह मुद्दा किसी भी चीज़ पर लागू होता प्रतीत होता है, लेकिन कैनवास और त्वरित सीएसएस के साथ अधिक स्पष्ट है। जहां तक ​​मैं कह सकता हूं, यह समस्या क्रोम के composited layer rendering से संबंधित एक प्रदर्शन बग है। असल में, क्रोम पृष्ठ को परतों में विभाजित करता है और उन परतों को प्रस्तुत करने के लिए GPU का उपयोग करता है। आप देव कंसोल पर "रेंडरिंग" टैब में "मिश्रित परत सीमाएं दिखाएं" विकल्प सक्षम करके इन्हें देख सकते हैं। परतों को बदलने या नहीं, भले ही समग्र परतों की संख्या बढ़ जाती है, क्रोम का एफपीएस प्रदर्शन घटता है।

यहां एक स्वतंत्र उदाहरण है। पुन: पेश करने के चरण: http://www.subcide.com/experiments/fail-whale/

Chrome डेवलपर खिड़की लाओ (इसे बाहर पॉप तो यह एक स्वतंत्र है:

1. लोड क्रोम में इस पेज है, यह एक अपेक्षाकृत सरल एनिमेटेड सीएसएस डेमो वह यह है कि अपने खेल की तरह एक निश्चित आकार है खिड़की) और "एफपीएस मीटर दिखाएं" विकल्प सक्षम करें।
2. खिड़की को छोटा आकार दें ताकि इसमें असफल व्हेल डेमो हो। अपने एफपीएस नोट करें।
3. अब विंडो को बड़ी या पूर्ण स्क्रीन का आकार दें। अपने एफपीएस नोट करें।

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

इसलिए आपका dev console खुला होने पर बेहतर प्रदर्शन क्यों दिखता है क्योंकि आपके पास पृष्ठ के साथ आपका dev console इनलाइन/एम्बेडेड है, जो पृष्ठ को खोलने पर पृष्ठ को छोटा बनाता है। इसका परिणाम क्रोम को संभालने के लिए कम समग्र परत वाले पृष्ठ में होता है, जिसके परिणामस्वरूप बेहतर एफपीएस होता है। यदि आप अपने डेवलपर कंसोल को पॉप करते हैं तो यह एक स्वतंत्र विंडो है और पेज आकार को प्रभावित नहीं करती है, तो आपका एफपीएस देव कंसोल से ऊपर या नहीं प्रभावित होगा।

ऐसा लगता है कि यह क्यों हो रहा है "क्यों"। अब, अगर कोई का आंकड़ा करता है तो इसके बारे में क्या किया जा सकता है, मुझे निश्चित रूप से जानना होगा।