সংক্ষিপ্ত উত্তর:
এসভিজি আপনার পক্ষে সহজতর হবে , যেহেতু এটি নির্বাচন এবং এটিকে চারপাশে স্থানান্তরিত করা ইতিমধ্যে অন্তর্নির্মিত S SVG অবজেক্টগুলি DOM অবজেক্টস, সুতরাং তাদের "ক্লিক" হ্যান্ডলার ইত্যাদি রয়েছে etc.
Divs ঠিক আছে কিন্তু ক্লাঙ্কি হয় এবং ভয়াবহ বৃহৎ সংখ্যক এ কর্মক্ষমতা লোড হচ্ছে।
ক্যানভাসের হ্যান্ড-ডাউন সেরা পারফরম্যান্স রয়েছে, তবে আপনাকে নিজেরাই পরিচালিত রাষ্ট্রের সমস্ত ধারণা (বস্তু নির্বাচন ইত্যাদি) প্রয়োগ করতে হবে, বা একটি লাইব্রেরি ব্যবহার করতে হবে।
দীর্ঘ উত্তর:
এইচটিএমএল 5 ক্যানভাস একটি বিট-ম্যাপের জন্য কেবল একটি অঙ্কন পৃষ্ঠ। আপনি অঙ্কন করার জন্য সেট আপ করেছেন (একটি রঙ এবং রেখার বেধ দিয়ে বলুন), সেই জিনিসটি আঁকুন, এবং তারপরে ক্যানভাসের কাছে সেই জিনিসটির কোনও জ্ঞান নেই: এটি কোথায় আছে বা এটি সবেমাত্র আঁকেন তা জানেন না, এটি শুধু পিক্সেল। আপনি যদি আয়তক্ষেত্রগুলি আঁকতে চান এবং সেগুলি ঘুরে বেড়াতে চান বা নির্বাচনযোগ্য হতে পারেন তবে কোডগুলি মনে রাখার জন্য যে আপনি সেগুলি আঁকেন সেগুলি সহ আপনাকে স্ক্র্যাচ থেকে এগুলি সমস্ত কোড করতে হবে।
অন্যদিকে এসভিজির অবশ্যই প্রতিটি বস্তুর রেফারেন্স রেফারেন্স বজায় রাখতে হবে। আপনার তৈরি প্রতিটি এসভিজি / ভিএমএল উপাদান ডিওমে একটি আসল উপাদান। ডিফল্টরূপে এটি আপনাকে তৈরির উপাদানগুলির আরও ভাল ট্র্যাক রাখতে দেয় এবং মাউস ইভেন্টের মতো কাজগুলি ডিফল্টরূপে সহজতর করে তোলে, তবে যখন প্রচুর পরিমাণে অবজেক্ট থাকে তখন তা উল্লেখযোগ্যভাবে কমে যায় s
এই এসভিজি ডোম উল্লেখের অর্থ হল যে আপনি আঁকেন সেগুলি নিয়ে কাজ করার কিছু পদাঙ্ক আপনার জন্য করা হয়েছে। সত্যিকারের বৃহত অবজেক্টগুলিকে রেন্ডার করার সময় এবং এসভিজি দ্রুত হয় তবে অনেকগুলি অবজেক্ট রেন্ডার করার সময় ধীর হয় ।
একটি খেলা সম্ভবত ক্যানভাসে আরও দ্রুত হবে। একটি বিশাল মানচিত্র প্রোগ্রাম সম্ভবত এসভিজিতে দ্রুততর হবে। আপনি যদি ক্যানভাস ব্যবহার করতে চান না, তবে অস্থাবর বস্তুগুলি এখানে পেয়ে এবং চালানোর বিষয়ে আমার কিছু টিউটোরিয়াল রয়েছে ।
ক্যানভাস দ্রুত জিনিস এবং ভারী বিটম্যাপ ম্যানিপুলেশন (অ্যানিমেশনের মতো) জন্য ভাল তবে আপনি প্রচুর ইন্টারঅ্যাক্টিভিটি চাইলে আরও কোড নেবে।
আমি এইচটিএমএল ডিআইভি-তৈরি অঙ্কন বনাম ক্যানভাস তৈরি অঙ্কনগুলিতে একগুচ্ছ সংখ্যা চালিয়েছি। আমি প্রত্যেকের সুবিধাগুলি সম্পর্কে একটি বিশাল পোস্ট করতে পারি, তবে আমি আপনার নির্দিষ্ট প্রয়োগের জন্য বিবেচনা করার জন্য আমার পরীক্ষাগুলির কিছু প্রাসঙ্গিক ফলাফল দেব:
আমি ক্যানভাস এবং এইচটিএমএল ডিআইভি পরীক্ষার পৃষ্ঠা তৈরি করেছি, দুজনেরই চলমান "নোড" ছিল। ক্যানভাস নোডগুলি জাভাস্ক্রিপ্টে আমি তৈরি করেছিলাম এবং ট্র্যাক করেছিলাম objects এইচটিএমএল নোডগুলি চলমান ডিভস ছিল।
আমি আমার দুটি পরীক্ষার প্রতিটিতে 10,000,000 নোড যুক্ত করেছি। তারা বেশ ভিন্নভাবে অভিনয় করেছেন:
এইচটিএমএল পরীক্ষা ট্যাবটি লোড করতে চিরতরে লেগেছিল (5 মিনিটের কিছুটা কম সময়ে ক্রোম পৃষ্ঠাটি প্রথমবারে হত্যা করতে বলে)। ক্রোমের টাস্ক ম্যানেজার বলেছেন যে ট্যাবটি 168 এমবি গ্রহণ করছে। আমি যখন এটি দেখছি তখন এটি 12-13% সিপিইউ সময় নেয়, 0% যখন আমি দেখছি না।
ক্যানভাস ট্যাবটি এক সেকেন্ডে লোড হয়ে 30MB নেয়। এটি সিপিইউর সময়কালে 13% সময় নেয়, এটির দিকে তাকানো কিনা তা নির্বিশেষে। (২০১৩ সম্পাদনা: তারা বেশিরভাগ স্থির করে দিয়েছে)
এইচটিএমএল পৃষ্ঠায় টেনে আনা মসৃণ, যা ডিজাইনের দ্বারা প্রত্যাশিত, যেহেতু বর্তমান সেটআপটি ক্যানভাস পরীক্ষায় প্রতি 30 মিলিসেকেন্ডে সমস্ত কিছু পুনরায় আঁকতে হবে। এর জন্য ক্যানভাসের জন্য প্রচুর অপ্টিমাইজেশন রয়েছে। (ক্যানভাস অবৈধকরণ সবচেয়ে সহজ, ক্লিপিং অঞ্চলগুলি, নির্বাচনী পুনরায় আঁকানো ইত্যাদি just আপনি বাস্তবায়নের মতো কতটা অনুভব করেন তার উপর নির্ভর করে)
কোনও সন্দেহ নেই যে আপনি ক্যানভাসকে সেই সহজ পরীক্ষায় ডিভ হিসাবে এবং অবৈধভাবে লোডের সময়ে আরও দ্রুত গতিতে অবধি অবধি হেরফের করতে পারবেন। ক্যানভাসে অঙ্কন / লোডিং দ্রুততর এবং অপ্টিমাইজেশনের আরও অনেক বেশি জায়গা রয়েছে (যেমন, অফ-স্ক্রিনের জিনিসগুলি বাদ দেওয়া খুব সহজ)।
উপসংহার:
- কিছু আইটেমযুক্ত অ্যাপ্লিকেশন এবং অ্যাপ্লিকেশনগুলির জন্য এসভিজি সম্ভবত আরও ভাল (1000 এর চেয়ে কম? সত্যই নির্ভর করে)
- ক্যানভাস হাজার হাজার অবজেক্টস এবং সাবধানে হেরফেরের জন্য আরও ভাল তবে এটিকে মাটি থেকে নামানোর জন্য আরও অনেক কোড (বা একটি লাইব্রেরি) প্রয়োজন।
- এইচটিএমএল ডিভগুলি আঠালো এবং স্কেল করে না, বৃত্ত তৈরি করা কেবল গোলাকার কোণগুলি দিয়েই সম্ভব, জটিল আকার তৈরি করা সম্ভব তবে শত শত ক্ষুদ্র পিক্সেল-প্রশস্ত ডিভগুলি অন্তর্ভুক্ত করে। পাগলামি নিশ্চিত।