15 KiB
براؤزر ایکسٹینشن پروجیکٹ حصہ 3: بیک گراؤنڈ ٹاسکس اور کارکردگی کے بارے میں سیکھیں
لیکچر سے پہلے کا کوئز
تعارف
اس ماڈیول کے پچھلے دو اسباق میں، آپ نے ایک فارم اور ڈیٹا کے لیے ڈسپلے ایریا بنانے کا طریقہ سیکھا جو API سے حاصل کیا گیا تھا۔ یہ ویب پر موجودگی بنانے کا ایک بہت ہی معیاری طریقہ ہے۔ آپ نے یہاں تک سیکھا کہ ڈیٹا کو غیر متزامن طریقے سے کیسے حاصل کیا جائے۔ آپ کا براؤزر ایکسٹینشن تقریباً مکمل ہو چکا ہے۔
اب کچھ بیک گراؤنڈ ٹاسکس کو منظم کرنا باقی ہے، جن میں ایکسٹینشن کے آئیکن کا رنگ ریفریش کرنا شامل ہے، تو یہ ایک اچھا وقت ہے کہ براؤزر اس قسم کے کاموں کو کیسے منظم کرتا ہے۔ آئیے ان براؤزر ٹاسکس کے بارے میں سوچتے ہیں آپ کے ویب اثاثوں کی کارکردگی کے تناظر میں جب آپ انہیں بناتے ہیں۔
ویب کارکردگی کی بنیادی باتیں
"ویب سائٹ کی کارکردگی دو چیزوں کے بارے میں ہے: صفحہ کتنی جلدی لوڈ ہوتا ہے، اور اس پر کوڈ کتنی جلدی چلتا ہے۔" -- زیک گروسبرٹ
ویب سائٹس کو ہر قسم کے آلات، ہر قسم کے صارفین، اور ہر قسم کے حالات میں انتہائی تیز رفتار بنانے کے بارے میں موضوع حیرت انگیز طور پر وسیع ہے۔ یہاں کچھ نکات ہیں جنہیں آپ کو ایک معیاری ویب پروجیکٹ یا براؤزر ایکسٹینشن بناتے وقت ذہن میں رکھنا چاہیے۔
سب سے پہلی چیز جو آپ کو یقینی بنانی چاہیے کہ آپ کی سائٹ مؤثر طریقے سے چل رہی ہے، اس کی کارکردگی کے بارے میں ڈیٹا جمع کرنا ہے۔ اس کے لیے پہلا مقام آپ کے ویب براؤزر کے ڈیولپر ٹولز میں ہے۔ ایج میں، آپ "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 Documentation پر ایج کے Performance پینل کے بارے میں مزید جانیں۔
ٹپ: اپنی ویب سائٹ کے اسٹارٹ اپ وقت کی درست ریڈنگ حاصل کرنے کے لیے، اپنے براؤزر کا کیش صاف کریں۔
پروفائل ٹائم لائن کے عناصر کو منتخب کریں تاکہ ان ایونٹس پر زوم کریں جو آپ کے صفحے کے لوڈ ہونے کے دوران ہوتے ہیں۔
اپنے صفحے کی کارکردگی کا اسنیپ شاٹ حاصل کریں پروفائل ٹائم لائن کے کسی حصے کو منتخب کر کے اور سمری پین کو دیکھ کر:
ایونٹ لاگ پین کو چیک کریں تاکہ دیکھ سکیں کہ آیا کوئی ایونٹ 15 ملی سیکنڈ سے زیادہ وقت لے رہا ہے:
✅ اپنے پروفائلر کو جانیں! اس سائٹ پر ڈیولپر ٹولز کھولیں اور دیکھیں کہ آیا کوئی رکاوٹیں ہیں۔ سب سے سست لوڈ ہونے والا اثاثہ کون سا ہے؟ سب سے تیز؟
پروفائلنگ چیکس
عام طور پر، کچھ "مسئلہ والے علاقے" ہیں جنہیں ہر ویب ڈیولپر کو سائٹ بناتے وقت دیکھنا چاہیے تاکہ پروڈکشن میں تعیناتی کے وقت ناخوشگوار حیرتوں سے بچا جا سکے۔
اثاثوں کے سائز: ویب پچھلے چند سالوں میں 'بھاری' اور اس طرح سست ہو گئی ہے۔ اس وزن کا کچھ حصہ تصاویر کے استعمال سے متعلق ہے۔
✅ Internet Archive کو دیکھیں تاکہ صفحہ کے وزن اور مزید کے تاریخی نظارے حاصل کریں۔
ایک اچھا عمل یہ ہے کہ یہ یقینی بنایا جائے کہ آپ کی تصاویر کو بہتر بنایا گیا ہے اور آپ کے صارفین کے لیے صحیح سائز اور ریزولوشن پر فراہم کی گئی ہیں۔
DOM ٹریورسلز: براؤزر کو آپ کے لکھے ہوئے کوڈ کی بنیاد پر اپنا Document Object Model بنانا ہوتا ہے، اس لیے اچھے صفحے کی کارکردگی کے مفاد میں اپنے ٹیگز کو کم سے کم رکھنا ضروری ہے، صرف وہی استعمال کرنا اور اسٹائل کرنا جو صفحہ کو ضرورت ہے۔ اس نقطہ پر، صفحے سے وابستہ اضافی CSS کو بہتر بنایا جا سکتا ہے؛ وہ اسٹائلز جو صرف ایک صفحے پر استعمال ہونے کی ضرورت ہے، انہیں مرکزی اسٹائل شیٹ میں شامل کرنے کی ضرورت نہیں ہے، مثال کے طور پر۔
جاوا اسکرپٹ: ہر جاوا اسکرپٹ ڈیولپر کو 'render-blocking' اسکرپٹس کے لیے دیکھنا چاہیے جو DOM کو ٹریورس اور براؤزر پر پینٹ کرنے سے پہلے لوڈ ہونا ضروری ہیں۔ اپنے ان لائن اسکرپٹس کے ساتھ defer استعمال کرنے پر غور کریں (جیسا کہ Terrarium ماڈیول میں کیا گیا ہے)۔
✅ کچھ سائٹس کو Site Speed Test ویب سائٹ پر آزمائیں تاکہ ان عام چیکس کے بارے میں مزید جان سکیں جو سائٹ کی کارکردگی کا تعین کرنے کے لیے کیے جاتے ہیں۔
اب جب کہ آپ کو اندازہ ہو گیا ہے کہ براؤزر آپ کے بھیجے گئے اثاثوں کو کیسے رینڈر کرتا ہے، آئیے ان آخری چند چیزوں کو دیکھتے ہیں جو آپ کو اپنے ایکسٹینشن کو مکمل کرنے کے لیے کرنے کی ضرورت ہے:
رنگ کا حساب لگانے کے لیے ایک فنکشن بنائیں
/src/index.js میں کام کرتے ہوئے، calculateColor() نامی ایک فنکشن شامل کریں ان const ویریبلز کے سلسلے کے بعد جو آپ نے DOM تک رسائی حاصل کرنے کے لیے سیٹ کیے ہیں:
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 میں ایک API موجود ہے جو ہر قسم کے بیک گراؤنڈ ٹاسکس کو ہینڈل کرتا ہے، اور آپ کا ایکسٹینشن اس کا فائدہ اٹھا رہا ہے:
"chrome.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 اسباق میں سیکھیں گے۔
اب، اپنے ایکسٹینشن کو دوبارہ بنائیں (npm run build)، ریفریش کریں اور اپنے ایکسٹینشن کو لانچ کریں، اور رنگ کی تبدیلی دیکھیں۔ کیا یہ کوئی کام کرنے یا برتن دھونے کا اچھا وقت ہے؟ اب آپ جانتے ہیں!
مبارک ہو، آپ نے ایک مفید براؤزر ایکسٹینشن بنایا اور براؤزر کے کام کرنے کے طریقے اور اس کی کارکردگی کو پروفائل کرنے کے بارے میں مزید سیکھا۔
🚀 چیلنج
کچھ اوپن سورس ویب سائٹس کی تحقیق کریں جو کافی عرصہ پہلے سے موجود ہیں، اور ان کے GitHub ہسٹری کی بنیاد پر دیکھیں کہ آیا انہیں کارکردگی کے لیے بہتر بنایا گیا تھا یا نہیں۔ سب سے عام مسئلہ کیا ہے؟
لیکچر کے بعد کا کوئز
جائزہ اور خود مطالعہ
ایک کارکردگی نیوز لیٹر کے لیے سائن اپ کرنے پر غور کریں۔
براؤزرز کے ویب کارکردگی کو جانچنے کے طریقوں کی تحقیق کریں، ان کے ویب ٹولز کے پرفارمنس ٹیبز کو دیکھ کر۔ کیا آپ کو کوئی بڑا فرق نظر آتا ہے؟
اسائنمنٹ
سائٹ کی کارکردگی کا تجزیہ کریں
ڈسکلیمر:
یہ دستاویز AI ترجمہ سروس Co-op Translator کا استعمال کرتے ہوئے ترجمہ کی گئی ہے۔ ہم درستگی کے لیے کوشش کرتے ہیں، لیکن براہ کرم آگاہ رہیں کہ خودکار ترجمے میں غلطیاں یا غیر درستیاں ہو سکتی ہیں۔ اصل دستاویز کو اس کی اصل زبان میں مستند ذریعہ سمجھا جانا چاہیے۔ اہم معلومات کے لیے، پیشہ ور انسانی ترجمہ کی سفارش کی جاتی ہے۔ ہم اس ترجمے کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تشریح کے ذمہ دار نہیں ہیں۔