20 KiB
ব্রাউজার এক্সটেনশন প্রকল্প পার্ট ৩: ব্যাকগ্রাউন্ড টাস্ক এবং পারফরম্যান্স সম্পর্কে জানুন
প্রাক-লেকচার কুইজ
ভূমিকা
এই মডিউলের শেষ দুটি পাঠে, আপনি শিখেছেন কীভাবে একটি ফর্ম তৈরি করতে হয় এবং একটি API থেকে আনা ডেটা প্রদর্শনের জন্য একটি এলাকা তৈরি করতে হয়। এটি ওয়েবে একটি ওয়েব উপস্থিতি তৈরির একটি খুব সাধারণ পদ্ধতি। আপনি এমনকি অ্যাসিঙ্ক্রোনাসভাবে ডেটা ফেচ করার পদ্ধতিও শিখেছেন। আপনার ব্রাউজার এক্সটেনশন প্রায় সম্পূর্ণ।
এখন কিছু ব্যাকগ্রাউন্ড টাস্ক পরিচালনা করা বাকি, যার মধ্যে রয়েছে এক্সটেনশনের আইকনের রঙ রিফ্রেশ করা। এটি একটি চমৎকার সময় ব্রাউজার কীভাবে এই ধরনের কাজ পরিচালনা করে তা নিয়ে আলোচনা করার। আসুন এই ব্রাউজার টাস্কগুলোকে আপনার ওয়েব অ্যাসেট তৈরি করার সময় পারফরম্যান্সের প্রেক্ষাপটে বিবেচনা করি।
ওয়েব পারফরম্যান্সের মৌলিক বিষয়
"ওয়েবসাইট পারফরম্যান্স দুটি বিষয়ে: পৃষ্ঠা কত দ্রুত লোড হয় এবং এর কোড কত দ্রুত চলে।" -- জ্যাক গ্রোসবার্ট
আপনার ওয়েবসাইটগুলোকে সব ধরনের ডিভাইস, ব্যবহারকারী এবং পরিস্থিতিতে অত্যন্ত দ্রুতগতির করার বিষয়টি বিস্তৃত। এখানে কিছু পয়েন্ট রয়েছে যা আপনাকে একটি স্ট্যান্ডার্ড ওয়েব প্রকল্প বা একটি ব্রাউজার এক্সটেনশন তৈরি করার সময় মনে রাখতে হবে।
আপনার সাইটটি দক্ষতার সাথে চলছে তা নিশ্চিত করার জন্য প্রথমে যা করতে হবে তা হল এর পারফরম্যান্স সম্পর্কে ডেটা সংগ্রহ করা। এটি করার প্রথম জায়গা হল আপনার ওয়েব ব্রাউজারের ডেভেলপার টুলস। Edge-এ, আপনি "Settings and more" বোতামটি (ব্রাউজারের উপরের ডানদিকে তিনটি ডট আইকন) নির্বাচন করতে পারেন, তারপর More Tools > Developer Tools-এ যান এবং Performance ট্যাবটি খুলুন। আপনি Windows-এ Ctrl + Shift + I বা Mac-এ Option + Command + I কীবোর্ড শর্টকাট ব্যবহার করেও ডেভেলপার টুলস খুলতে পারেন।
Performance ট্যাবে একটি প্রোফাইলিং টুল রয়েছে। একটি ওয়েবসাইট খুলুন (উদাহরণস্বরূপ, https://www.microsoft.com) এবং 'Record' বোতামে ক্লিক করুন, তারপর সাইটটি রিফ্রেশ করুন। যেকোনো সময় রেকর্ডিং বন্ধ করুন, এবং আপনি দেখতে পাবেন যে সাইটটি 'স্ক্রিপ্ট', 'রেন্ডার' এবং 'পেইন্ট' করার জন্য কী কী রুটিন তৈরি হয়েছে:
✅ Edge-এর Performance প্যানেলে Microsoft ডকুমেন্টেশন দেখুন
টিপ: আপনার ওয়েবসাইটের স্টার্টআপ টাইমের সঠিক রিডিং পেতে, আপনার ব্রাউজারের ক্যাশে ক্লিয়ার করুন
প্রোফাইল টাইমলাইনের উপাদানগুলো নির্বাচন করুন এবং দেখুন আপনার পৃষ্ঠা লোড হওয়ার সময় কী কী ইভেন্ট ঘটে।
প্রোফাইল টাইমলাইনের একটি অংশ নির্বাচন করে এবং সারাংশ প্যানটি দেখে আপনার পৃষ্ঠার পারফরম্যান্সের একটি স্ন্যাপশট নিন:
ইভেন্ট লগ প্যানটি চেক করুন এবং দেখুন কোনো ইভেন্ট ১৫ মিলিসেকেন্ডের বেশি সময় নিয়েছে কিনা:
✅ আপনার প্রোফাইলারটি জানুন! এই সাইটে ডেভেলপার টুলস খুলুন এবং দেখুন কোনো বোতলনেক আছে কিনা। সবচেয়ে ধীরগতির লোডিং অ্যাসেট কোনটি? সবচেয়ে দ্রুততম কোনটি?
প্রোফাইলিং চেক
সাধারণভাবে, কিছু "সমস্যার ক্ষেত্র" রয়েছে যা প্রতিটি ওয়েব ডেভেলপারকে একটি সাইট তৈরি করার সময় লক্ষ্য রাখা উচিত, যাতে প্রোডাকশনে ডিপ্লয় করার সময় কোনো অপ্রত্যাশিত সমস্যার সম্মুখীন না হয়।
অ্যাসেট সাইজ: গত কয়েক বছরে ওয়েব আরও 'ভারী' এবং ধীর হয়ে উঠেছে। এর একটি বড় অংশ চিত্র ব্যবহারের সাথে সম্পর্কিত।
✅ ইন্টারনেট আর্কাইভ-এ পৃষ্ঠা ওজনের ঐতিহাসিক দৃশ্য এবং আরও অনেক কিছু দেখুন।
একটি ভালো অভ্যাস হল নিশ্চিত করা যে আপনার চিত্রগুলো অপ্টিমাইজ করা হয়েছে এবং আপনার ব্যবহারকারীদের জন্য সঠিক আকার এবং রেজোলিউশনে সরবরাহ করা হয়েছে।
DOM ট্রাভার্সাল: ব্রাউজারকে আপনার লেখা কোডের উপর ভিত্তি করে তার ডকুমেন্ট অবজেক্ট মডেল তৈরি করতে হয়, তাই ভালো পৃষ্ঠা পারফরম্যান্সের স্বার্থে আপনার ট্যাগগুলোকে ন্যূনতম রাখা গুরুত্বপূর্ণ। পৃষ্ঠার জন্য প্রয়োজনীয় CSS ছাড়া অতিরিক্ত কিছু ব্যবহার না করাই ভালো।
জাভাস্ক্রিপ্ট: প্রতিটি জাভাস্ক্রিপ্ট ডেভেলপারের উচিত 'রেন্ডার-ব্লকিং' স্ক্রিপ্টগুলোর দিকে নজর রাখা, যেগুলো DOM ট্রাভার্স এবং ব্রাউজারে পেইন্ট করার আগে লোড করতে হয়। আপনার ইনলাইন স্ক্রিপ্টগুলোর সাথে defer ব্যবহার করার কথা বিবেচনা করুন (যেমনটি Terrarium মডিউলে করা হয়েছে)।
✅ সাইট স্পিড টেস্ট ওয়েবসাইট এ কিছু সাইট চেষ্টা করুন এবং দেখুন সাইট পারফরম্যান্স নির্ধারণের জন্য সাধারণত কী কী চেক করা হয়।
এখন যেহেতু আপনি জানেন ব্রাউজার কীভাবে আপনার পাঠানো অ্যাসেটগুলো রেন্ডার করে, আসুন আপনার এক্সটেনশন সম্পূর্ণ করতে প্রয়োজনীয় শেষ কয়েকটি বিষয় দেখি:
রঙ গণনা করার জন্য একটি ফাংশন তৈরি করুন
/src/index.js-এ কাজ করে, DOM-এ অ্যাক্সেস পাওয়ার জন্য সেট করা const ভেরিয়েবলগুলোর সিরিজের পরে calculateColor() নামে একটি ফাংশন যোগ করুন:
function calculateColor(value) {
let co2Scale = [0, 150, 600, 750, 800];
let colors = ['#2AA364', '#F5EB4D', '#9E4229', '#381D02', '#381D02'];
let closestNum = co2Scale.sort((a, b) => {
return Math.abs(a - value) - Math.abs(b - value);
})[0];
console.log(value + ' is closest to ' + closestNum);
let num = (element) => element > closestNum;
let scaleIndex = co2Scale.findIndex(num);
let closestColor = colors[scaleIndex];
console.log(scaleIndex, closestColor);
chrome.runtime.sendMessage({ action: 'updateIcon', value: { color: closestColor } });
}
এখানে কী হচ্ছে? আপনি API কল থেকে প্রাপ্ত একটি মান (কার্বন ইন্টেনসিটি) পাস করেন, এবং তারপর এটি রঙের অ্যারের সূচকের সাথে কতটা কাছাকাছি তা গণনা করেন। তারপর আপনি সেই সবচেয়ে কাছের রঙের মানটি chrome runtime-এ পাঠান।
chrome.runtime-এ একটি API রয়েছে যা সব ধরনের ব্যাকগ্রাউন্ড টাস্ক পরিচালনা করে, এবং আপনার এক্সটেনশন এটি ব্যবহার করছে:
"chrome.runtime API ব্যবহার করে ব্যাকগ্রাউন্ড পৃষ্ঠা পুনরুদ্ধার করুন, ম্যানিফেস্টের বিবরণ ফেরত দিন এবং অ্যাপ বা এক্সটেনশনের লাইফসাইকেলের ইভেন্টগুলো শোনার এবং সাড়া দেওয়ার জন্য ব্যবহার করুন।"
✅ আপনি যদি Edge-এর জন্য এই ব্রাউজার এক্সটেনশনটি তৈরি করছেন, তবে এটি জেনে অবাক হতে পারেন যে আপনি একটি chrome API ব্যবহার করছেন। নতুন Edge ব্রাউজার সংস্করণগুলো Chromium ব্রাউজার ইঞ্জিনে চলে, তাই আপনি এই টুলগুলো ব্যবহার করতে পারেন।
নোট, যদি আপনি একটি ব্রাউজার এক্সটেনশন প্রোফাইল করতে চান, এক্সটেনশনের ভিতর থেকে ডেভেলপার টুলস চালু করুন, কারণ এটি নিজস্ব একটি আলাদা ব্রাউজার ইনস্ট্যান্স।
একটি ডিফল্ট আইকন রঙ সেট করুন
এখন, init() ফাংশনে, আইকনটিকে শুরুতে একটি সাধারণ সবুজ রঙে সেট করুন chrome-এর updateIcon অ্যাকশন কল করে:
chrome.runtime.sendMessage({
action: 'updateIcon',
value: {
color: 'green',
},
});
ফাংশনটি কল করুন এবং কলটি কার্যকর করুন
পরবর্তী ধাপে, আপনি যে ফাংশনটি তৈরি করেছেন সেটি C02Signal API থেকে প্রাপ্ত প্রমিসে যোগ করুন:
//let CO2...
calculateColor(CO2);
এবং শেষ পর্যন্ত, /dist/background.js-এ এই ব্যাকগ্রাউন্ড অ্যাকশন কলগুলোর জন্য একটি লিসেনার যোগ করুন:
chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
if (msg.action === 'updateIcon') {
chrome.browserAction.setIcon({ imageData: drawIcon(msg.value) });
}
});
//borrowed from energy lollipop extension, nice feature!
function drawIcon(value) {
let canvas = document.createElement('canvas');
let context = canvas.getContext('2d');
context.beginPath();
context.fillStyle = value.color;
context.arc(100, 100, 50, 0, 2 * Math.PI);
context.fill();
return context.getImageData(50, 50, 100, 100);
}
এই কোডে, আপনি ব্যাকএন্ড টাস্ক ম্যানেজারে আসা যেকোনো মেসেজের জন্য একটি লিসেনার যোগ করছেন। যদি এটি 'updateIcon' নামে ডাকা হয়, তবে পরবর্তী কোডটি Canvas API ব্যবহার করে সঠিক রঙের একটি আইকন আঁকতে চালানো হয়।
✅ আপনি Space Game পাঠে Canvas API সম্পর্কে আরও শিখবেন।
এখন, আপনার এক্সটেনশনটি পুনরায় তৈরি করুন (npm run build), রিফ্রেশ করুন এবং এক্সটেনশনটি চালু করুন এবং রঙ পরিবর্তন দেখুন। এটি কি কোনো কাজ করার বা থালা-বাসন ধোয়ার ভালো সময়? এখন আপনি জানেন!
অভিনন্দন, আপনি একটি কার্যকরী ব্রাউজার এক্সটেনশন তৈরি করেছেন এবং ব্রাউজার কীভাবে কাজ করে এবং কীভাবে এর পারফরম্যান্স প্রোফাইল করতে হয় তা শিখেছেন।
🚀 চ্যালেঞ্জ
কিছু ওপেন সোর্স ওয়েবসাইট তদন্ত করুন যা অনেক দিন আগে তৈরি হয়েছিল এবং তাদের GitHub ইতিহাসের উপর ভিত্তি করে দেখুন তারা বছরের পর বছর ধরে পারফরম্যান্সের জন্য কীভাবে অপ্টিমাইজ করা হয়েছে, যদি আদৌ করা হয়। সবচেয়ে সাধারণ সমস্যার ক্ষেত্র কোনটি?
পোস্ট-লেকচার কুইজ
পর্যালোচনা ও স্ব-অধ্যয়ন
একটি পারফরম্যান্স নিউজলেটার সাবস্ক্রাইব করার কথা বিবেচনা করুন।
ব্রাউজারগুলো কীভাবে ওয়েব পারফরম্যান্স পরিমাপ করে তা জানার জন্য তাদের ওয়েব টুলগুলোর পারফরম্যান্স ট্যাবগুলো দেখুন। আপনি কি কোনো বড় পার্থক্য খুঁজে পান?
অ্যাসাইনমেন্ট
একটি সাইটের পারফরম্যান্স বিশ্লেষণ করুন
অস্বীকৃতি:
এই নথিটি AI অনুবাদ পরিষেবা Co-op Translator ব্যবহার করে অনুবাদ করা হয়েছে। আমরা যথাসাধ্য সঠিকতার জন্য চেষ্টা করি, তবে অনুগ্রহ করে মনে রাখবেন যে স্বয়ংক্রিয় অনুবাদে ত্রুটি বা অসঙ্গতি থাকতে পারে। এর মূল ভাষায় থাকা নথিটিকে প্রামাণিক উৎস হিসেবে বিবেচনা করা উচিত। গুরুত্বপূর্ণ তথ্যের জন্য, পেশাদার মানব অনুবাদ সুপারিশ করা হয়। এই অনুবাদ ব্যবহারের ফলে কোনো ভুল বোঝাবুঝি বা ভুল ব্যাখ্যা হলে আমরা তার জন্য দায়বদ্ধ নই।