HTML5 ক্যানভাসের কর্মক্ষমতা উন্নত করা

বরিস স্মাস

ভূমিকা

HTML5 ক্যানভাস, যা অ্যাপল থেকে একটি পরীক্ষা হিসাবে শুরু হয়েছিল, ওয়েবে 2D তাৎক্ষণিক মোড গ্রাফিক্সের জন্য সবচেয়ে ব্যাপকভাবে সমর্থিত মান। অনেক ডেভেলপার এখন বিভিন্ন মাল্টিমিডিয়া প্রজেক্ট, ভিজ্যুয়ালাইজেশন এবং গেমের জন্য এটির উপর নির্ভর করে। যাইহোক, যেহেতু আমরা তৈরি করা অ্যাপ্লিকেশনগুলি জটিলতা বাড়ায়, ডেভেলপাররা অসাবধানতাবশত কার্যকারিতা প্রাচীরকে আঘাত করে। ক্যানভাস কর্মক্ষমতা অপ্টিমাইজ করার বিষয়ে অনেক সংযোগ বিচ্ছিন্ন জ্ঞান আছে। এই নিবন্ধটির লক্ষ্য এই শরীরের কিছু অংশকে বিকাশকারীদের জন্য আরও সহজে হজমযোগ্য সম্পদে একত্রিত করা। এই নিবন্ধে মৌলিক অপ্টিমাইজেশনগুলি অন্তর্ভুক্ত রয়েছে যা সমস্ত কম্পিউটার গ্রাফিক্স পরিবেশে প্রযোজ্য এবং সেইসাথে ক্যানভাস-নির্দিষ্ট কৌশলগুলি যা ক্যানভাস বাস্তবায়নের উন্নতির সাথে সাথে পরিবর্তন হতে পারে। বিশেষ করে, যেহেতু ব্রাউজার বিক্রেতারা ক্যানভাস GPU ত্বরণ প্রয়োগ করে, আলোচিত কিছু রূপরেখার কর্মক্ষমতা কৌশল সম্ভবত কম প্রভাবশালী হয়ে উঠবে। এটি যেখানে উপযুক্ত সেখানে উল্লেখ করা হবে। মনে রাখবেন এই নিবন্ধটি HTML5 ক্যানভাসের ব্যবহারে যায় না। তার জন্য, HTML5Rocks-এ এই ক্যানভাস সম্পর্কিত নিবন্ধগুলি দেখুন, HTML5 সাইটের ডাইভ ইন বা MDN ক্যানভাসের এই অধ্যায়। টিউটোরিয়াল

কর্মক্ষমতা পরীক্ষা

HTML5 ক্যানভাসের দ্রুত পরিবর্তনশীল বিশ্বকে মোকাবেলা করতে, JSPerf ( jsperf.com ) পরীক্ষাগুলি যাচাই করে যে প্রতিটি প্রস্তাবিত অপ্টিমাইজেশান এখনও কাজ করে৷ JSPerf হল একটি ওয়েব অ্যাপ্লিকেশন যা ডেভেলপারদের জাভাস্ক্রিপ্ট কর্মক্ষমতা পরীক্ষা লিখতে দেয়। প্রতিটি পরীক্ষা এমন একটি ফলাফলের উপর ফোকাস করে যা আপনি অর্জন করার চেষ্টা করছেন (উদাহরণস্বরূপ, ক্যানভাস পরিষ্কার করা), এবং একই ফলাফল অর্জনকারী একাধিক পদ্ধতি অন্তর্ভুক্ত করে। JSPerf স্বল্প সময়ের মধ্যে যতবার সম্ভব প্রতিটি পদ্ধতি চালায় এবং প্রতি সেকেন্ডে একটি পরিসংখ্যানগতভাবে অর্থপূর্ণ সংখ্যক পুনরাবৃত্তি দেয়। উচ্চ স্কোর সবসময় ভাল! একটি JSPerf পারফরম্যান্স পরীক্ষা পৃষ্ঠার দর্শকরা তাদের ব্রাউজারে পরীক্ষা চালাতে পারেন এবং JSPerf কে ব্রাউজারস্কোপে ( browserscope.org ) সাধারণ পরীক্ষার ফলাফল সংরক্ষণ করতে দিন। যেহেতু এই নিবন্ধের অপ্টিমাইজেশন কৌশলগুলি একটি JSPerf ফলাফল দ্বারা ব্যাক আপ করা হয়েছে, আপনি কৌশলটি এখনও প্রযোজ্য কিনা সে সম্পর্কে আপ-টু-ডেট তথ্য দেখতে ফিরে আসতে পারেন। আমি একটি ছোট সহায়ক অ্যাপ্লিকেশন লিখেছি যা এই ফলাফলগুলিকে গ্রাফ হিসাবে রেন্ডার করে, এই নিবন্ধটি জুড়ে এমবেড করা হয়েছে৷

এই নিবন্ধে কর্মক্ষমতা ফলাফল সব ব্রাউজার সংস্করণে চাবিকাঠি করা হয়. এটি একটি সীমাবদ্ধতা হিসাবে দেখা যাচ্ছে, যেহেতু আমরা জানি না যে ব্রাউজারটি কোন OS-এ চলছিল, বা তার চেয়েও গুরুত্বপূর্ণ, কর্মক্ষমতা পরীক্ষা চলাকালীন HTML5 ক্যানভাস হার্ডওয়্যার ত্বরান্বিত হয়েছিল কিনা। আপনি অ্যাড্রেস বারে about:gpu এ গিয়ে Chrome-এর HTML5 ক্যানভাস হার্ডওয়্যার ত্বরান্বিত কিনা তা জানতে পারেন।

একটি অফ-স্ক্রিন ক্যানভাসে প্রি-রেন্ডার করুন

আপনি যদি একাধিক ফ্রেম জুড়ে স্ক্রিনে অনুরূপ আদিম জিনিসগুলি পুনরায় আঁকতে থাকেন, যেমনটি প্রায়শই একটি গেম লেখার সময় হয়, আপনি দৃশ্যের বড় অংশগুলিকে প্রাক-রেন্ডারিং করে বড় পারফরম্যান্স লাভ করতে পারেন। প্রি-রেন্ডারিং মানে হল একটি আলাদা অফ-স্ক্রিন ক্যানভাস (বা ক্যানভাস) ব্যবহার করা যার উপর অস্থায়ী ছবি রেন্ডার করা যায় এবং তারপরে অফ-স্ক্রিন ক্যানভাসগুলিকে দৃশ্যমান ছবিতে ফিরিয়ে দেওয়া। উদাহরণস্বরূপ, ধরুন আপনি একটি সেকেন্ডে 60 ফ্রেমে চলমান মারিও পুনরায় অঙ্কন করছেন। আপনি প্রতিটি ফ্রেমে তার টুপি, গোঁফ এবং "M" পুনরায় আঁকতে পারেন, অথবা অ্যানিমেশন চালানোর আগে মারিওকে প্রি-রেন্ডার করতে পারেন৷ কোনো প্রাক-রেন্ডারিং নেই:

// canvas, context are defined
function render() {
  drawMario(context);
  requestAnimationFrame(render);
}

প্রি-রেন্ডারিং:

var m_canvas = document.createElement('canvas');
m_canvas.width = 64;
m_canvas.height = 64;
var m_context = m_canvas.getContext('2d');
drawMario(m_context);

function render() {
  context.drawImage(m_canvas, 0, 0);
  requestAnimationFrame(render);
}

requestAnimationFrame ব্যবহার নোট করুন, যা পরবর্তী বিভাগে আরও বিশদে আলোচনা করা হয়েছে।

এই কৌশলটি বিশেষভাবে কার্যকর যখন রেন্ডারিং অপারেশন ( উপরের উদাহরণে drawMario ) ব্যয়বহুল। এর একটি ভাল উদাহরণ হল পাঠ্য রেন্ডারিং, যা একটি অত্যন্ত ব্যয়বহুল অপারেশন।

যাইহোক, "প্রি-রেন্ডারড লুজ" টেস্ট কেসের খারাপ পারফরম্যান্স। প্রি-রেন্ডারিং করার সময়, এটি নিশ্চিত করা গুরুত্বপূর্ণ যে আপনার অস্থায়ী ক্যানভাস আপনি যে চিত্রটি আঁকছেন তার চারপাশে মসৃণভাবে ফিট করে, অন্যথায় একটি বড় ক্যানভাসকে অন্যটিতে অনুলিপি করার কর্মক্ষমতা ক্ষতির দ্বারা অফ-স্ক্রিন রেন্ডারিংয়ের কার্যক্ষমতা লাভের বিপরীতে হয় (যা একটি হিসাবে পরিবর্তিত হয় উৎস লক্ষ্য আকারের ফাংশন)। উপরের পরীক্ষায় একটি স্নাগ ক্যানভাস সহজভাবে ছোট:

can2.width = 100;
can2.height = 40;

ঢিলেঢালাটির তুলনায় যা খারাপ কর্মক্ষমতা দেয়:

can3.width = 300;
can3.height = 100;

ব্যাচ ক্যানভাস কল একসাথে

যেহেতু অঙ্কন একটি ব্যয়বহুল অপারেশন, এটি একটি দীর্ঘ কমান্ডের সাথে ড্রয়িং স্টেট মেশিন লোড করা এবং তারপরে সেগুলিকে ভিডিও বাফারে ফেলে দেওয়া আরও কার্যকর।

উদাহরণস্বরূপ, একাধিক লাইন আঁকার সময়, এটিতে থাকা সমস্ত লাইন দিয়ে একটি পথ তৈরি করা এবং একটি একক ড্র কল দিয়ে এটি আঁকানো আরও কার্যকর। অন্য কথায়, আলাদা লাইন আঁকার পরিবর্তে:

for (var i = 0; i < points.length - 1; i++) {
  var p1 = points[i];
  var p2 = points[i+1];
  context.beginPath();
  context.moveTo(p1.x, p1.y);
  context.lineTo(p2.x, p2.y);
  context.stroke();
}

আমরা একটি একক পলিলাইন অঙ্কন থেকে আরও ভাল পারফরম্যান্স পাই:

context.beginPath();
for (var i = 0; i < points.length - 1; i++) {
  var p1 = points[i];
  var p2 = points[i+1];
  context.moveTo(p1.x, p1.y);
  context.lineTo(p2.x, p2.y);
}
context.stroke();

এটি HTML5 ক্যানভাসের জগতেও প্রযোজ্য। একটি জটিল পথ আঁকার সময়, উদাহরণস্বরূপ, সেগমেন্টগুলিকে আলাদাভাবে রেন্ডার করার পরিবর্তে সমস্ত পয়েন্টগুলিকে পাথের মধ্যে রাখা ভাল ( jsperf )।

উল্লেখ্য, তবে, ক্যানভাসের ক্ষেত্রে এই নিয়মের একটি গুরুত্বপূর্ণ ব্যতিক্রম রয়েছে: যদি পছন্দসই বস্তুটি আঁকার সাথে জড়িত আদিমদের ছোট বাউন্ডিং বাক্স থাকে (উদাহরণস্বরূপ, অনুভূমিক এবং উল্লম্ব রেখা), তবে তাদের আলাদাভাবে রেন্ডার করা আরও কার্যকর হতে পারে ( jsperf )।

অপ্রয়োজনীয় ক্যানভাস অবস্থা পরিবর্তন এড়িয়ে চলুন

HTML5 ক্যানভাস উপাদানটি একটি স্টেট মেশিনের উপরে প্রয়োগ করা হয় যা ফিল এবং স্ট্রোক শৈলীর মতো জিনিসগুলিকে ট্র্যাক করে, সেইসাথে আগের পয়েন্টগুলি যা বর্তমান পথ তৈরি করে। গ্রাফিক্স কর্মক্ষমতা অপ্টিমাইজ করার চেষ্টা করার সময়, এটি শুধুমাত্র গ্রাফিক্স রেন্ডারিংয়ের উপর ফোকাস করতে প্রলুব্ধ করে। যাইহোক, রাষ্ট্রীয় যন্ত্রকে ম্যানিপুলেট করাও একটি কর্মক্ষমতা ওভারহেড বহন করতে পারে। আপনি যদি একটি দৃশ্য রেন্ডার করতে একাধিক ফিল কালার ব্যবহার করেন, উদাহরণস্বরূপ, ক্যানভাসে প্লেসমেন্টের পরিবর্তে রঙ দ্বারা রেন্ডার করা সস্তা। একটি পিনস্ট্রাইপ প্যাটার্ন রেন্ডার করতে, আপনি একটি স্ট্রাইপ রেন্ডার করতে পারেন, রঙ পরিবর্তন করতে পারেন, পরবর্তী স্ট্রাইপ রেন্ডার করতে পারেন, ইত্যাদি:

for (var i = 0; i < STRIPES; i++) {
  context.fillStyle = (i % 2 ? COLOR1 : COLOR2);
  context.fillRect(i * GAP, 0, GAP, 480);
}

অথবা সমস্ত বিজোড় স্ট্রাইপ এবং তারপর সমস্ত জোড় স্ট্রাইপ রেন্ডার করুন:

context.fillStyle = COLOR1;
for (var i = 0; i < STRIPES/2; i++) {
  context.fillRect((i*2) * GAP, 0, GAP, 480);
}
context.fillStyle = COLOR2;
for (var i = 0; i < STRIPES/2; i++) {
  context.fillRect((i*2+1) * GAP, 0, GAP, 480);
}

প্রত্যাশিত হিসাবে, ইন্টারলেসড পদ্ধতিটি ধীর কারণ স্টেট মেশিন পরিবর্তন করা ব্যয়বহুল।

শুধুমাত্র স্ক্রীনের পার্থক্য রেন্ডার করুন, সম্পূর্ণ নতুন অবস্থা নয়

যেমনটি কেউ আশা করবে, স্ক্রিনে কম রেন্ডার করা বেশি রেন্ডার করার চেয়ে সস্তা। যদি আপনার পুনরায় আঁকার মধ্যে শুধুমাত্র ক্রমবর্ধমান পার্থক্য থাকে তবে আপনি পার্থক্যটি অঙ্কন করে একটি উল্লেখযোগ্য কর্মক্ষমতা বৃদ্ধি পেতে পারেন। অন্য কথায়, আঁকার আগে পুরো স্ক্রিনটি পরিষ্কার করার পরিবর্তে:

context.fillRect(0, 0, canvas.width, canvas.height);

টানা বাউন্ডিং বাক্সের ট্র্যাক রাখুন, এবং শুধুমাত্র এটি পরিষ্কার করুন।

context.fillRect(last.x, last.y, last.width, last.height);

আপনি যদি কম্পিউটার গ্রাফিক্সের সাথে পরিচিত হন তবে আপনি এই কৌশলটিকে "পুনরায় আঁকতে অঞ্চল" হিসাবেও জানেন, যেখানে পূর্বে রেন্ডার করা বাউন্ডিং বক্সটি সংরক্ষণ করা হয় এবং তারপর প্রতিটি রেন্ডারিংয়ে সাফ করা হয়৷ এই কৌশলটি পিক্সেল-ভিত্তিক রেন্ডারিং প্রসঙ্গেও প্রযোজ্য, যেমনটি এই জাভাস্ক্রিপ্ট নিন্টেন্ডো এমুলেটর টক দ্বারা চিত্রিত হয়েছে।

জটিল দৃশ্যের জন্য একাধিক স্তরযুক্ত ক্যানভাস ব্যবহার করুন

আগেই উল্লেখ করা হয়েছে, বড় ছবি আঁকা ব্যয়বহুল এবং সম্ভব হলে এড়িয়ে যাওয়া উচিত। প্রি-রেন্ডারিং বিভাগে যেমন দেখানো হয়েছে, অফ স্ক্রিন রেন্ডার করার জন্য অন্য ক্যানভাস ব্যবহার করার পাশাপাশি, আমরা একটির উপরে স্তরযুক্ত ক্যানভাসগুলিও ব্যবহার করতে পারি। ফোরগ্রাউন্ড ক্যানভাসে স্বচ্ছতা ব্যবহার করে, আমরা রেন্ডারের সময়ে একসাথে আলফা কম্পোজিট করার জন্য GPU-এর উপর নির্ভর করতে পারি। আপনি এটিকে নিম্নরূপ সেট আপ করতে পারেন, একটির উপরে দুটি একেবারে অবস্থানযুক্ত ক্যানভাস সহ।

<canvas id="bg" width="640" height="480" style="position: absolute; z-index: 0">
</canvas>
<canvas id="fg" width="640" height="480" style="position: absolute; z-index: 1">
</canvas>

এখানে শুধুমাত্র একটি ক্যানভাস থাকার সুবিধা হল, আমরা যখন ফোরগ্রাউন্ড ক্যানভাস আঁকি বা পরিষ্কার করি, তখন আমরা কখনই পটভূমি পরিবর্তন করি না। যদি আপনার গেম বা মাল্টিমিডিয়া অ্যাপকে একটি অগ্রভাগ এবং পটভূমিতে বিভক্ত করা যায়, তাহলে উল্লেখযোগ্য পারফরম্যান্স বুস্ট পেতে আলাদা ক্যানভাসে রেন্ডার করার কথা বিবেচনা করুন।

আপনি প্রায়শই অপূর্ণ মানব উপলব্ধির সুবিধা নিতে পারেন এবং অগ্রভাগের তুলনায় একবার বা ধীর গতিতে ব্যাকগ্রাউন্ড রেন্ডার করতে পারেন (যা আপনার ব্যবহারকারীর বেশিরভাগ মনোযোগ দখল করতে পারে)। উদাহরণস্বরূপ, আপনি প্রতিবার রেন্ডার করার সময় ফোরগ্রাউন্ড রেন্ডার করতে পারেন, তবে প্রতি Nth ফ্রেমে শুধুমাত্র ব্যাকগ্রাউন্ড রেন্ডার করতে পারেন। এছাড়াও মনে রাখবেন যে এই পদ্ধতিটি যেকোন সংখ্যক যৌগিক ক্যানভাসের জন্য ভালভাবে সাধারণীকরণ করে যদি আপনার অ্যাপ্লিকেশনটি এই ধরণের কাঠামোর সাথে আরও ভাল কাজ করে।

শ্যাডোব্লার এড়িয়ে চলুন

অন্যান্য অনেক গ্রাফিক্স পরিবেশের মতো, HTML5 ক্যানভাস ডেভেলপারদের আদিম জিনিসগুলিকে অস্পষ্ট করতে দেয়, কিন্তু এই অপারেশনটি খুব ব্যয়বহুল হতে পারে:

context.shadowOffsetX = 5;
context.shadowOffsetY = 5;
context.shadowBlur = 4;
context.shadowColor = 'rgba(255, 0, 0, 0.5)';
context.fillRect(20, 20, 150, 100);

ক্যানভাস পরিষ্কার করার বিভিন্ন উপায় জানুন

যেহেতু HTML5 ক্যানভাস একটি তাৎক্ষণিক মোড অঙ্কন দৃষ্টান্ত, তাই দৃশ্যটি প্রতিটি ফ্রেমে স্পষ্টভাবে পুনরায় আঁকতে হবে। এই কারণে, ক্যানভাস সাফ করা HTML5 ক্যানভাস অ্যাপ এবং গেমগুলির জন্য একটি মৌলিকভাবে গুরুত্বপূর্ণ কাজ। ক্যানভাস এড়িয়ে চলুন অবস্থা পরিবর্তন বিভাগে উল্লিখিত হিসাবে, সম্পূর্ণ ক্যানভাস সাফ করা প্রায়ই অবাঞ্ছিত, কিন্তু যদি আপনাকে এটি করতেই হয় তবে দুটি বিকল্প রয়েছে: context.clearRect(0, 0, width, height) কল করা বা একটি ক্যানভাস-নির্দিষ্ট হ্যাক ব্যবহার করা এটি করতে: canvas.width = canvas.width ;.লেখার সময়, clearRect সাধারণত প্রস্থ রিসেট সংস্করণকে ছাড়িয়ে যায়, কিন্তু কিছু ক্ষেত্রে canvas.width রিসেটিং হ্যাক ব্যবহার করে Chrome 14 এ উল্লেখযোগ্যভাবে দ্রুত হয়

এই টিপটির সাথে সতর্কতা অবলম্বন করুন, যেহেতু এটি অন্তর্নিহিত ক্যানভাস বাস্তবায়নের উপর অনেক বেশি নির্ভর করে এবং এটি পরিবর্তনের বিষয়। আরও তথ্যের জন্য, ক্যানভাস পরিষ্কার করার বিষয়ে সাইমন সারিসের নিবন্ধটি দেখুন।

ফ্লোটিং পয়েন্ট স্থানাঙ্ক এড়িয়ে চলুন

HTML5 ক্যানভাস সাব-পিক্সেল রেন্ডারিং সমর্থন করে এবং এটি বন্ধ করার কোন উপায় নেই। আপনি যদি স্থানাঙ্ক দিয়ে আঁকেন যা পূর্ণসংখ্যা নয়, তাহলে এটি স্বয়ংক্রিয়ভাবে অ্যান্টি-অ্যালিয়াসিং ব্যবহার করে লাইনগুলিকে মসৃণ করার চেষ্টা করে। Seb Lee-Delisle-এর এই সাব-পিক্সেল ক্যানভাস পারফরম্যান্স নিবন্ধ থেকে নেওয়া ভিজ্যুয়াল ইফেক্টটি এখানে রয়েছে:

সাব-পিক্সেল

যদি মসৃণ স্প্রাইট আপনার চাওয়া প্রভাব না হয়, তাহলে Math.floor বা Math.round ( jsperf ) ব্যবহার করে আপনার স্থানাঙ্কগুলিকে পূর্ণসংখ্যাতে রূপান্তর করা আরও দ্রুত হতে পারে :

আপনার ফ্লোটিং পয়েন্ট স্থানাঙ্কগুলিকে পূর্ণসংখ্যাতে রূপান্তর করতে, আপনি বেশ কয়েকটি চতুর কৌশল ব্যবহার করতে পারেন, যার মধ্যে সবচেয়ে কার্যকরী হল লক্ষ্য সংখ্যার সাথে একটি অর্ধেক যোগ করা এবং তারপর ভগ্নাংশের অংশটি বাদ দেওয়ার জন্য ফলাফলের উপর বিটওয়াইজ ক্রিয়াকলাপ সম্পাদন করা।

// With a bitwise or.
rounded = (0.5 + somenum) | 0;
// A double bitwise not.
rounded = ~~ (0.5 + somenum);
// Finally, a left bitwise shift.
rounded = (0.5 + somenum) << 0;

সম্পূর্ণ কর্মক্ষমতা ব্রেকডাউন এখানে ( jsperf )।

মনে রাখবেন যে এই ধরণের অপ্টিমাইজেশানের আর কোন ব্যাপার হবে না একবার ক্যানভাস বাস্তবায়ন GPU ত্বরান্বিত হলে যা দ্রুত অ-পূর্ণসংখ্যা স্থানাঙ্ক রেন্ডার করতে সক্ষম হবে।

requestAnimationFrame দিয়ে আপনার অ্যানিমেশনগুলি অপ্টিমাইজ করুন

তুলনামূলকভাবে নতুন requestAnimationFrame API হল ব্রাউজারে ইন্টারেক্টিভ অ্যাপ্লিকেশন বাস্তবায়নের প্রস্তাবিত উপায়। ব্রাউজারকে নির্দিষ্ট নির্দিষ্ট টিক রেট রেন্ডার করার নির্দেশ দেওয়ার পরিবর্তে, আপনি বিনয়ের সাথে ব্রাউজারকে আপনার রেন্ডারিং রুটিন কল করতে বলুন এবং ব্রাউজারটি উপলব্ধ হলে কল করতে বলুন। একটি চমৎকার পার্শ্ব প্রতিক্রিয়া হিসাবে, যদি পৃষ্ঠাটি ফোরগ্রাউন্ডে না থাকে, ব্রাউজারটি রেন্ডার না করার জন্য যথেষ্ট স্মার্ট। requestAnimationFrame কলব্যাকের লক্ষ্য 60 এফপিএস কলব্যাক রেট কিন্তু এটি গ্যারান্টি দেয় না, তাই আপনাকে শেষ রেন্ডার থেকে কত সময় কেটে গেছে তার ট্র্যাক রাখতে হবে। এটি নিম্নলিখিত মত কিছু দেখতে পারে:

var x = 100;
var y = 100;
var lastRender = Date.now();
function render() {
  var delta = Date.now() - lastRender;
  x += delta;
  y += delta;
  context.fillRect(x, y, W, H);
  requestAnimationFrame(render);
}
render();

নোট করুন যে requestAnimationFrame এই ব্যবহারটি ক্যানভাসের পাশাপাশি WebGL-এর মতো অন্যান্য রেন্ডারিং প্রযুক্তিতেও প্রযোজ্য। লেখার সময়, এই API শুধুমাত্র Chrome, Safari এবং Firefox-এ উপলব্ধ, তাই আপনার এই শিমটি ব্যবহার করা উচিত।

বেশিরভাগ মোবাইল ক্যানভাস বাস্তবায়ন ধীর

মোবাইলের কথা বলি। দুর্ভাগ্যবশত লেখার সময়, শুধুমাত্র iOS 5.0 বিটা চলমান Safari 5.1-এ GPU ত্বরিত মোবাইল ক্যানভাস বাস্তবায়ন রয়েছে। GPU ত্বরণ ছাড়া, মোবাইল ব্রাউজারগুলিতে সাধারণত আধুনিক ক্যানভাস-ভিত্তিক অ্যাপ্লিকেশনগুলির জন্য যথেষ্ট শক্তিশালী CPU গুলি থাকে না। উপরে বর্ণিত বেশ কয়েকটি JSPerf পরীক্ষাগুলি ডেস্কটপের তুলনায় মোবাইলে আরও খারাপ ক্রম সঞ্চালন করে, আপনি যে ধরণের ক্রস-ডিভাইস অ্যাপগুলি সফলভাবে চালানোর আশা করতে পারেন তা ব্যাপকভাবে সীমাবদ্ধ করে।

উপসংহার

রিক্যাপ করার জন্য, এই নিবন্ধটি দরকারী অপ্টিমাইজেশন কৌশলগুলির একটি বিস্তৃত সেট কভার করেছে যা আপনাকে কার্যকরী HTML5 ক্যানভাস-ভিত্তিক প্রকল্পগুলি বিকাশ করতে সহায়তা করবে৷ এখন যেহেতু আপনি এখানে নতুন কিছু শিখেছেন, এগিয়ে যান এবং আপনার দুর্দান্ত সৃষ্টিগুলিকে অপ্টিমাইজ করুন৷ অথবা, যদি আপনার কাছে বর্তমানে অপ্টিমাইজ করার জন্য কোনো গেম বা অ্যাপ্লিকেশন না থাকে, তাহলে অনুপ্রেরণার জন্য Chrome পরীক্ষা এবং ক্রিয়েটিভ JS দেখুন।

তথ্যসূত্র