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




performance charts (2)

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

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

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

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

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


संक्षिप्त जवाब :

या तो:

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

लंबा जवाब :

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

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

ज्यादातर चार्टिंग लाइब्रेरी वहां प्रदर्शन, सटीकता, और प्रयोज्यता के बीच व्यापार को अलग तरीके से सौंपते हैं। यह सब क्या कार्यान्वयन पर निर्भर करता है।

प्लग / स्रोत: मैं ज़िंग चार्ट में एक डेवलपर हूं और हम अपने ग्राहकों से बड़े डेटासेट के साथ हर समय काम करते हैं। हमने यह भी बनाया है जो आपके परीक्षणों के लिए बहुत प्रासंगिक है: http://www.zingchart.com/demos/zingchart-vs/






amcharts