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' বোতামে ক্লিক করুন, তারপর সাইটটি রিফ্রেশ করুন। যে কোনো সময় রেকর্ডিং বন্ধ করুন, এবং আপনি দেখতে পাবেন যে সাইটটি 'script', 'render', এবং 'paint' করার জন্য কী কী রুটিন তৈরি হয়েছে:
✅ Microsoft ডকুমেন্টেশন দেখুন Edge-এর Performance প্যানেল সম্পর্কে
টিপ: আপনার ওয়েবসাইটের স্টার্টআপ সময়ের সঠিক পরিমাপ পেতে, আপনার ব্রাউজারের ক্যাশ পরিষ্কার করুন
প্রোফাইল টাইমলাইনের উপাদান নির্বাচন করে আপনার পৃষ্ঠার লোড হওয়ার সময় ঘটে যাওয়া ইভেন্টগুলোর দিকে জুম করুন।
প্রোফাইল টাইমলাইনের একটি অংশ নির্বাচন করে এবং সারাংশ প্যান দেখুন আপনার পৃষ্ঠার পারফরম্যান্সের একটি স্ন্যাপশট পান:
ইভেন্ট লগ প্যান চেক করুন এবং দেখুন কোনো ইভেন্ট ১৫ মিলিসেকেন্ডের বেশি সময় নিয়েছে কিনা:
✅ আপনার প্রোফাইলার সম্পর্কে জানুন! এই সাইটে ডেভেলপার টুলস খুলুন এবং দেখুন কোনো বাধা আছে কিনা। সবচেয়ে ধীর লোডিং অ্যাসেট কোনটি? সবচেয়ে দ্রুত কোনটি?
প্রোফাইলিং চেক
সাধারণভাবে, কিছু "সমস্যার ক্ষেত্র" রয়েছে যা প্রতিটি ওয়েব ডেভেলপারকে একটি সাইট তৈরি করার সময় নজর রাখা উচিত যাতে প্রোডাকশনে ডিপ্লয় করার সময় কোনো অপ্রত্যাশিত সমস্যা না হয়।
অ্যাসেট সাইজ: গত কয়েক বছরে ওয়েব 'ভারী' হয়ে উঠেছে এবং তাই ধীর। এই ওজনের কিছু অংশ ইমেজ ব্যবহারের সাথে সম্পর্কিত।
✅ ইন্টারনেট আর্কাইভ দেখুন পৃষ্ঠার ওজনের ঐতিহাসিক দৃশ্য এবং আরও অনেক কিছু।
একটি ভালো অভ্যাস হলো নিশ্চিত করা যে আপনার ইমেজগুলো অপ্টিমাইজ করা হয়েছে এবং আপনার ব্যবহারকারীদের জন্য সঠিক সাইজ এবং রেজোলিউশনে সরবরাহ করা হয়েছে।
DOM ট্রাভার্সাল: ব্রাউজারকে তার ডকুমেন্ট অবজেক্ট মডেল তৈরি করতে হয় আপনার লেখা কোডের উপর ভিত্তি করে, তাই ভালো পৃষ্ঠার পারফরম্যান্সের স্বার্থে আপনার ট্যাগগুলোকে ন্যূনতম রাখা উচিত, শুধুমাত্র পৃষ্ঠার প্রয়োজনীয় অংশ ব্যবহার এবং স্টাইল করা উচিত। এই বিষয়ে, পৃষ্ঠার সাথে সম্পর্কিত অতিরিক্ত CSS অপ্টিমাইজ করা যেতে পারে; এমন স্টাইলগুলো যা শুধুমাত্র একটি পৃষ্ঠায় ব্যবহার করা প্রয়োজন সেগুলো প্রধান স্টাইল শিটে অন্তর্ভুক্ত করার প্রয়োজন নেই।
জাভাস্ক্রিপ্ট: প্রতিটি জাভাস্ক্রিপ্ট ডেভেলপারকে 'রেন্ডার-ব্লকিং' স্ক্রিপ্টগুলোর জন্য নজর রাখা উচিত যা DOM ট্রাভার্স এবং ব্রাউজারে পেইন্ট করার আগে লোড করতে হবে। আপনার ইনলাইন স্ক্রিপ্টগুলোর সাথে defer ব্যবহার করার কথা বিবেচনা করুন (যেমনটি Terrarium মডিউলে করা হয়েছে)।
✅ সাইট স্পিড টেস্ট ওয়েবসাইট এ কিছু সাইট চেষ্টা করুন এবং সাইট পারফরম্যান্স নির্ধারণের জন্য সাধারণ চেকগুলো সম্পর্কে জানুন।
এখন আপনি জানেন ব্রাউজার আপনার পাঠানো অ্যাসেটগুলো কীভাবে রেন্ডার করে, আসুন আপনার এক্সটেনশন সম্পূর্ণ করতে প্রয়োজনীয় শেষ কয়েকটি বিষয় দেখি:
রঙ গণনা করার জন্য একটি ফাংশন তৈরি করুন
/src/index.js-এ কাজ করে, calculateColor() নামে একটি ফাংশন যোগ করুন যা আপনি DOM-এ অ্যাক্সেস পাওয়ার জন্য সেট করা const ভেরিয়েবলগুলোর সিরিজের পরে লিখবেন:
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 ব্যবহার করে ব্যাকগ্রাউন্ড পৃষ্ঠা পুনরুদ্ধার করুন, ম্যানিফেস্ট সম্পর্কে বিস্তারিত ফেরত দিন এবং অ্যাপ বা এক্সটেনশন লাইফসাইকেলের ইভেন্টগুলোর জন্য শুনুন এবং সাড়া দিন। আপনি এই API ব্যবহার করে URL-এর আপেক্ষিক পথকে সম্পূর্ণ যোগ্য URL-এ রূপান্তর করতে পারেন।"
✅ যদি আপনি Edge-এর জন্য এই ব্রাউজার এক্সটেনশনটি তৈরি করছেন, তাহলে এটি আপনাকে অবাক করতে পারে যে আপনি একটি chrome API ব্যবহার করছেন। নতুন Edge ব্রাউজার সংস্করণগুলো Chromium ব্রাউজার ইঞ্জিনে চলে, তাই আপনি এই টুলগুলো ব্যবহার করতে পারেন।
নোট, যদি আপনি একটি ব্রাউজার এক্সটেনশন প্রোফাইল করতে চান, এক্সটেনশন নিজেই থেকে ডেভেলপার টুলস চালু করুন, কারণ এটি নিজস্ব আলাদা ব্রাউজার ইনস্ট্যান্স।
একটি ডিফল্ট আইকন রঙ সেট করুন
এখন, init() ফাংশনে, আইকনটি শুরুতে সাধারণ সবুজ রঙে সেট করুন আবার chrome-এর updateIcon অ্যাকশন কল করে:
chrome.runtime.sendMessage({
action: 'updateIcon',
value: {
color: 'green',
},
});
ফাংশনটি কল করুন, কলটি সম্পাদন করুন
পরবর্তী, আপনি যে ফাংশনটি তৈরি করেছেন সেটি C02Signal API থেকে ফেরত পাওয়া promise-এ যোগ করে কল করুন:
//let CO2...
calculateColor(CO2);
এবং শেষ পর্যন্ত, /dist/background.js-এ এই ব্যাকগ্রাউন্ড অ্যাকশন কলগুলোর জন্য লিসনার যোগ করুন:
chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
if (msg.action === 'updateIcon') {
chrome.action.setIcon({ imageData: drawIcon(msg.value) });
}
});
//borrowed from energy lollipop extension, nice feature!
function drawIcon(value) {
let canvas = new OffscreenCanvas(200, 200);
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 ব্যবহার করে সঠিক রঙের একটি আইকন আঁকতে চালানো হয়।
✅ আপনি Canvas API সম্পর্কে আরও জানবেন Space Game পাঠে।
এখন, আপনার এক্সটেনশনটি পুনরায় তৈরি করুন (npm run build), রিফ্রেশ করুন এবং আপনার এক্সটেনশন চালু করুন, এবং রঙ পরিবর্তন দেখুন। এটি কি কোনো কাজ করার বা থালা-বাসন ধোয়ার ভালো সময়? এখন আপনি জানেন!
অভিনন্দন, আপনি একটি কার্যকরী ব্রাউজার এক্সটেনশন তৈরি করেছেন এবং ব্রাউজার কীভাবে কাজ করে এবং এর পারফরম্যান্স প্রোফাইলিং সম্পর্কে আরও শিখেছেন।
🚀 চ্যালেঞ্জ
কিছু ওপেন সোর্স ওয়েবসাইট তদন্ত করুন যা অনেক আগে থেকে রয়েছে, এবং তাদের GitHub ইতিহাসের উপর ভিত্তি করে দেখুন তারা পারফরম্যান্সের জন্য কীভাবে অপ্টিমাইজ করা হয়েছে, যদি করা হয়ে থাকে। সবচেয়ে সাধারণ সমস্যার ক্ষেত্র কোনটি?
পোস্ট-লেকচার কুইজ
পর্যালোচনা এবং স্ব-অধ্যয়ন
একটি পারফরম্যান্স নিউজলেটার সাবস্ক্রাইব করার কথা বিবেচনা করুন।
ব্রাউজারগুলো কীভাবে ওয়েব পারফরম্যান্স পরিমাপ করে তা জানার জন্য তাদের ওয়েব টুলসের পারফরম্যান্স ট্যাবগুলো দেখুন। আপনি কি কোনো বড় পার্থক্য খুঁজে পান?
অ্যাসাইনমেন্ট
একটি সাইটের পারফরম্যান্স বিশ্লেষণ করুন
অস্বীকৃতি:
এই নথিটি AI অনুবাদ পরিষেবা Co-op Translator ব্যবহার করে অনুবাদ করা হয়েছে। আমরা যথাসম্ভব সঠিক অনুবাদের চেষ্টা করি, তবে অনুগ্রহ করে মনে রাখবেন যে স্বয়ংক্রিয় অনুবাদে ত্রুটি বা অসঙ্গতি থাকতে পারে। নথিটির মূল ভাষায় লেখা সংস্করণটিকেই প্রামাণিক উৎস হিসেবে বিবেচনা করা উচিত। গুরুত্বপূর্ণ তথ্যের জন্য পেশাদার মানব অনুবাদ সুপারিশ করা হয়। এই অনুবাদ ব্যবহারের ফলে সৃষ্ট কোনো ভুল বোঝাবুঝি বা ভুল ব্যাখ্যার জন্য আমরা দায়ী নই।