26 KiB

Raw Blame History

ব্রাউজার এক্সটেনশন প্রকল্প অংশ ৩: ব্যাকগ্রাউন্ড টাস্ক এবং পারফরম্যান্স সম্পর্কে জানুন

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

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

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

প্রি-লেকচার কুইজ

পরিচিতি

আমাদের আগের পাঠে, আপনি একটি ফর্ম তৈরি করেছেন, এটিকে একটি API এর সাথে সংযুক্ত করেছেন এবং অ্যাসিঙ্ক্রোনাস ডেটা ফেচিং মোকাবিলা করেছেন। আপনার এক্সটেনশনটি সুন্দরভাবে গড়ে উঠছে।

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

ওয়েব পারফরম্যান্সের মৌলিক বিষয়

যখন আপনার কোড দক্ষতার সাথে চলে, তখন মানুষ আসলেই পার্থক্য অনুভব করতে পারে। আপনি সেই মুহূর্তটি জানেন যখন একটি পৃষ্ঠা তাত্ক্ষণিকভাবে লোড হয় বা একটি অ্যানিমেশন মসৃণভাবে প্রবাহিত হয়? এটি ভালো পারফরম্যান্সের কাজ।

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

"ওয়েবসাইট পারফরম্যান্স দুটি বিষয়ে: পৃষ্ঠা কত দ্রুত লোড হয় এবং এর কোড কত দ্রুত চলে।" -- জ্যাক গ্রোসবার্ট

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

আপনার সাইট অপ্টিমাইজ করার প্রথম পদক্ষেপ হল বুঝতে পারা যে আসলে পর্দার পেছনে কী ঘটছে। সৌভাগ্যক্রমে, আপনার ব্রাউজারে শক্তিশালী ডিটেকটিভ টুলগুলি অন্তর্ভুক্ত রয়েছে।

Edge-এ ডেভেলপার টুলস খুলতে, উপরের ডানদিকে তিনটি ডট ক্লিক করুন, তারপর More Tools > Developer Tools-এ যান। অথবা কীবোর্ড শর্টকাট ব্যবহার করুন: Windows-এ Ctrl + Shift + I বা Mac-এ Option + Command + I। একবার সেখানে গেলে, Performance ট্যাবে ক্লিক করুন - এখানেই আপনি আপনার তদন্ত করবেন।

এখানে আপনার পারফরম্যান্স ডিটেকটিভ টুলকিট:

খুলুন ডেভেলপার টুলস (ডেভেলপার হিসেবে আপনি এগুলি ক্রমাগত ব্যবহার করবেন!)
যান Performance ট্যাবে - এটি আপনার ওয়েব অ্যাপের ফিটনেস ট্র্যাকার হিসেবে ভাবুন
ক্লিক করুন Record বোতামে এবং আপনার পৃষ্ঠার কার্যকলাপ দেখুন
পর্যালোচনা করুন ফলাফলগুলি কী জিনিসগুলি ধীর করে দিচ্ছে তা চিহ্নিত করতে

চলুন এটি চেষ্টা করি। একটি ওয়েবসাইট খুলুন (Microsoft.com ভালো কাজ করে) এবং সেই 'Record' বোতামে ক্লিক করুন। এখন পৃষ্ঠাটি রিফ্রেশ করুন এবং প্রোফাইলারটি যা ঘটছে তা ক্যাপচার করতে দিন। যখন আপনি রেকর্ডিং বন্ধ করবেন, তখন আপনি একটি বিস্তারিত বিশ্লেষণ দেখতে পাবেন যে ব্রাউজার কীভাবে সাইটটি 'স্ক্রিপ্ট', 'রেন্ডার' এবং 'পেইন্ট' করছে। এটি আমাকে মনে করিয়ে দেয় যে মিশন কন্ট্রোল কীভাবে একটি রকেট উৎক্ষেপণের সময় প্রতিটি সিস্টেম পর্যবেক্ষণ করে - আপনি ঠিক কী ঘটছে এবং কখন ঘটছে তার রিয়েল-টাইম ডেটা পান।

✅ Microsoft ডকুমেন্টেশন আরও বিস্তারিত তথ্য প্রদান করে যদি আপনি গভীরভাবে জানতে চান

প্রো টিপ: প্রথমবারের দর্শকদের জন্য আপনার সাইট কীভাবে পারফর্ম করে তা দেখতে পরীক্ষার আগে আপনার ব্রাউজারের ক্যাশ পরিষ্কার করুন - এটি সাধারণত পুনরায় দর্শনের চেয়ে বেশ আলাদা!

প্রোফাইল টাইমলাইনের উপাদানগুলি নির্বাচন করুন যাতে আপনার পৃষ্ঠা লোড হওয়ার সময় কী কী ঘটনা ঘটছে তা জুম ইন করে দেখতে পারেন।

আপনার পৃষ্ঠার পারফরম্যান্সের একটি স্ন্যাপশট পেতে প্রোফাইল টাইমলাইনের একটি অংশ নির্বাচন করুন এবং সারাংশ প্যানটি দেখুন:

ইভেন্ট লগ প্যানটি পরীক্ষা করুন এবং দেখুন কোনো ইভেন্ট ১৫ মিলিসেকেন্ডের বেশি সময় নিয়েছে কিনা:

✅ আপনার প্রোফাইলারটি জানুন! এই সাইটে ডেভেলপার টুলস খুলুন এবং দেখুন কোনো বাধা আছে কিনা। কোন সম্পদটি সবচেয়ে ধীর লোড হচ্ছে? সবচেয়ে দ্রুত?

প্রোফাইলিংয়ের সময় কী দেখবেন

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

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

অ্যাসেট সাইজ: ওয়েবসাইটগুলি বছরের পর বছর ধরে "ভারী" হয়ে উঠছে, এবং সেই অতিরিক্ত ওজনের বেশিরভাগই আসে ইমেজ থেকে। এটি এমন যেন আমরা আমাদের ডিজিটাল স্যুটকেসে আরও বেশি কিছু ভরছি।

✅ ইন্টারনেট আর্কাইভ দেখুন এবং দেখুন কীভাবে পৃষ্ঠার সাইজ সময়ের সাথে বেড়েছে - এটি বেশ প্রকাশক।

অ্যাসেট অপ্টিমাইজ করার উপায়:

কমপ্রেস করুন ইমেজগুলি! WebP-এর মতো আধুনিক ফরম্যাট ফাইল সাইজ নাটকীয়ভাবে কমাতে পারে
সার্ভ করুন প্রতিটি ডিভাইসের জন্য সঠিক ইমেজ সাইজ - ফোনে বড় ডেস্কটপ ইমেজ পাঠানোর দরকার নেই
মিনিফাই করুন আপনার CSS এবং JavaScript - প্রতিটি বাইট গুরুত্বপূর্ণ
ল্যাজি লোডিং ব্যবহার করুন যাতে ব্যবহারকারীরা স্ক্রোল করার সময়ই ইমেজগুলি ডাউনলোড হয়

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

DOM অপ্টিমাইজেশনের মূল কৌশল:

HTML উপাদান এবং নেস্টিং লেভেল কমিয়ে দিন
অপ্রয়োজনীয় CSS নিয়ম সরিয়ে ফেলুন এবং স্টাইলশিটগুলি দক্ষতার সাথে একত্রিত করুন
প্রতিটি পৃষ্ঠার জন্য প্রয়োজনীয় স্টাইলগুলি লোড করুন
HTML গঠন করুন যাতে ব্রাউজার সহজে পার্স করতে পারে

জাভাস্ক্রিপ্ট: প্রতিটি জাভাস্ক্রিপ্ট ডেভেলপারকে 'রেন্ডার-ব্লকিং' স্ক্রিপ্টগুলির জন্য নজর রাখতে হবে যা DOM ট্রাভার্স এবং ব্রাউজারে পেইন্ট করার আগে লোড করতে হবে। আপনার ইনলাইন স্ক্রিপ্টগুলির সাথে defer ব্যবহার করার কথা বিবেচনা করুন (যেমনটি টেরারিয়াম মডিউলে করা হয়েছে)।

আধুনিক জাভাস্ক্রিপ্ট অপ্টিমাইজেশন কৌশল:

defer অ্যাট্রিবিউট ব্যবহার করুন স্ক্রিপ্টগুলি DOM পার্সিংয়ের পরে লোড করতে
কোড স্প্লিটিং প্রয়োগ করুন শুধুমাত্র প্রয়োজনীয় জাভাস্ক্রিপ্ট লোড করতে
ল্যাজি লোডিং প্রয়োগ করুন অ-গুরুত্বপূর্ণ কার্যকারিতার জন্য
যতটা সম্ভব ভারী লাইব্রেরি এবং ফ্রেমওয়ার্কের ব্যবহার কমিয়ে দিন

✅ কিছু সাইট একটি সাইট স্পিড টেস্ট ওয়েবসাইটে চেষ্টা করুন এবং সাইট পারফরম্যান্স নির্ধারণ করতে সাধারণ চেকগুলি সম্পর্কে আরও জানুন।

এখন আপনি জানেন ব্রাউজারটি আপনার পাঠানো অ্যাসেটগুলি কীভাবে রেন্ডার করে, চলুন আপনার এক্সটেনশনটি সম্পূর্ণ করতে শেষ কয়েকটি জিনিস দেখি:

রঙ গণনা করার জন্য একটি ফাংশন তৈরি করুন

এখন আমরা একটি ফাংশন তৈরি করব যা সংখ্যাসূচক ডেটাকে অর্থপূর্ণ রঙে রূপান্তর করে। এটি একটি ট্রাফিক লাইট সিস্টেমের মতো ভাবুন - পরিষ্কার শক্তির জন্য সবুজ, উচ্চ কার্বন ঘনত্বের জন্য লাল।

এই ফাংশনটি আমাদের API থেকে CO2 ডেটা নেবে এবং পরিবেশগত প্রভাবের প্রতিনিধিত্ব করার জন্য কোন রঙটি সেরা তা নির্ধারণ করবে। এটি অনেকটা বিজ্ঞানীরা কীভাবে তাপ মানচিত্রে রঙ-কোডিং ব্যবহার করে জটিল ডেটা প্যাটার্নগুলি চিত্রিত করেন তার মতো। চলুন এটি /src/index.js-এ যোগ করি, আমরা আগে সেট আপ করা const ভেরিয়েবলগুলির ঠিক পরে:

function calculateColor(value) {
	// Define CO2 intensity scale (grams per kWh)
	const co2Scale = [0, 150, 600, 750, 800];
	// Corresponding colors from green (clean) to dark brown (high carbon)
	const colors = ['#2AA364', '#F5EB4D', '#9E4229', '#381D02', '#381D02'];

	// Find the closest scale value to our input
	const closestNum = co2Scale.sort((a, b) => {
		return Math.abs(a - value) - Math.abs(b - value);
	})[0];
	
	console.log(`${value} is closest to ${closestNum}`);
	
	// Find the index for color mapping
	const num = (element) => element > closestNum;
	const scaleIndex = co2Scale.findIndex(num);

	const closestColor = colors[scaleIndex];
	console.log(scaleIndex, closestColor);

	// Send color update message to background script
	chrome.runtime.sendMessage({ action: 'updateIcon', value: { color: closestColor } });
}

এই চতুর ছোট ফাংশনটি কীভাবে কাজ করে তা ভেঙে দেখা যাক:

দুটি অ্যারে সেট আপ করে - একটি CO2 লেভেলের জন্য, অন্যটি রঙের জন্য (সবুজ = পরিষ্কার, বাদামী = ময়লা!)
আমাদের প্রকৃত CO2 মানের সাথে সবচেয়ে কাছের মিল খুঁজে বের করে কিছু চমৎ এখানে একটি আকর্ষণীয় গোয়েন্দা মিশন: কয়েকটি ওপেন সোর্স ওয়েবসাইট বেছে নিন যা বহু বছর ধরে চালু রয়েছে (যেমন Wikipedia, GitHub, বা Stack Overflow) এবং তাদের কমিট ইতিহাসে গভীরভাবে অনুসন্ধান করুন। আপনি কি দেখতে পারেন তারা কোথায় পারফরম্যান্স উন্নতি করেছে? কোন সমস্যাগুলো বারবার দেখা দিয়েছে?

আপনার তদন্তের পদ্ধতি:

কমিট বার্তাগুলোতে "optimize," "performance," বা "faster" শব্দগুলো খুঁজুন
প্যাটার্ন খুঁজুন - তারা কি বারবার একই ধরনের সমস্যাগুলো ঠিক করছে?
সনাক্ত করুন সাধারণ কারণগুলো যা ওয়েবসাইটকে ধীর করে দেয়
আপনার আবিষ্কার শেয়ার করুন - অন্যান্য ডেভেলপাররা বাস্তব উদাহরণ থেকে শিখতে পারে

লেকচার-পরবর্তী কুইজ

পর্যালোচনা ও স্ব-অধ্যয়ন

একটি পারফরম্যান্স নিউজলেটার এর জন্য সাইন আপ করার কথা বিবেচনা করুন।

ব্রাউজারগুলো কীভাবে ওয়েব পারফরম্যান্স পরিমাপ করে তা জানতে তাদের ওয়েব টুলগুলোর পারফরম্যান্স ট্যাবগুলো দেখুন। আপনি কি কোনো বড় পার্থক্য খুঁজে পান?

অ্যাসাইনমেন্ট

একটি সাইটের পারফরম্যান্স বিশ্লেষণ করুন

অস্বীকৃতি:
এই নথিটি AI অনুবাদ পরিষেবা Co-op Translator ব্যবহার করে অনুবাদ করা হয়েছে। আমরা যথাসাধ্য সঠিকতার জন্য চেষ্টা করি, তবে অনুগ্রহ করে মনে রাখবেন যে স্বয়ংক্রিয় অনুবাদে ত্রুটি বা অসঙ্গতি থাকতে পারে। এর মূল ভাষায় থাকা নথিটিকে প্রামাণিক উৎস হিসেবে বিবেচনা করা উচিত। গুরুত্বপূর্ণ তথ্যের জন্য, পেশাদার মানব অনুবাদ সুপারিশ করা হয়। এই অনুবাদ ব্যবহারের ফলে কোনো ভুল বোঝাবুঝি বা ভুল ব্যাখ্যার জন্য আমরা দায়ী থাকব না।

26 KiB Raw Blame History