34 KiB

Raw Blame History

ब्राउझर विस्तार प्रकल्प भाग ३: पार्श्वभूमी कार्ये आणि कार्यक्षमता जाणून घ्या

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

हा ब्राउझर विस्तार मालिकेतील आमचा अंतिम धडा आहे आणि आम्ही तुमचा कार्बन फूटप्रिंट ट्रॅकर सुरळीत चालेल याची खात्री करणार आहोत. तुम्ही डायनॅमिक आयकॉन अपडेट्स जोडाल आणि समस्या होण्यापूर्वी कार्यक्षमता समस्या कशा ओळखायच्या ते शिकाल. हे रेस कार ट्यूनिंगसारखे आहे - लहान ऑप्टिमायझेशन्समुळे सर्वकाही कसे चालते यावर मोठा फरक पडतो.

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

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

परिचय

आमच्या मागील धड्यांमध्ये, तुम्ही एक फॉर्म तयार केला, API शी कनेक्ट केला आणि असिंक्रोनस डेटा फेचिंग हाताळले. तुमचा विस्तार चांगल्या प्रकारे आकार घेत आहे.

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

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

जेव्हा तुमचा कोड कार्यक्षमतेने चालतो, तेव्हा लोकांना प्रत्यक्षात फरक जाणवतो. तुम्हाला माहित आहे का तो क्षण जेव्हा पृष्ठ त्वरित लोड होते किंवा अॅनिमेशन सहजतेने चालते? ती चांगली कार्यक्षमता आहे.

कार्यक्षमता ही केवळ वेगाबद्दल नाही - ती वेब अनुभव नैसर्गिक वाटण्याबद्दल आहे, क्लंकी आणि निराशाजनक वाटण्याऐवजी. संगणकाच्या सुरुवातीच्या काळात, ग्रेस हॉपरने तिच्या डेस्कवर एक नॅनोसेकंद (सुमारे एक फूट लांब वायरचा तुकडा) ठेवला होता, ज्यामुळे प्रकाश एका सेकंदाच्या एक अब्जांशात किती अंतर प्रवास करतो हे दाखवले. संगणकीय प्रत्येक मायक्रोसेकंद का महत्त्वाचा आहे हे समजावून सांगण्याचा तिचा मार्ग होता. चला शोध साधनांचा शोध घेऊया जे तुम्हाला काय धीमे करत आहे ते शोधण्यात मदत करतात.

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

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

तुमच्या साइटला ऑप्टिमाइझ करण्याचा पहिला टप्पा म्हणजे हुडखाली काय चालले आहे ते समजून घेणे. सुदैवाने, तुमच्या ब्राउझरमध्ये शक्तिशाली शोध साधने अंगभूत आहेत.

Edge मध्ये Developer Tools उघडण्यासाठी, वरच्या उजव्या कोपर्यातील तीन डॉट्सवर क्लिक करा, नंतर More Tools > Developer Tools वर जा. किंवा कीबोर्ड शॉर्टकट वापरा: Windows वर Ctrl + Shift + I किंवा Mac वर Option + Command + I. एकदा तुम्ही तिथे गेल्यावर, Performance टॅबवर क्लिक करा - येथे तुम्ही तुमची तपासणी कराल.

तुमचे कार्यक्षमता शोध साधन:

उघडा Developer Tools (तुम्ही हे सतत वापराल!)
जा Performance टॅबवर - तुमच्या वेब अॅपचा फिटनेस ट्रॅकर समजा
दाबा Record बटण आणि तुमचे पृष्ठ क्रियेत पहा
अभ्यास करा परिणाम जे काय धीमे करत आहे ते शोधण्यासाठी

चला हे करून पाहूया. वेबसाइट उघडा (Microsoft.com चांगले काम करते) आणि 'Record' बटणावर क्लिक करा. आता पृष्ठ रीफ्रेश करा आणि प्रोफाइलरने काय घडते ते कॅप्चर करताना पहा. जेव्हा तुम्ही रेकॉर्डिंग थांबवाल, तेव्हा तुम्हाला ब्राउझर 'स्क्रिप्ट्स', 'रेंडर्स' आणि 'पेंट्स' साइट कशी करते याचे तपशीलवार ब्रेकडाउन दिसेल. हे मला आठवण करून देते की रॉकेट लॉन्च दरम्यान मिशन कंट्रोल प्रत्येक प्रणालीचे निरीक्षण कसे करते - तुम्हाला नेमके काय आणि कधी घडते यावर रिअल-टाइम डेटा मिळतो.

✅ Microsoft Documentation मध्ये अधिक तपशील आहेत जर तुम्हाला अधिक खोलवर जाण्याची इच्छा असेल

प्रो टिप: प्रथमच भेट देणाऱ्या अभ्यागतांसाठी तुमची साइट कशी कार्य करते हे पाहण्यासाठी चाचणीपूर्वी तुमचा ब्राउझर कॅशे साफ करा - ते सहसा पुनरावृत्ती भेटींपेक्षा खूप वेगळे असते!

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

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

इव्हेंट लॉग पॅन तपासा की कोणत्याही इव्हेंटला १५ एमएसपेक्षा जास्त वेळ लागला आहे का:

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

प्रोफाइलिंग करताना काय शोधायचे

प्रोफाइलर चालवणे ही फक्त सुरुवात आहे - खरी कौशल्य म्हणजे त्या रंगीत चार्ट्स तुम्हाला काय सांगत आहेत ते जाणून घेणे. काळजी करू नका, तुम्हाला ते वाचण्याची सवय होईल. अनुभवी विकसकांनी पूर्ण-फ्लॉन समस्या होण्यापूर्वी चेतावणी चिन्हे ओळखणे शिकले आहे.

चला सामान्य संशयितांबद्दल बोलूया - कार्यक्षमता अडचणी ज्या वेब प्रकल्पांमध्ये घुसण्याची प्रवृत्ती असते. जसे मेरी क्युरीला तिच्या प्रयोगशाळेत रेडिएशन पातळी काळजीपूर्वक निरीक्षण करावी लागली, तसे आम्हाला काही नमुन्यांसाठी पाहावे लागेल जे अडचणी निर्माण होण्याचे संकेत देतात. हे लवकर पकडल्याने तुम्हाला (आणि तुमच्या वापरकर्त्यांना) खूप निराशा वाचवता येईल.

अ‍ॅसेट साइजेस: वेबसाइट्स वर्षानुवर्षे "जड" होत आहेत आणि त्या अतिरिक्त वजनाचा मोठा भाग प्रतिमांमधून येतो. जणू आपण आपल्या डिजिटल सूटकेसमध्ये अधिकाधिक भरत आहोत.

✅ Internet Archive तपासा की पृष्ठ आकार कसे वाढले आहेत - हे खूप उघड करणारे आहे.

तुमची अ‍ॅसेट्स ऑप्टिमाइझ कशी ठेवायची:

कॉम्प्रेस करा त्या प्रतिमा! WebP सारख्या आधुनिक स्वरूपामुळे फाइल आकार नाटकीयपणे कमी होऊ शकतो
योग्य आकारात प्रतिमा प्रत्येक डिव्हाइससाठी पाठवा - फोनवर मोठ्या डेस्कटॉप प्रतिमा पाठवण्याची गरज नाही
मिनिफाय करा तुमचे CSS आणि JavaScript - प्रत्येक बाइट महत्त्वाचा आहे
लेझी लोडिंग वापरा जेणेकरून प्रतिमा फक्त वापरकर्त्यांनी त्यांच्याकडे स्क्रोल केल्यावर डाउनलोड होतात

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

DOM ऑप्टिमायझेशनसाठी मुख्य रणनीती:

HTML घटकांची आणि नेस्टिंग स्तरांची संख्या कमी करा
अवांछित CSS नियम काढून टाका आणि शैली पत्रके कार्यक्षमतेने एकत्र करा
प्रत्येक पृष्ठासाठी आवश्यक असलेले CSS लोड करा
HTML संरचना ब्राउझर पार्सिंगसाठी सेमॅंटिकली तयार करा

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

आधुनिक JavaScript ऑप्टिमायझेशन तंत्र:

defer अॅट्रिब्यूट वापरा जेणेकरून स्क्रिप्ट्स DOM पार्सिंगनंतर लोड होतील
कोड स्प्लिटिंग अंमलात आणा जेणेकरून फक्त आवश्यक JavaScript लोड होईल
नॉन-क्रिटिकल फंक्शनॅलिटीसाठी लेझी लोडिंग लागू करा
जड लायब्ररी आणि फ्रेमवर्कचा वापर शक्य असल्यास कमी करा

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

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

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

आता आपण एक फंक्शन तयार करू जे संख्यात्मक डेटाला अर्थपूर्ण रंगांमध्ये बदलते. याचा विचार ट्रॅफिक लाइट सिस्टमसारखा करा - स्वच्छ ऊर्जेसाठी हिरवा, उच्च कार्बन तीव्रतेसाठी लाल.

हे फंक्शन आमच्या 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 मूल्याशी सर्वात जवळचा जुळणारा शोधतो काही छान अ‍ॅरे सॉर्टिंग वापरून
findIndex() पद्धतीचा वापर करून जुळणारा रंग मिळवतो
आमच्या निवडलेल्या रंगासह Chrome च्या पार्श्वभूमी स्क्रिप्टला संदेश पाठवतो
क्लीनर स्ट्रिंग फॉरमॅटिंगसाठी टेम्पलेट लिटरल्स (त्या बॅकटिक्स) वापरतो
const घोषणांसह सर्वकाही व्यवस्थित ठेवतो

chrome.runtime API तुमच्या विस्ताराचा मज्जासंस्था आहे - ते सर्व पडद्यामागील संवाद आणि कार्ये हाताळते:

"chrome.runtime API वापरून पार्श्वभूमी पृष्ठ पुनर्प्राप्त करा, मॅनिफेस्टबद्दल तपशील परत करा आणि अॅप किंवा विस्तार जीवनचक्रातील घटनांसाठी ऐका आणि प्रतिसाद द्या. तुम्ही URL च्या सापेक्ष मार्गांना पूर्णपणे पात्र URL मध्ये रूपांतरित करण्यासाठी देखील हे API वापरू शकता."

Chrome Runtime API का उपयुक्त आहे:

तुमच्या विस्ताराचे वेगवेगळे भाग एकमेकांशी संवाद साधू देते
पार्श्वभूमीचे कार्य UI गोठवण्याशिवाय हाताळते
तुमच्या विस्ताराच्या जीवनचक्राच्या घटनांचे व्यवस्थापन करते
स्क्रिप्ट्समधील संदेश पासिंग सुपर सोपे बनवते

✅ जर तुम्ही Edge साठी हा ब्राउझर विस्तार विकसित करत असाल, तर तुम्हाला आश्चर्य वाटेल की तुम्ही Chrome API वापरत आहात. Edge ब्राउझरच्या नवीन आवृत्त्या Chromium ब्राउझर इंजिनवर चालतात, त्यामुळे तुम्ही या साधनांचा लाभ घेऊ शकता.

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

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

आम्ही वास्तविक डेटा फेच करण्यास सुरुवात करण्यापूर्वी, चला आमच्या विस्ताराला सुरुवातीचा बिंदू देऊया. कोणीही रिकाम्या किंवा तुटलेल्या दिसणाऱ्या आयकॉनकडे पाहायला आवडत नाही. आम्ही हिरव्या रंगाने सुरुवात करू जेणेकरून वापरकर्त्यांना ते स्थापित करताच विस्तार कार्यरत असल्याचे कळेल.

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

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

या इनिशियलायझेशनने काय साध्य केले:

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

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

आता नवीन CO2 डेटा आल्यावर तुमचा आयकॉन योग्य रंगाने स्वयंचलितपणे अपडेट होईल याची खात्री करण्यासाठी सर्वकाही एकत्र जोडूया. हे इलेक्ट्रॉनिक डिव्हाइसच्या अंतिम सर्किटला जोडण्यासारखे आहे - अचानक सर्व वैयक्तिक घटक एक प्रणाली म्हणून कार्य करतात.

API मधून CO2 डेटा मिळाल्यानंतर लगेचच ही ओळ जोडा:

// After retrieving CO2 data from the API
// let CO2 = data.data[0].intensity.actual;
calculateColor(CO2);

या एकत्रीकरणाने काय साध्य केले:

API डेटा प्रवाह व्हिज्युअल इंडिकेटर सिस्टमशी जोडतो
नवीन डेटा आल्यावर आयकॉन अपडेट्स स्वयंचलितपणे ट्रिगर करतो
सध्याच्या कार्बन तीव्रतेवर आधारित रिअल-टाइम व्हिज्युअल फीडबॅक सुनिश्चित करतो
डेटा फेचिंग आणि डिस्प्ले लॉजिक दरम्यान चिंता वेगळ्या ठेवतो

आणि शेवटी, /dist/background.js मध्ये, या पार्श्वभूमी क्रिया कॉलसाठी लिसनर जोडा:

// Listen for messages from the content script
chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
	if (msg.action === 'updateIcon') {
		chrome.action.setIcon({ imageData: drawIcon(msg.value) });
	}
});

// Draw dynamic icon using Canvas API
// Borrowed from energy lollipop extension - nice feature!
function drawIcon(value) {
	// Create an offscreen canvas for better performance
	const canvas = new OffscreenCanvas(200, 200);
	const context = canvas.getContext('2d');

	// Draw a colored circle representing carbon intensity
	context.beginPath();
	context.fillStyle = value.color;
	context.arc(100, 100, 50, 0, 2 * Math.PI);
	context.fill();

	// Return the image data for the browser icon
	return context.getImageData(50, 50, 100, 100);
}

या पार्श्वभूमी स्क्रिप्टने काय साध्य केले:

तुमच्या मुख्य स्क्रिप्टमधून संदेश ऐकतो (जसे की रिसेप्शन येथे एक मनोरंजक गुप्तहेर मिशन आहे: काही ओपन सोर्स वेबसाइट्स निवडा ज्या अनेक वर्षांपासून अस्तित्वात आहेत (उदाहरणार्थ Wikipedia, GitHub, किंवा Stack Overflow) आणि त्यांच्या कमिट इतिहासाचा अभ्यास करा. त्यांनी कार्यक्षमता सुधारण्यासाठी कोणते बदल केले आहेत हे तुम्ही ओळखू शकता का? कोणत्या समस्या वारंवार समोर आल्या?

तुमचा तपासाचा दृष्टिकोन:

शोधा कमिट संदेशांमध्ये "optimize," "performance," किंवा "faster" यासारखे शब्द
पहा नमुने - ते वारंवार एकाच प्रकारच्या समस्यांचे निराकरण करत आहेत का?
ओळखा वेबसाइट्स धीम्या होण्यामागील सामान्य कारणे
सामायिक करा तुम्ही काय शोधले - इतर विकसकांना वास्तविक उदाहरणांमधून शिकता येईल

व्याख्यानानंतरचा प्रश्नमंजूषा

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

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

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

असाइनमेंट

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

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

34 KiB Raw Blame History