एचटीएमएल 5 कैनवस बनाम एसवीजी बनाम डिव

Question

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

मैं समझता हूं कि HTML5 तीन तत्व प्रदान करता है जो इसे संभव बना सकते हैं: svg , कैनवास और div । मैं क्या करना चाहता हूं, उन तत्वों में से कौन सा तत्व सबसे अच्छा प्रदर्शन प्रदान करेगा?

इन दृष्टिकोणों की तुलना करने के लिए, मैं तीन नेत्रहीन समान वेब पेज बनाने के बारे में सोच रहा था जिनमें से प्रत्येक में हेडर, फूटर, विजेट और पाठ सामग्री हो। पहले पृष्ठ में विजेट पूरी तरह से canvasतत्व के साथ बनाया जाएगा , दूसरा पूरी तरह से svgतत्व के साथ , और तीसरा सादे divतत्व, HTML और सीएसएस के साथ।

Comments

आपको यह दिलचस्प लग सकता है: कैनवस और एसवीजी का उपयोग करने पर विचार ।

— रॉबर्ट

इस वीडियो के लिए नए लोगों के लिए यह वीडियो SVG और कैनवस और अन्य विवरण दोनों को कवर करता है जो HTML5 पर एकीकृत होते हैं।

— पाउलो ब्यूनो

लघु उत्तर: कैनवस एमएस पेंट के लिए है क्योंकि एसवीजी एमएस पावरपॉइंट के लिए है। कैनवस रेखापुंज है, एसवीजी वेक्टर है।

— GetFree

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

— सेबस्टियन

@ सेबास्टियन जो आप आज की सिफारिश करेंगे? यदि एक आधार आकार दिया जाता है (उदाहरण के लिए, 1280x800) और यदि आप हर समय कोड में मैन्युअल रूप से तत्वों का उपयोग करने या प्रतिशत का उपयोग करने के लिए तैयार हैं, तो क्या DIV का उपयोग करने के लिए SVG का लाभ है?

— क्रैशहाल

Answer 1

संक्षिप्त उत्तर:

एसवीजी आपके लिए आसान होगा , चूंकि चयन और इसे चारों ओर ले जाना पहले से ही बनाया गया है। एसवीजी ऑब्जेक्ट डोम ऑब्जेक्ट्स हैं, इसलिए उनके पास हैंडलर आदि हैं।

DIV ठीक हैं, लेकिन क्लूनी हैं और बड़ी संख्या में भयानक प्रदर्शन लोड कर रहे हैं।

कैनवस के पास सबसे अच्छा प्रदर्शन हैंड्स-डाउन है, लेकिन आपको प्रबंधित स्थिति (ऑब्जेक्ट चयन, आदि) की सभी अवधारणाओं को स्वयं लागू करना होगा, या लाइब्रेरी का उपयोग करना होगा।

---

लंबे उत्तर:

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

दूसरी ओर एसवीजी को प्रत्येक वस्तु के संदर्भों को बनाए रखना चाहिए जो इसे प्रस्तुत करता है। आपके द्वारा बनाया गया प्रत्येक SVG / VML तत्व DOM में एक वास्तविक तत्व है। डिफ़ॉल्ट रूप से यह आपको आपके द्वारा बनाए गए तत्वों का बेहतर ट्रैक रखने की अनुमति देता है और डिफ़ॉल्ट रूप से माउस घटनाओं जैसी चीजों से निपटना आसान बनाता है, लेकिन बड़ी संख्या में ऑब्जेक्ट होने पर यह काफी धीमा हो जाता है।

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

कैनवस में एक गेम शायद तेज होगा। एसवीजी में एक विशाल मानचित्र कार्यक्रम संभवतः तेज होगा। यदि आप कैनवस का उपयोग करना चाहते हैं, तो मेरे पास चल वस्तुओं को प्राप्त करने और यहां चलाने के लिए कुछ ट्यूटोरियल हैं ।

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

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

मैंने कैनवस और एचटीएमएल डीआईवी टेस्ट पेज बनाए, दोनों में जंगम "नोड्स" थे। कैनवास नोड्स वे ऑब्जेक्ट थे जिन्हें मैंने जावास्क्रिप्ट में बनाया और ट्रैक किया था। HTML नोड्स डिवेबल डिवल्स थे।

मैंने अपने प्रत्येक दो परीक्षणों में 100,000 नोड जोड़े। उन्होंने काफी अलग प्रदर्शन किया:

HTML परीक्षण टैब को हमेशा के लिए लोड करने के लिए लिया गया (5 मिनट से थोड़ा कम समय, क्रोम ने पृष्ठ को पहली बार मारने के लिए कहा)। Chrome के टास्क मैनेजर का कहना है कि टैब 168MB तक का समय ले रहा है। यह 12-13% CPU समय लेता है जब मैं इसे देख रहा हूं, 0% जब मैं नहीं देख रहा हूं।

कैनवस टैब एक सेकंड में लोड होता है और 30 एमबी तक होता है। यह हर समय सीपीयू समय का 13% हिस्सा लेता है, चाहे कोई भी इसे देख रहा हो या नहीं। (2013 संपादित करें: उन्होंने ज्यादातर यह तय किया है)

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

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

निष्कर्ष:

• एसवीजी संभवतः कुछ वस्तुओं (1000 से कम) वाले एप्लिकेशन और एप्लिकेशन के लिए बेहतर है (वास्तव में निर्भर करता है)
• कैनवस हजारों वस्तुओं और सावधान हेरफेर के लिए बेहतर है, लेकिन इसे बंद करने के लिए बहुत अधिक कोड (या पुस्तकालय) की आवश्यकता है।
• HTML डिव्स क्लंकी हैं और स्केल नहीं करते हैं, एक सर्कल बनाना केवल गोल कोनों के साथ संभव है, जटिल आकार बनाना संभव है लेकिन इसमें सैकड़ों छोटे-छोटे पिक्सेल-वाइड डिव शामिल हैं। पागलपन बढ़ता है।

Comments

केक पुस्तकालय एक कैनवास पर जंगम वस्तुओं और वस्तुओं के साथ एनिमेशन करने का एक और उदाहरण है

— SiggyF

गलत: पी डिव का पैमाना अगर ब्राउज़र hw त्वरित सीएसएस इंजन का उपयोग कर रहा है, तो css कला अलग है और इसके अलावा कैनवास और SVG यहां उचित विकल्प हैं, CSS कला / div कला बस तब है, जब यू को बस एक छोटे से ओवरले को ओवरक्लॉक करने की आवश्यकता नहीं है: P

— श्रेकओवरफ्लो

DIVs के बारे में, यदि आप मंडलियां / विशेष आकार बनाना चाहते हैं और इसकी छवि को बदलने / उचित समय पर नहीं जा रहे हैं, तो आप बस एक PNG बना सकते हैं और इसका उपयोग background-imageकर सकते हैं ... हालाँकि आप SVG / Canvas में समान काम कर सकते हैं

— ligiges90

यदि आप एक इंटरेक्टिव मानचित्र गेम बना रहे हैं तो क्या होगा? : पी

— एंथनी

यह (नॉन-नेस्टेड) ​​DIV और CSS 3D ट्रांसफ़ॉर्म का उपयोग करके बनाया गया था, इसलिए मैं कहूंगा कि DIV बिल्कुल भी धीमा नहीं है: youtube.com/watch?v=fzBC20B5dsk

— Erik Kaplun

Answer 2

इसे जोड़ने के लिए, मैं एक आरेख एप्लिकेशन कर रहा हूं, और शुरू में कैनवास के साथ शुरू हुआ। आरेख में कई नोड होते हैं, और वे काफी बड़े हो सकते हैं। उपयोगकर्ता तत्वों को आरेख में खींच सकता है।

मैंने पाया कि मेरे मैक पर, बहुत बड़ी छवियों के लिए, एसवीजी बेहतर है। मेरे पास एक मैकबुक प्रो 2013 13 "रेटिना है, और यह काफी अच्छी तरह से नीचे बेला चलाता है। छवि 6000x6000 पिक्सल है, और 1000 ऑब्जेक्ट हैं। कैनवास में इसी तरह का निर्माण मेरे लिए चेतन के लिए असंभव था जब उपयोगकर्ता ऑब्जेक्ट को चारों ओर खींच रहा था। आरेख।

आधुनिक प्रदर्शनों पर आपको विभिन्न प्रस्तावों के लिए भी जिम्मेदार होना पड़ता है, और यहां एसवीजी आपको यह सब मुफ्त में देता है।

बेला: http://jsfiddle.net/knutsi/PUcr8/16/

फुलस्क्रीन: http://jsfiddle.net/knutsi/PUcr8/16/embedded/result/

var wiggle_factor = 0.0;
nodes = [];

// create svg:
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute('style', 'border: 1px solid black');
svg.setAttribute('width', '6000');
svg.setAttribute('height', '6000');

svg.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink",
    "http://www.w3.org/1999/xlink");

document.body.appendChild(svg);


function makeNode(wiggle) {
    var node = document.createElementNS("http://www.w3.org/2000/svg", "g");
    var node_x = (Math.random() * 6000);
    var node_y = (Math.random() * 6000);
    node.setAttribute("transform", "translate(" + node_x + ", " + node_y +")");

    // circle:
    var circ = document.createElementNS("http://www.w3.org/2000/svg", "circle");
    circ.setAttribute( "id","cir")
    circ.setAttribute( "cx", 0 + "px")
    circ.setAttribute( "cy", 0 + "px")
    circ.setAttribute( "r","100px");
    circ.setAttribute('fill', 'red');
    circ.setAttribute('pointer-events', 'inherit')

    // text:
    var text = document.createElementNS("http://www.w3.org/2000/svg", "text");
    text.textContent = "This is a test! ÅÆØ";

    node.appendChild(circ);
    node.appendChild(text);

    node.x = node_x;
    node.y = node_y;

    if(wiggle)
        nodes.push(node)
    return node;
}

// populate with 1000 nodes:
for(var i = 0; i < 1000; i++) {
    var node = makeNode(true);
    svg.appendChild(node);
}

// make one mapped to mouse:
var bnode = makeNode(false);
svg.appendChild(bnode);

document.body.onmousemove=function(event){
    bnode.setAttribute("transform","translate(" +
        (event.clientX + window.pageXOffset) + ", " +
        (event.clientY + window.pageYOffset) +")");
};

setInterval(function() {
    wiggle_factor += 1/60;
    nodes.forEach(function(node) {

        node.setAttribute("transform", "translate(" 
                          + (Math.sin(wiggle_factor) * 200 + node.x) 
                          + ", " 
                          + (Math.sin(wiggle_factor) * 200 + node.y) 
                          + ")");        
    })
},1000/60);

Comments

कैनवस को हमारे लिए काम करने के लिए सख्त कोशिश करने के बाद, हमने एसवीजी पर भी समझौता किया। हमारे पास एक बहुत बड़ा आरेख है और एसवीजी अब तक सबसे कुशल था, साथ ही रेटिना स्क्रीन पर ऑटो-स्केलिंग एक विशाल बोनस है।

— फिजित

knut और @Fijjit ने SVG के बजाय DIV का उपयोग करने पर विचार किया? यदि एक आधार आकार दिया जाता है (जैसे, 1280x800) तो आप मैन्युअल रूप से DIVs को माप नहीं सकते हैं ताकि वे SVG के रूप में तेज दिखें? आपकी सहायताके लिए धन्यवाद!

— Crashalot

Answer 3

एसवीजी और कैनवस के बीच के अंतरों को जानना सही का चयन करने में मददगार होगा।

कैनवास

• संकल्प पर निर्भर
• घटना संचालकों के लिए कोई समर्थन नहीं
• गरीब पाठ प्रतिपादन क्षमताओं
• आप परिणामस्वरूप छवि को .png या .jpg के रूप में सहेज सकते हैं
• अच्छी तरह से ग्राफिक-गहन खेलों के लिए उपयुक्त है

एसवीजी

• संकल्प स्वतंत्र
• घटना संचालकों के लिए समर्थन
• बड़े रेंडरिंग क्षेत्रों (Google मानचित्र) वाले अनुप्रयोगों के लिए सबसे उपयुक्त
• यदि कोई जटिल धीमा (कुछ भी जो DOM का उपयोग करता है तो बहुत धीमा होगा)
• गेम एप्लिकेशन के लिए उपयुक्त नहीं है

Comments

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

— एलेक्स बोल्बैक

@AlexBollbach - कैनवस रिज़ॉल्यूशन डिपेंडेंट है, क्योंकि अच्छे रिज़ल्ट पाने के लिए आपको रिज़ॉल्यूशन पर ध्यान देना होगा। एसवीजी के साथ आप संकल्प की परवाह नहीं करते हैं। एक 2400DPI प्रिंटर और एक कैनवस आधारित प्रतिपादन पर गैर-जागी लाइनें प्राप्त करने का सौभाग्य। एसवीजी के साथ कोई समस्या नहीं है।

— सेबस्टियन

Answer 4

मैं साइमन सरिस के निष्कर्ष से सहमत हूं:

मैंने प्रोटॉविस (एसवीजी) में कुछ विज़ुअलाइज़ेशन की तुलना प्रोसेसिंगज (कैनवस) से की है जो प्रदर्शित करते हैं> 2000 अंक और प्रसंस्करणज प्रोटॉविज़ की तुलना में बहुत तेज़ हैं।

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

वहाँ भी dojo.gfx हैDojo टूलकिट लाइब्रेरी । यह एक अमूर्त परत प्रदान करता है और आप रेंडरर (एसवीजी, कैनवस, सिल्वरलाइट) निर्दिष्ट कर सकते हैं। यह एक व्यवहार्य विकल्प भी हो सकता है, हालांकि मुझे नहीं पता कि अतिरिक्त अमूर्त परत कितनी अधिक उपरिशायी है, लेकिन यह इंटरैक्शन और एनिमेशन को कोड करना आसान बनाता है और रेंडर-अज्ञेयवादी है।

यहाँ कुछ दिलचस्प बेंचमार्क हैं:

• http://svbreakaway.info/tp.php#jan21a
• http://www.eleqtriq.com/2010/02/canvas-svg-flash/
• http://smus.com/canvas-vs-svg-performance/

Answer 5

डिव ऑप्शन के बारे में सिर्फ मेरे 2 सेंट।

प्रसिद्ध / बदनाम और संसारज (और संभवत: अन्य) स्थिति और 2 डी / 3 डी परिवर्तनों के लिए मैट्रिक्स 2 डी / मैट्रिक्स 3 डी के साथ संयुक्त, बिल्कुल गैर-नेस्टेड डिव (गैर-तुच्छ HTML / CSS सामग्री के साथ) का उपयोग करते हैं, और मध्यम मोबाइल हार्डवेयर पर एक स्थिर 60FPS प्राप्त करते हैं , तो मैं divs एक धीमी विकल्प होने के खिलाफ बहस करना चाहते हैं।

YouTube पर और कहीं और स्क्रीन पर बहुत सारी रिकॉर्डिंग हैं, उच्च-प्रदर्शन 2 डी / 3 डी सामान ब्राउज़र में चल रहा है, जो कि हर एक DOM तत्व है, जिसे आप 60FPS पर तत्व का निरीक्षण कर सकते हैं , कुछ प्रभावों के लिए WebGL के साथ मिलाया जा सकता है, लेकिन इसके लिए नहीं प्रतिपादन का मुख्य भाग)।

Answer 6

हालांकि अभी भी ऊपर दिए गए अधिकांश उत्तरों में कुछ सच्चाई है, मुझे लगता है कि वे एक अद्यतन के लायक हैं:

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

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

में एक ऐसी ही सवाल करने के लिए इस सवाल का जवाब मैं और अधिक विवरण प्रदान कर रहा हूँ, क्यों मुझे लगता है कि संयोजन सभी तीन प्रौद्योगिकियों के कभी कभी सबसे अच्छा विकल्प आपके पास है।

Comments

यूनिक्स उपयोगकर्ताओं को ध्यान देना चाहिए कि हार्डवेयर त्वरण फ़ायरफ़ॉक्स और क्रोमियम दोनों पर डिफ़ॉल्ट रूप से अक्षम है, 2019 के मध्य में अभी भी सही है।

— NVRM

@ एनवीआरएम - यह सीएसएस और एसवीजी के हार्डवेयर-त्वरण के बारे में है, न कि वीडियो डिकोडिंग के बारे में। AFAIK पूर्व वर्षों के लिए उपलब्ध है: क्रोम का चेक आउटपुट: // gpu

— सेबस्टियन

layers.acceleration.force-enabledफ़ायरफ़ॉक्स में वीडियो डिकोडिंग के बारे में नहीं है। यह एक जाना माना तथ्य है। जब किए गए अनुरोधों का उपयोग करते हुए लूप्सफ्रेमफ्रेम एक अन्य स्तर है, जिस तरह से अधिक repaints की अनुमति देता है। वीडियो के बारे में बिल्कुल नहीं।

— एनवीआरएम

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

— सेबस्टियन

वर्तमान स्थिति का योग करने के लिए: क्रोम और क्रोमियम पर मेरे लिए काम करता है। लिनक्स पर। 2019 में। सभी उदाहरणों पर मैंने विशेष कॉन्फ़िगरेशन के बिना परीक्षण किया। फ़ायरफ़ॉक्स / मोज़िला लिनक्स के लिए इस पर काम कर रहा है , हालांकि प्रक्रिया प्रतिपादन से बाहर एफएफ के लिए कुछ नया नहीं है, या तो हमेशा एसवीजी, सीएसएस, आदि के साथ कैनवस के लिए बेहतर काम करेगा।

— सेबस्टियन

Answer 7

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

Comments

वास्तव में सादे HTML का उपयोग करना सीएसएस छवियों के साथ संयोजन में सबसे अच्छा प्रदर्शन है।

— रेयनोस

@ रेयानोस: स्रोत?

— जानूस ट्रॉल्सन

Answer 8

Googling के दौरान मुझे http://teropa.info/blog/2016/12/12/graphics-in-angular-2.html पर एसवीजी और कैनवस के उपयोग और संपीड़न के बारे में एक अच्छी व्याख्या मिली।

आशा है ये मदद करेगा:

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

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