20 KiB

Raw Blame History

ब्राउझर एक्स्टेंशन प्रोजेक्ट भाग ३: बॅकग्राउंड टास्क आणि कार्यक्षमता याबद्दल जाणून घ्या

प्री-लेक्चर क्विझ

परिचय

या मॉड्यूलच्या मागील दोन धड्यांमध्ये, तुम्ही API मधून डेटा मिळवण्यासाठी फॉर्म आणि डिस्प्ले एरिया कसा तयार करायचा हे शिकले. वेबवर वेब उपस्थिती तयार करण्याचा हा एक अतिशय सामान्य मार्ग आहे. तुम्ही डेटा असिंक्रोनस पद्धतीने कसा मिळवायचा हे देखील शिकले. तुमचे ब्राउझर एक्स्टेंशन जवळजवळ पूर्ण झाले आहे.

आता काही बॅकग्राउंड टास्क व्यवस्थापित करणे बाकी आहे, ज्यामध्ये एक्स्टेंशनच्या आयकॉनचा रंग रीफ्रेश करणे समाविष्ट आहे. त्यामुळे ब्राउझर अशा प्रकारच्या कार्याचे व्यवस्थापन कसे करते याबद्दल बोलण्याची ही योग्य वेळ आहे. तुमच्या वेब अ‍ॅसेट्स तयार करताना त्याच्या कार्यक्षमतेच्या संदर्भात या ब्राउझर टास्कचा विचार करूया.

वेब कार्यक्षमता मूलभूत गोष्टी

"वेबसाइट कार्यक्षमता दोन गोष्टींवर आधारित आहे: पृष्ठ किती वेगाने लोड होते आणि त्यावरील कोड किती वेगाने चालतो." -- Zack Grossbart

तुमच्या वेबसाइट्स सर्व प्रकारच्या डिव्हाइसवर, सर्व प्रकारच्या वापरकर्त्यांसाठी, सर्व प्रकारच्या परिस्थितीत वेगाने चालवण्यासाठी कसे तयार करायचे याचा विषय अपेक्षेप्रमाणे विस्तृत आहे. तुम्ही मानक वेब प्रोजेक्ट किंवा ब्राउझर एक्स्टेंशन तयार करत असताना लक्षात ठेवण्यासारखे काही मुद्दे येथे आहेत.

तुमची साइट कार्यक्षमतेने चालत आहे याची खात्री करण्यासाठी तुम्हाला सर्वप्रथम तिच्या कार्यक्षमतेबद्दल डेटा गोळा करणे आवश्यक आहे. तुमच्या वेब ब्राउझरच्या डेव्हलपर टूल्समध्ये हे करण्याचे पहिले ठिकाण आहे. Edge मध्ये, तुम्ही "सेटिंग्ज आणि अधिक" बटण (ब्राउझरच्या वरच्या उजव्या कोपर्यात तीन डॉट्स आयकॉन) निवडू शकता, नंतर More Tools > Developer Tools वर जा आणि Performance टॅब उघडा. Windows वर Ctrl + Shift + I किंवा Mac वर Option + Command + I कीबोर्ड शॉर्टकट वापरून तुम्ही डेव्हलपर टूल्स उघडू शकता.

Performance टॅबमध्ये प्रोफाइलिंग टूल आहे. वेबसाइट उघडा (उदाहरणार्थ, https://www.microsoft.com) आणि 'Record' बटणावर क्लिक करा, नंतर साइट रीफ्रेश करा. रेकॉर्डिंग कधीही थांबवा आणि तुम्हाला 'script', 'render', आणि 'paint' साइट तयार करण्यासाठी तयार केलेल्या रूटीन दिसतील:

✅ Microsoft Documentation वर Edge मधील Performance पॅनेलबद्दल अधिक जाणून घ्या.

टिप: तुमच्या वेबसाइटच्या स्टार्टअप वेळेचे अचूक वाचन मिळवण्यासाठी, तुमच्या ब्राउझरचा कॅशे क्लिअर करा.

प्रोफाइल टाइमलाइनचे घटक निवडा आणि तुमचे पृष्ठ लोड होत असताना घडणाऱ्या घटनांवर झूम करा.

प्रोफाइल टाइमलाइनचा एक भाग निवडून आणि सारांश पॅन पाहून तुमच्या पृष्ठाच्या कार्यक्षमतेचा स्नॅपशॉट मिळवा:

Event Log पॅन तपासा आणि पाहा की कोणतीही घटना 15 ms पेक्षा जास्त वेळ घेत आहे का:

✅ तुमचा प्रोफाइलर ओळखा! या साइटवर डेव्हलपर टूल्स उघडा आणि पाहा की काही अडथळे आहेत का. सर्वात हळू-लोड होणारा अ‍ॅसेट कोणता आहे? सर्वात वेगवान कोणता आहे?

प्रोफाइलिंग तपासणी

सामान्यतः, काही "समस्या क्षेत्रे" आहेत ज्यावर प्रत्येक वेब डेव्हलपरने साइट तयार करताना लक्ष ठेवले पाहिजे जेणेकरून उत्पादनात तैनात करताना अप्रिय आश्चर्य टाळता येईल.

अ‍ॅसेट आकार: वेब गेल्या काही वर्षांत 'जड' आणि त्यामुळे हळू झाला आहे. या वजनाचा काही भाग प्रतिमांच्या वापराशी संबंधित आहे.

✅ Internet Archive मधून पृष्ठ वजनाचा ऐतिहासिक दृष्टिकोन आणि अधिक तपासा.

चांगली पद्धत म्हणजे तुमच्या प्रतिमा ऑप्टिमाइझ करणे आणि तुमच्या वापरकर्त्यांसाठी योग्य आकार आणि रिझोल्यूशनमध्ये वितरित करणे.

DOM ट्रॅव्हर्सल्स: ब्राउझरला तुमच्या कोडवर आधारित त्याचा Document Object Model तयार करावा लागतो, त्यामुळे चांगल्या पृष्ठ कार्यक्षमतेसाठी तुमचे टॅग कमीतकमी ठेवणे, पृष्ठाला आवश्यक असलेलेच वापरणे आणि स्टाइल करणे हे हिताचे आहे. या मुद्द्याला, पृष्ठाशी संबंधित अतिरिक्त CSS ऑप्टिमाइझ केले जाऊ शकते; ज्या शैली एका पृष्ठावरच वापरल्या जाणे आवश्यक आहे त्या मुख्य शैली पत्रकात समाविष्ट करण्याची आवश्यकता नाही, उदाहरणार्थ.

JavaScript: प्रत्येक JavaScript डेव्हलपरने 'render-blocking' स्क्रिप्टसाठी लक्ष ठेवले पाहिजे ज्यांना DOM ट्रॅव्हर्स आणि ब्राउझरवर पेंट करण्यापूर्वी लोड करणे आवश्यक आहे. तुमच्या इनलाइन स्क्रिप्टसह defer वापरण्याचा विचार करा (जसे की Terrarium मॉड्यूलमध्ये केले जाते).

✅ साइट कार्यक्षमतेचा निर्धारण करण्यासाठी सामान्य तपासणीबद्दल अधिक जाणून घेण्यासाठी Site Speed Test website वर काही साइट्स वापरून पहा.

आता तुम्हाला ब्राउझर तुमच्याकडून पाठवलेल्या अ‍ॅसेट्स कसे रेंडर करते याची कल्पना आहे, चला तुमचे एक्स्टेंशन पूर्ण करण्यासाठी तुम्हाला करायच्या शेवटच्या काही गोष्टी पाहूया:

रंग गणना करण्यासाठी फंक्शन तयार करा

/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 वापरून बॅकग्राउंड पृष्ठ मिळवा, मॅनिफेस्टबद्दल तपशील परत करा आणि अ‍ॅप किंवा एक्स्टेंशन लाइफसायकलमधील इव्हेंटसाठी ऐका आणि प्रतिसाद द्या. तुम्ही URL च्या रिलेटिव्ह पथांना पूर्णपणे पात्र URL मध्ये रूपांतरित करण्यासाठी देखील या API चा उपयोग करू शकता."

✅ जर तुम्ही Edge साठी हे ब्राउझर एक्स्टेंशन विकसित करत असाल, तर तुम्हाला आश्चर्य वाटेल की तुम्ही chrome API वापरत आहात. Edge ब्राउझरच्या नवीन आवृत्त्या Chromium ब्राउझर इंजिनवर चालतात, त्यामुळे तुम्ही या टूल्सचा उपयोग करू शकता.

लक्षात ठेवा, जर तुम्हाला ब्राउझर एक्स्टेंशन प्रोफाइल करायचे असेल, तर एक्स्टेंशनमधूनच डेव्हलपर टूल्स लॉन्च करा, कारण ते स्वतःचे स्वतंत्र ब्राउझर इंस्टन्स आहे.

डिफॉल्ट आयकॉन रंग सेट करा

आता, init() फंक्शनमध्ये, chrome च्या updateIcon action पुन्हा कॉल करून आयकॉनला सुरुवातीला सामान्य हिरवा रंग सेट करा:

chrome.runtime.sendMessage({
	action: 'updateIcon',
		value: {
			color: 'green',
		},
});

फंक्शन कॉल करा, कॉल अंमलात आणा

नंतर, तुम्ही नुकतेच तयार केलेले फंक्शन C02Signal API द्वारे परत केलेल्या प्रॉमिसमध्ये जोडून कॉल करा:

//let CO2...
calculateColor(CO2);

आणि शेवटी, /dist/background.js मध्ये, या बॅकग्राउंड अ‍ॅक्शन कॉलसाठी listener जोडा:

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);
}

या कोडमध्ये, तुम्ही बॅकएंड टास्क मॅनेजरकडे येणाऱ्या कोणत्याही संदेशांसाठी listener जोडत आहात. जर त्याला 'updateIcon' असे म्हटले गेले असेल, तर योग्य रंगाचा आयकॉन काढण्यासाठी पुढील कोड Canvas API वापरून चालवला जातो.

✅ तुम्ही Canvas API बद्दल अधिक Space Game lessons मध्ये शिकाल.

आता, तुमचे एक्स्टेंशन पुन्हा तयार करा (npm run build), रीफ्रेश करा आणि तुमचे एक्स्टेंशन लॉन्च करा आणि रंग बदलताना पहा. एखादे काम करण्यासाठी किंवा भांडी धुण्यासाठी ही चांगली वेळ आहे का? आता तुम्हाला कळले!

अभिनंदन, तुम्ही एक उपयुक्त ब्राउझर एक्स्टेंशन तयार केले आहे आणि ब्राउझर कसे कार्य करते आणि त्याच्या कार्यक्षमतेचे प्रोफाइल कसे तयार करायचे याबद्दल अधिक शिकले.

🚀 आव्हान

काही ओपन सोर्स वेबसाइट्स तपासा ज्या खूप पूर्वीपासून आहेत आणि त्यांच्या GitHub इतिहासाच्या आधारे, त्यांनी कार्यक्षमतेसाठी कसे ऑप्टिमाइझ केले आहे हे ठरवू शकता का, जर ते केले असेल तर. सर्वात सामान्य समस्या कोणती आहे?

पोस्ट-लेक्चर क्विझ

पुनरावलोकन आणि स्व-अभ्यास

परफॉर्मन्स न्यूजलेटर साठी साइन अप करण्याचा विचार करा.

ब्राउझर वेब कार्यक्षमता कशी मोजतात याबद्दल अधिक जाणून घेण्यासाठी त्यांच्या वेब टूल्समधील कार्यक्षमता टॅब तपासा. तुम्हाला काही मोठे फरक आढळतात का?

असाइनमेंट

साइट कार्यक्षमतेसाठी विश्लेषण करा

अस्वीकरण:
हा दस्तऐवज AI भाषांतर सेवा Co-op Translator वापरून भाषांतरित केला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी, कृपयाआहे की स्वयंचलित भाषांतरांमध्ये चुका किंवा अचूकतेचा अभाव असू शकतो. मूळ भाषेतील मूळ दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी, व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून उद्भवलेल्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही.

20 KiB Raw Blame History