16 KiB
براؤزر ایکسٹینشن پروجیکٹ حصہ 3: بیک گراؤنڈ ٹاسکس اور کارکردگی کے بارے میں جانیں
لیکچر سے پہلے کا کوئز
تعارف
اس ماڈیول کے پچھلے دو اسباق میں، آپ نے ایک فارم اور ڈیٹا کے لیے ڈسپلے ایریا بنانا سیکھا جو API سے حاصل کیا گیا تھا۔ یہ ویب پر موجودگی بنانے کا ایک بہت ہی معیاری طریقہ ہے۔ آپ نے یہاں تک سیکھا کہ ڈیٹا کو غیر متزامن طریقے سے کیسے حاصل کیا جائے۔ آپ کا براؤزر ایکسٹینشن تقریباً مکمل ہو چکا ہے۔
اب کچھ بیک گراؤنڈ ٹاسکس کو منظم کرنا باقی ہے، جن میں ایکسٹینشن کے آئیکن کا رنگ ریفریش کرنا شامل ہے، تو یہ ایک اچھا وقت ہے کہ ہم بات کریں کہ براؤزر اس قسم کے کام کو کیسے منظم کرتا ہے۔ آئیے ان براؤزر ٹاسکس کے بارے میں سوچتے ہیں جو آپ کے ویب اثاثوں کی کارکردگی کے تناظر میں ہیں جب آپ انہیں بناتے ہیں۔
ویب کارکردگی کی بنیادی باتیں
"ویب سائٹ کی کارکردگی دو چیزوں کے بارے میں ہے: صفحہ کتنی جلدی لوڈ ہوتا ہے، اور اس پر کوڈ کتنی جلدی چلتا ہے۔" -- زیک گروسبرٹ
اپنی ویب سائٹس کو ہر قسم کے آلات، ہر قسم کے صارفین، اور ہر قسم کے حالات میں انتہائی تیز رفتار بنانے کے بارے میں موضوع حیرت انگیز طور پر وسیع ہے۔ یہاں کچھ نکات ہیں جنہیں آپ کو ایک معیاری ویب پروجیکٹ یا براؤزر ایکسٹینشن بناتے وقت ذہن میں رکھنا چاہیے۔
سب سے پہلی چیز جو آپ کو یقینی بنانی چاہیے کہ آپ کی سائٹ مؤثر طریقے سے چل رہی ہے، اس کی کارکردگی کے بارے میں ڈیٹا جمع کرنا ہے۔ اس کے لیے پہلا مقام آپ کے ویب براؤزر کے ڈیولپر ٹولز میں ہے۔ ایج میں، آپ "سیٹنگز اور مزید" بٹن (براؤزر کے اوپر دائیں طرف تین نقطوں کا آئیکن) منتخب کر سکتے ہیں، پھر مزید ٹولز > ڈیولپر ٹولز پر جائیں اور پرفارمنس ٹیب کھولیں۔ آپ ونڈوز پر Ctrl + Shift + I یا میک پر Option + Command + I کی بورڈ شارٹ کٹس استعمال کر کے ڈیولپر ٹولز بھی کھول سکتے ہیں۔
پرفارمنس ٹیب میں ایک پروفائلنگ ٹول ہوتا ہے۔ ایک ویب سائٹ کھولیں (مثال کے طور پر، https://www.microsoft.com) اور 'ریکارڈ' بٹن پر کلک کریں، پھر سائٹ کو ریفریش کریں۔ کسی بھی وقت ریکارڈنگ کو روکیں، اور آپ ان روٹینز کو دیکھ سکیں گے جو سائٹ کو 'اسکرپٹ'، 'رینڈر'، اور 'پینٹ' کرنے کے لیے تیار کی گئی ہیں:
✅ ایج میں پرفارمنس پینل پر Microsoft Documentation دیکھیں۔
ٹپ: اپنی ویب سائٹ کے اسٹارٹ اپ وقت کی درست ریڈنگ حاصل کرنے کے لیے، اپنے براؤزر کا کیش صاف کریں۔
پروفائل ٹائم لائن کے عناصر کو منتخب کریں تاکہ ان ایونٹس کو زوم کیا جا سکے جو آپ کے صفحے کے لوڈ ہونے کے دوران ہوتے ہیں۔
اپنے صفحے کی کارکردگی کا اسنیپ شاٹ حاصل کریں پروفائل ٹائم لائن کے ایک حصے کو منتخب کر کے اور خلاصہ پین کو دیکھ کر:
ایونٹ لاگ پین کو چیک کریں تاکہ یہ دیکھ سکیں کہ آیا کوئی ایونٹ 15 ملی سیکنڈ سے زیادہ وقت لے رہا ہے:
✅ اپنے پروفائلر کو جانیں! اس سائٹ پر ڈیولپر ٹولز کھولیں اور دیکھیں کہ آیا کوئی رکاوٹیں ہیں۔ سب سے سست لوڈ ہونے والا اثاثہ کون سا ہے؟ سب سے تیز کون سا ہے؟
پروفائلنگ چیکس
عام طور پر، کچھ "مسئلہ والے علاقے" ہوتے ہیں جن پر ہر ویب ڈویلپر کو سائٹ بناتے وقت نظر رکھنی چاہیے تاکہ پروڈکشن میں تعیناتی کے وقت ناخوشگوار حیرتوں سے بچا جا سکے۔
اثاثوں کے سائز: ویب پچھلے چند سالوں میں 'بھاری' اور اس طرح سست ہو گیا ہے۔ اس وزن کا کچھ حصہ تصاویر کے استعمال سے متعلق ہے۔
✅ صفحہ کے وزن اور مزید کے تاریخی جائزے کے لیے Internet Archive دیکھیں۔
ایک اچھا عمل یہ ہے کہ یہ یقینی بنایا جائے کہ آپ کی تصاویر کو بہتر بنایا گیا ہے اور آپ کے صارفین کے لیے صحیح سائز اور ریزولوشن پر فراہم کی گئی ہیں۔
DOM ٹریورسلز: براؤزر کو آپ کے لکھے ہوئے کوڈ کی بنیاد پر اپنا دستاویز آبجیکٹ ماڈل بنانا ہوتا ہے، اس لیے اچھے صفحے کی کارکردگی کے مفاد میں اپنے ٹیگز کو کم سے کم رکھنا ضروری ہے، صرف وہی استعمال کرنا اور اسٹائل کرنا جو صفحہ کو ضرورت ہو۔ اس نقطہ نظر سے، صفحہ سے وابستہ اضافی CSS کو بہتر بنایا جا سکتا ہے؛ وہ اسٹائلز جو صرف ایک صفحے پر استعمال ہونے کی ضرورت ہے انہیں مرکزی اسٹائل شیٹ میں شامل کرنے کی ضرورت نہیں ہے، مثال کے طور پر۔
جاوا اسکرپٹ: ہر جاوا اسکرپٹ ڈویلپر کو 'رینڈر بلاکنگ' اسکرپٹس کے لیے دیکھنا چاہیے جو DOM کو براؤزر میں ٹریورس اور پینٹ کرنے سے پہلے لوڈ ہونا ضروری ہیں۔ اپنے ان لائن اسکرپٹس کے ساتھ defer استعمال کرنے پر غور کریں (جیسا کہ ٹیریریم ماڈیول میں کیا گیا ہے)۔
✅ سائٹ کی کارکردگی کا تعین کرنے کے لیے کیے جانے والے عام چیکس کے بارے میں مزید جاننے کے لیے Site Speed Test website پر کچھ سائٹس آزمائیں۔
اب جب کہ آپ کو اندازہ ہو گیا ہے کہ براؤزر آپ کے بھیجے گئے اثاثوں کو کیسے رینڈر کرتا ہے، آئیے ان آخری چند چیزوں کو دیکھتے ہیں جو آپ کو اپنے ایکسٹینشن کو مکمل کرنے کے لیے کرنے کی ضرورت ہے:
رنگ کا حساب لگانے کے لیے ایک فنکشن بنائیں
/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 کال سے حاصل کی تھی، اور پھر آپ اس کی ویلیو کو کلرز آرے میں پیش کردہ انڈیکس کے کتنے قریب ہے اس کا حساب لگاتے ہیں۔ پھر آپ اس قریب ترین کلر ویلیو کو کروم رن ٹائم پر بھیجتے ہیں۔
کروم.runtime میں ایک API ہے جو ہر قسم کے بیک گراؤنڈ ٹاسکس کو ہینڈل کرتا ہے، اور آپ کا ایکسٹینشن اس کا فائدہ اٹھا رہا ہے:
"کروم.runtime API کا استعمال کریں تاکہ بیک گراؤنڈ پیج کو حاصل کیا جا سکے، مینوفیسٹ کے بارے میں تفصیلات واپس کریں، اور ایپ یا ایکسٹینشن لائف سائیکل میں ایونٹس کو سننے اور ان کا جواب دینے کے لیے۔ آپ اس API کا استعمال URLs کے رشتہ دار راستے کو مکمل طور پر اہل URLs میں تبدیل کرنے کے لیے بھی کر سکتے ہیں۔"
✅ اگر آپ یہ براؤزر ایکسٹینشن ایج کے لیے تیار کر رہے ہیں، تو یہ آپ کو حیران کر سکتا ہے کہ آپ کروم API استعمال کر رہے ہیں۔ ایج براؤزر کے نئے ورژن کرومیم براؤزر انجن پر چلتے ہیں، اس لیے آپ ان ٹولز کا فائدہ اٹھا سکتے ہیں۔
نوٹ کریں، اگر آپ براؤزر ایکسٹینشن کو پروفائل کرنا چاہتے ہیں، تو خود ایکسٹینشن کے اندر سے ڈیولپر ٹولز لانچ کریں، کیونکہ یہ اپنا الگ براؤزر انسٹینس ہے۔
ڈیفالٹ آئیکن کا رنگ سیٹ کریں
اب، init() فنکشن میں، آئیکن کو شروع کرنے کے لیے عام سبز رنگ پر سیٹ کریں، دوبارہ کروم کے 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.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' کہا جاتا ہے، تو اگلا کوڈ صحیح رنگ کے آئیکن کو کینوس API کا استعمال کرتے ہوئے ڈرا کرنے کے لیے چلایا جاتا ہے۔
✅ آپ کینوس API کے بارے میں مزید Space Game lessons میں سیکھیں گے۔
اب، اپنے ایکسٹینشن کو دوبارہ بنائیں (npm run build)، ریفریش کریں اور اپنے ایکسٹینشن کو لانچ کریں، اور رنگ کی تبدیلی دیکھیں۔ کیا یہ کوئی کام کرنے یا برتن دھونے کا اچھا وقت ہے؟ اب آپ جانتے ہیں!
مبارک ہو، آپ نے ایک مفید براؤزر ایکسٹینشن بنایا ہے اور براؤزر کے کام کرنے کے طریقے اور اس کی کارکردگی کو پروفائل کرنے کے بارے میں مزید سیکھا ہے۔
GitHub Copilot ایجنٹ چیلنج 🚀
ایجنٹ موڈ کا استعمال کرتے ہوئے درج ذیل چیلنج مکمل کریں:
تفصیل: براؤزر ایکسٹینشن کی کارکردگی کی نگرانی کی صلاحیتوں کو بہتر بنائیں، ایک فیچر شامل کر کے جو ایکسٹینشن کے مختلف اجزاء کے لوڈ ٹائمز کو ٹریک اور ظاہر کرتا ہے۔
پرومپٹ: براؤزر ایکسٹینشن کے لیے ایک کارکردگی کی نگرانی کا نظام بنائیں جو API سے CO2 ڈیٹا حاصل کرنے، رنگوں کا حساب لگانے، اور آئیکن کو اپ ڈیٹ کرنے میں لگنے والے وقت کو ماپتا اور لاگ کرتا ہے۔ performanceTracker نامی ایک فنکشن شامل کریں جو پرفارمنس API کا استعمال کرتا ہے ان آپریشنز کو ماپنے کے لیے اور نتائج کو براؤزر کنسول میں ٹائم اسٹیمپس اور دورانیے کے میٹرکس کے ساتھ ظاہر کرتا ہے۔
🚀 چیلنج
کچھ اوپن سورس ویب سائٹس کی تحقیق کریں جو کافی عرصہ پہلے سے موجود ہیں، اور ان کے GitHub ہسٹری کی بنیاد پر دیکھیں کہ آیا انہیں کارکردگی کے لیے بہتر بنایا گیا تھا یا نہیں۔ سب سے عام مسئلہ کیا ہے؟
لیکچر کے بعد کا کوئز
جائزہ اور خود مطالعہ
پرفارمنس نیوز لیٹر کے لیے سائن اپ کرنے پر غور کریں۔
براؤزرز کے ویب کارکردگی کو جانچنے کے طریقوں کی تحقیق کریں، ان کے ویب ٹولز میں پرفارمنس ٹیبز کو دیکھ کر۔ کیا آپ کو کوئی بڑا فرق نظر آتا ہے؟
اسائنمنٹ
سائٹ کی کارکردگی کا تجزیہ کریں
ڈسکلیمر:
یہ دستاویز AI ترجمہ سروس Co-op Translator کا استعمال کرتے ہوئے ترجمہ کی گئی ہے۔ ہم درستگی کے لیے کوشش کرتے ہیں، لیکن براہ کرم آگاہ رہیں کہ خودکار ترجمے میں غلطیاں یا غیر درستیاں ہو سکتی ہیں۔ اصل دستاویز کو اس کی اصل زبان میں مستند ذریعہ سمجھا جانا چاہیے۔ اہم معلومات کے لیے، پیشہ ور انسانی ترجمہ کی سفارش کی جاتی ہے۔ ہم اس ترجمے کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تشریح کے ذمہ دار نہیں ہیں۔