25

यदि मैं एकाधिक एनिमेशन कर रहा हूं, तो क्या यह एकाधिक requestAnimationFrame कॉलबैक जोड़ने के लिए निष्पादन के अनुसार ठीक है? F.ex:एकाधिक अनुरोधएनीमेशन फ्रेम प्रदर्शन

function anim1() { 
    // animate element 1 
} 

function anim2() { 
    // animate element 2 
} 

function anim3() { 
    // animate element 3 
} 

requestAnimationFrame(anim1); 
requestAnimationFrame(anim2); 
requestAnimationFrame(anim3); 

या यह एक भी कॉलबैक का उपयोग कर से भी बदतर साबित होता है:

(function anim() { 
    requestAnimationFrame(anim); 
    anim1(); 
    anim2(); 
    anim3(); 
}()); 

मैं क्योंकि मैं वास्तव में नहीं पता है कि पर्दे के पीछे चल रहा है पूछ रहा हूँ, requestAnimationFrame है जब आप इसे कई बार कॉल करते हैं तो क्विकिंग कॉलबैक?

उत्तर

4

आपको केवल requestAnimationFrame कॉल का उपयोग करना चाहिए requestAnimationFrame पर कॉल के रूप में कॉल करें। एकल कॉलबैक संस्करण इस प्रकार अधिक प्रदर्शनकारी है।

+8

क्या आप इस बारे में निश्चित हैं? Http://www.w3.org/TR/animation-timing/#FrameRequestCallback के अनुसार, कॉलबैक एक सूची में संग्रहीत हैं और क्रम में निष्पादित हैं। 3 एनिमेशन के साथ एक एकल कॉलबैक 1 एनीमेशन के साथ 3 कॉलबैक से अधिक कुशल क्यों होगा? – David

+1

@ डेविड सरल तथ्य के लिए कि आप 2 फ़ंक्शन कॉल कम करते हैं। –

+3

@ErikSchierboom सही है, कम फ़ंक्शन कॉल स्टैक में कम ओवरहेड के बराबर होगी। हालांकि, मैं विशेष रूप से शॉर्टलाइज्ड एनीमेशन के लिए एप्लिकेशन देख सकता हूं जो सादगी कोडिंग के लिए मुख्य लूप के बाहर रहने के लिए बार-बार आग लगती है। इसके अतिरिक्त, आपके मुख्य पाश में "हॉट लूप" के भीतर से किसी भी शाखा को हटाने से लिंकिंग, अनलिंकिंग, देशी ऑब्जेक्ट्स आदि बनाने के कारण किसी भी जेआईटी कंपाइलर को थ्रैशिंग कम हो सकती है ... – mattdlockyer

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