जावास्क्रिप्ट आधारित चार्टिंग पुस्तकालयों के लिए रेंडर प्रदर्शन कैसे प्राप्त करें?

Question

प्रस्तावना के लिए मैं जावास्क्रिप्ट प्रोग्रामिंग के लिए काफी नया हूं, लेकिन मैं थोड़ी देर के लिए विभिन्न पुस्तकालयों के साथ काम कर रहा हूं। मुझे विभिन्न चार्टिंग पुस्तकालयों के लिए प्रदर्शन मीट्रिक प्राप्त करने का काम सौंपा गया है ताकि उपलब्ध कुछ पुस्तकालयों (उदा। एमचर्ट्स, हाईचर्ट्स, सिंकफ्यूजन इत्यादि) के आधार पर सबसे तेज़ और सबसे लचीला ढूंढ सकें। मैंने जेएसपीआरएफ की कोशिश की है और ऐसा लगता है कि मुझे कोड निष्पादन के लिए प्रदर्शन मीट्रिक मिल रहा है, न कि वास्तविक प्रस्तुत चार्ट जो कि हम चाहते हैं मीट्रिक है (उर्फ उपयोगकर्ता अनुभव क्या होगा)। मैंने हेडर में जावास्क्रिप्ट कोड के भीतर प्रदर्शन .now() का उपयोग करने का प्रयास किया है और टैग्स के चारों ओर लपेटा है जहां चार्ट प्रदर्शित होते हैं, लेकिन न तो विधि काम कर रही है।

प्रतिपादन के आधार पर इन प्रदर्शन मीट्रिक को प्राप्त करने का सबसे अच्छा तरीका क्या है?

Answer 1

लघु उत्तर:

कोई एक: ठीक पहले चार्ट कोड निष्पादित

1. अपने समय शुरू करें और सेटअप एक MutationObserver डोम को देखने के लिए और समय खत्म हो जब सभी उत्परिवर्तन समाप्त हो जाती है।
2. पता लगाएं कि चार्टिंग लाइब्रेरी ने() ईवेंट किया है या नहीं। (लेकिन सावधान रहें क्योंकि कार्यान्वयन/लाइब्रेरी के आधार पर यह गलत हो सकता है। "किया गया()" दृष्टि से किया जा सकता है, लेकिन पृष्ठभूमि कार्य अभी भी किया जा रहा है। यह चार्ट पूरी तरह से तैयार होने तक अंतःक्रियाशीलता को अजीब होने का कारण बन सकता है)।

लांग उत्तर:

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

जो मुझे प्रदर्शन की उपयोगिता और अंतःक्रियाशीलता पहलू की ओर ले जाता है। हम एक कंप्यूटर का उपयोग कर रहे हैं न कि कागज के टुकड़े पर एक चार्ट; यह यथासंभव इंटरैक्टिव होना चाहिए। हालांकि अंतःक्रियाशीलता की मात्रा बढ़ जाती है, इसलिए लाइब्रेरी के कार्यान्वयन के आधार पर आपका ब्राउज़र मंदी के लिए अतिसंवेदनशील हो सकता है। क्या होगा यदि आपके प्रत्येक मिलियन डेटा पॉइंट इंटरैक्टिव डोम नोड थे? 1 मिलियन डेटा पॉइंट निश्चित रूप से ब्राउज़र को क्रैश करेंगे।

प्रदर्शन चार्टिंग पुस्तकालयों में से अधिकांश प्रदर्शन प्रदर्शन, सटीकता और उपयोगिता के बीच व्यापार के साथ अलग-अलग सौदे करते हैं। यह सब के लिए कार्यान्वयन पर निर्भर करता है।

प्लग/स्रोत: मैं ज़िंगचर्ट में एक डेवलपर हूं और हम अपने ग्राहकों के साथ हर समय बड़े डेटासेट के साथ सौदा करते हैं। ; `वर perfOneLineOneBegin = performance.now(): http://www.zingchart.com/demos/zingchart-vs/

Answer 2

मेरी विधि वास्तव में मूलभूत है। मैं वर्तमान समय के साथ एक var बना देता हूं, फिर मेरे कोड ब्लॉक और अंतर के अंत तक एक console.log() को कॉल करता हूं।

var start = +new Date(); 
//do lots of cool stuff 
console.log('Rendered in ' + (new Date() - start) + ' ms'); 

बहुत सामान्य और क्या करता है यह टिन पर कहते हैं। यदि आप कोड के प्रत्येक खंड को मापना चाहते हैं तो आपको नए समय स्लॉट बनाना होगा। हां, गणना में समय लगता है। लेकिन यह मापने के लिए कि मैं जिस कोड को मापना चाहता हूं उसकी तुलना में यह छोटा है। jsFiddle पर कार्रवाई में उदाहरण।