गति परीक्षण के बारे में या परीक्षण लिखने के लिए कैसे नहीं

हाल ही में मैंने HTML5 कैनवस के साथ एक पोस्ट टेस्ट ब्राउज़र प्रदर्शन देखा। परिणामों में, IE9 ने पागल नंबर दिखाना शुरू कर दिया - 350+ एफपीएस।

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

बिल्ली के तहत, मैं दिखाऊंगा कि परीक्षण HTML5-कैनवास की गति को बिल्कुल क्यों नहीं दिखाता है, और सबसे अंत में बिना किसी फोटोशॉप के FF4 के लिए 470 एफपीएस के साथ एक स्क्रीन होगी, पहले हम विश्लेषण करेंगे कि इस परीक्षण के साथ क्या गलत है।


खैर, शुरुआत के लिए, आइए देखें कि 200 एफपीएस क्या है। यह 200 चित्र प्रति सेकंड है। यानी ड्रॉ इवेंट लगभग हर 5 एमएस में होना चाहिए। यदि आप परीक्षण कोड को देखते हैं, तो वास्तव में एक पंक्ति है:

setInterval(moveIt,1); 

वास्तव में, "MoveIt" को विनिर्देशन ( WhatWG , W3C ) को देखते हुए हर 1ms को निष्पादित किया जाना चाहिए। लेकिन न्यूनतम समय जैसी कोई चीज नहीं है जिसके बाद एक हैंडलर को बुलाया जाना चाहिए।

और फिर ब्राउज़रों में ईवेंट कतार की कार्यान्वयन सुविधाएँ प्रभावी हो जाती हैं। इस तरह के एक दिलचस्प परीक्षण है जो कि सेटटाइमआउट की न्यूनतम सटीकता को दिखाना चाहिए। क्रोम में मेरे पास 4ms थे, लेकिन FF4 में यह स्पष्ट रूप से 10ms पर था। शायद यह विंडोज सिस्टम (उच्च-प्रदर्शन काउंटर या मल्टीमीडिया एक्सटेंशन के उपयोग के बिना) के टाइमर के साथ काम करने की बारीकियों के कारण है (अंत में परिणामों के साथ एक संकेत है)।

इसलिए, जैसा कि इस विषय का लक्ष्य सेटटाइमआउट कार्यान्वयन की विशेषताओं पर चर्चा करना नहीं है, लेकिन यह चर्चा करना है कि आप वास्तव में किसी विशेष ऑपरेशन के प्रदर्शन को कैसे माप सकते हैं। जैसा कि हमने देखा, सेटटाइमआउट उपयुक्त नहीं है (शायद केवल "अभी तक उपयुक्त नहीं है?") - यह किसी भी कार्य के साथ ब्राउज़र को पूरी तरह से लोड करना संभव नहीं बनाता है।

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

इस समस्या का एक संभावित समाधान डेविन बैरन द्वारा प्रकाशित किया गया था: window.postMessage ( WhatWG , W3C , MSDN ) का उपयोग करें। कोड जो setTimeout के एक एनालॉग को लागू करता है, लेकिन न्यूनतम (अधिमानतः शून्य) विलंब के साथ (मैंने डेविड का कोड setInterval के एनालॉग को जोड़कर संशोधित किया (सही मुझे अगर fn.apply की आवश्यकता है):

 // Only add setZeroTimeout to the window object, and hide everything // else in a closure. (function() { var timeouts = []; var messageName = "zero-timeout-message"; // Like setTimeout, but only takes a function argument. There's // no time argument (always zero) and no arguments (you have to // use a closure). function setZeroTimeout(fn) { timeouts.push(fn); window.postMessage(messageName, "*"); } function intervalHelper(fn) { var h = function() { fn(); setZeroTimeout(h); }; return h; } function setZeroInterval(fn) { setZeroTimeout(intervalHelper(fn)); } function handleMessage(event) { if (event.source == window && event.data == messageName) { event.stopPropagation(); if (timeouts.length> 0) { var fn = timeouts.shift(); fn(); } } } window.addEventListener("message", handleMessage, true); // Add the one thing we want added to the window object. window.setZeroTimeout = setZeroTimeout; window.setZeroInterval = setZeroInterval; })(); 

अंतर बहुत बड़ा है ( डेमो ):

 100 iterations of setZeroTimeout took 19 milliseconds. 100 iterations of setTimeout(0) took 393 milliseconds. 

इस न्यूनतम परिवर्तन के साथ, हमारे पास फ़ायरफ़ॉक्स 4 और डायरेक्ट 2 डी / डायरेक्टवाइट सक्षम के मामले में हेडर में एक स्क्रीनशॉट है (आप इसमें देख सकते हैं : समर्थन )

यहां HTML5-Canvas "परीक्षण" प्रकार लागू परिवर्तन के साथ है।

Google Chrome के बारे में कुछ शब्द: गैर-विंडोज प्लेटफार्मों के तहत, यह अक्सर इस परीक्षण में 200+ एफपीएस दिखाता है, यहां तक ​​कि बहुत मजबूत मशीनों पर भी (बशर्ते कि हार्डवेयर आउटपुट त्वरण सक्षम है)। विंडोज पर, यह 60 एफपीएस की वीएसक्यूएन सीमा पर टिकी हुई है। इसके बारे में मुद्दा है, जिसके लिए आप एक तारांकन चिह्न डालकर वोट कर सकते हैं।

खैर, इसके बारे में देखना न भूलें : झंडे - एक GPU त्वरित कंपोजिटिंग / GPU त्वरित कैनवास 2 डी है।

निष्कर्ष

टेस्ट / बेंचमार्क लिखते समय, यदि कुछ ब्राउज़र में अकथनीय रूप से बड़ा अंतर दिखाई देता है, तो गलती से यह न सोचें कि यह ब्राउज़र मेगा-सुपर अनुकूलित है। संभवतः, बस एक परीक्षण परीक्षण कर रहा है कि यह क्या लगता है। उदाहरण के लिए, एक परीक्षण, जो सिद्धांत में एचटीएमएल 5-कैनवस की गति को दिखाना चाहिए, वास्तव में सेटटाइमआउट के कार्यान्वयन की विशेषताओं को दिखाया गया है और वीएसक्यूएन को सक्षम / अक्षम किया गया है।

पी पी एस। इस परीक्षण की पूरी वक्रता दिखाने के लिए, मेरे पैच और टैब के साथ FF4 पर परीक्षण को दूसरे टैब में खोलें (लगभग तुरंत), फिर 15-20 सेकंड के बाद लौटें - मेरे पास लगभग 400 एफपीएस थे और धीरे-धीरे नीचे गिर गए। प्रमाण

सामान्य तौर पर, एक परीक्षण प्रकाशित करने से पहले, यह देखने के लिए जांचें कि क्या यह अच्छी तरह से परीक्षण करता है, और यदि यह कुछ समझदार परीक्षण करता है, और न केवल संख्याओं के साथ एक सुंदर तस्वीर खींचता है।

न्यूनतम सेटटाइमआउट देरी

टिप्पणियाँ एकत्र करने के बाद, मैंने परीक्षण परिणामों की एक तालिका तैयार की:

ओपेरा 11 (विन)	2
क्रोम 10-11 (विन)	4
फ़ायरफ़ॉक्स (जीत)	10
सफारी, ओएस एक्स 10.6.6	10
iPhone	10
IE 8	15.6

जैसे ही टिप्पणियां उपलब्ध होंगी मैं पुनः भर दूंगा।

इस संबंध में, यह ध्यान देने योग्य है कि, व्हाट्सएप / डब्ल्यू 3 सी से एचटीएमएल 5 की सिफारिश के अनुसार, सेटटाइमआउट / सेटइंटरवल को इस तरह काम करना चाहिए:

सेटइंटरवल () विधि में निम्नलिखित चरण होने चाहिए:
5. अगर टाइमआउट 10 से कम है, तो टाइमआउट को बढ़ाकर 10 कर दें

सेटटाइमआउट () विधि में निम्नलिखित चरण होने चाहिए:
5. यदि वर्तमान में चल रहा कार्य एक ऐसा कार्य है जो सेटटाइमआउट () विधि द्वारा बनाया गया था, और टाइमआउट 4 से कम है, तो टाइमआउट को 4 तक बढ़ाएं।

यानी setTimeout के लिए 4 ms से कम और setInterval के लिए 10 नहीं होना चाहिए। यह किसी भी ब्राउज़र में एक स्पष्ट त्रुटि दिखाता है जहां "मूल" परीक्षण 100 से अधिक एफपीएस देता है (क्योंकि यह सेटइंटरवल का उपयोग करता है)। 250 एफपीएस - सेटटाइमआउट का उपयोग करते समय अधिकतम।

अद्यतन:
मैंने परीक्षण की एक प्रति बनाई, जिसमें मैंने बहुभुजों की संख्या (72 खंडों और अक्षरों में 30 गुना तक) बढ़ाई।
अब मेरे पास परिणाम हैं (Windows7 SP1 x64, nVidia gtx 260, Core Quad 2.4ghz):

क्रोम 12.0.703.0 कैनरी बिल्ड	33 एफपीएस
IE 9.0.8112.16421	26 एफपीएस
फ़ायरफ़ॉक्स 4.0	58 एफपीएस

कोई "तेज", आदि। नहीं किया गया (सेटज़ेरोमिटआउट को छोड़कर, जो IE9 में मूल "परीक्षण" की गति को भी बढ़ाता है)। मूल परीक्षण की तरह यह बहुत बड़ा अंतर है, मुझे दिखाई नहीं देता।

नतीजतन, मैं एक बात कहूंगा: एक कुटिल लिखित परीक्षा परिणाम दसियों या सैकड़ों बार भी "सुशोभित करने के लिए चाल " कर सकती है।