कैनवस के माध्यम से एक इंटरफेस प्रदान करना

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







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



परीक्षणों के लिए, सबसे अक्सर उपयोग किए जाने वाले तत्व को चुना गया था - एक डेटा प्लेट (500,000 पंक्ति या 200 कॉलम लेबल व्यावसायिक अनुप्रयोगों की कठोर वास्तविकता हैं)। सभी परीक्षण पृष्ठ यहां देखे जा सकते हैं ।

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

उपयोग की जटिलता

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

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

रेंडर गति

दो मापदंडों को मापा गया।

- टेबल रेंडरिंग स्पीड

- पहले से ही खींची गई तालिका में एकल कोशिका के परिवर्तन की दर

क्रोम 9

प्रतिपादन (कम बेहतर है)



डेटा बदलें (कम बेहतर है)





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



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

ओपेरा 11

प्रतिपादन (कम बेहतर है)



डेटा बदलें (कम बेहतर है)





ओपेरा बड़े HTML तालिकाओं के साथ दुखी है, वे केवल लंबे समय तक प्रस्तुत किए जाते हैं।

अन्य

निम्न ब्राउज़रों ने छोटी और मध्यम तालिका के साथ मुकाबला किया, लेकिन एक बड़ा कैनवास नहीं खींच सके, इसलिए उन्हें अपने चार्ट नहीं मिले।

• फ़ायरफ़ॉक्स 4b10
• IE9
• जीपीयू ने क्रोम को गति दी

विभिन्न ब्राउज़रों की तुलना

सभी ब्राउज़रों में औसत तालिका के लिए परीक्षण (कम बेहतर है)



सामान्य तौर पर, सब कुछ अनुमानित है - क्रोम और एफएफ प्रमुख हैं। कुछ हद तक अप्रत्याशित परिणाम क्रोम (क्रोम * आरेख पर) में GPU त्वरण का समावेश है

उपयोग करने की भावना

मध्यम आकार और ऊपर से शुरू - HTML के माध्यम से प्रदान की गई तालिकाएं स्क्रॉल करते समय बहुत धीमी हो जाती हैं (सबसे अधिक संभावना है कि ब्राउज़र उन्हें तुरंत नहीं खींचता है, लेकिन मक्खी पर, जो स्क्रॉल करने के दौरान झटके का कारण बनता है), तालिका का कैनवास आसानी से और बिना किसी झटके के स्क्रॉल करता है।

परिणाम जैसा कि मैं उन्हें देखता हूं

कोई चमत्कार नहीं हुआ। हालांकि कैनवास बहुत अच्छे परिणाम दिखाता है, HTML के माध्यम से समान इंटरफेस प्रदान करने की गति अभी भी अधिक है।

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



हमेशा ओपेरा के रूप में बाहर खड़ा था - यह एकमात्र ऐसा ब्राउज़र है जिसमें कैनवास के साथ ड्राइंग HTML के माध्यम से वास्तव में ऐसा करने की तुलना में तेजी से हो सकता है।



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