क्या यह पता लगाना संभव है कि जावास्क्रिप्ट में मॉनीटर फ्रेम दर क्या है?

Question

1. सबसे पहले, क्या जावास्क्रिप्ट (अधिकांश एलसीडी मॉनीटर के लिए 60 हर्ट्ज) में मॉनिटर फ्रेम/रीफ्रेश दर क्या है?
2. दूसरे, वहाँ किसी भी तरह से हर एक्स फ्रेम के बाद एक समारोह को अंजाम कहने के लिए है?

कई लोगों ने पूछा क्यों मैं इस की जरूरत है। यहां संदर्भ है: मेरे पास एक एनीमेशन है (एक अंतहीन पाश जो एक फ्रेम के बाद एक फ्रेम प्रस्तुत करता है)। प्रत्येक पुनरावृत्ति के आउटपुट को मॉनिटर रीफ्रेश दर के साथ सिंक्रनाइज़ करने की आवश्यकता होती है, अन्यथा tearing होगा। जिस तरह से मैं इसे अभी कर रहा हूं loop विधि के भीतर उपयोग करना है। इसकी तरह काम कर रहा है। दूसरा पैरामीटर 1/(रीफ्रेश दर) होना चाहिए, और इसलिए मैंने इस सवाल से पूछा।

Answer 1

आपके पास window.requestAnimationFrame का उपयोग करके आधुनिक ब्राउज़र पर कुछ भाग्य हो सकता है जो एक छोटी कॉलबैक के साथ होता है जो लगातार आमंत्रणों और एफपीएस की गणना के बीच का समय मापता है।

तुम भी आसानी से हर वें मंगलाचरण अपने कार्य प्रस्तुत करना छोड़ वांछित फ्रेम दर कम करने के लिए सक्षम होना चाहिए।

मैं http://jsfiddle.net/rBGPk/ पर एक मोटा उदाहरण डाल - गणित थोड़ा गलत हो सकता है लेकिन यह सामान्य विचार दिखाने के लिए पर्याप्त होना चाहिए।

Answer 2

इस तरह मैं इसे करता हूं। यह लगातार दो फ्रेम के बीच मिलीसेकंड की संख्या को मापकर काम करता है।

चेतावनी: यह हमेशा सही उत्तर वापस नहीं करता है क्योंकि कभी कभी एक एनीमेशन फ्रेम को छोड़ दिया है। यह आमतौर पर तब तक काम करेगा जब तक आपका पृष्ठ कुछ और करने में व्यस्त नहीं है।

// Function that returns a promise for the FPS 
 
function getFPS() { 
 
    return new Promise((resolve) => { 
 
    requestAnimationFrame((timeFrame1) => { 
 
     requestAnimationFrame((timeFrame2) => { 
 
     resolve(1000/(timeFrame2 - timeFrame1)); 
 
     }); 
 
    }); 
 
    }); 
 
} 
 

 
// Calling the function to get the FPS 
 
getFPS().then((fps) => console.log(fps));

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

Answer 3

यह मजबूत विधि, requestAnimationFrame विधि का उपयोग कर रहा है।

function calcFPS(opts){ 
    var requestFrame = window.requestAnimationFrame || 
     window.webkitRequestAnimationFrame || 
     window.mozRequestAnimationFrame; 
    if (!requestFrame) return true; // Check if "true" is returned; 
            // pick default FPS, show error, etc... 
    function checker(){ 
     if (index--) requestFrame(checker); 
     else { 
      // var result = 3*Math.round(count*1000/3/(performance.now()-start)); 
      var result = count*1000/(performance.now()- start); 
      if (typeof opts.callback === "function") opts.callback(result); 
      console.log("Calculated: "+result+" frames per second"); 
     } 
    } 
    if (!opts) opts = {}; 
    var count = opts.count||60, index = count, start = performance.now(); 
    checker(); 
} 

उच्च count का मूल्य, और अधिक सटीक एफपीएस के मूल्य, और अब एफपीएस परीक्षण का समय लगेगा।

अतिरिक्त तर्क का उपयोग 15/12 के लिए किया जा सकता है, यानी 24, 30, 48, 60 120 ... एफपीएस।

function calcFPS(a){function b(){if(f--)c(b);else{var e=3*Math.round(1E3*d/3/(performance.now()-g));"function"===typeof a.callback&&a.callback(e);console.log("Calculated: "+e+" frames per second")}}var c=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame;if(!c)return!0;a||(a={});var d=a.count||60,f=d,g=performance.now();b()} 

---

इसलिए की तरह उपयोग किया::

---

यहाँ संकलित संस्करण (साथ गोलाई से 3 एफपीएस) है

calcFPS(); // Only logs to console (you can remove the console log, 
      // making this call redundant) 

calcFPS({count: 30}); // Manually set count (the test should take 500ms 
         // on a 60FPS monitor 

calcFPS({callback: useFPS}); // Specify a callback so you can use the 
          // FPS number value 

var FPS = 0, err = calcFPS({count: 120, callback: fps => FPS = fps}); 
if (err) FPS = 30;