History

leestott b5747037fb 🌐 Update translations via Co-op Translator		2 months ago
..
README.md	🌐 Update translations via Co-op Translator	2 months ago
assignment.md	🌐 Update translations via Co-op Translator	3 months ago

README.md

ब्राउजर एक्सटेन्सन प्रोजेक्ट भाग ३: पृष्ठभूमि कार्यहरू र प्रदर्शनको बारेमा जान्नुहोस्

प्रि-लेक्चर क्विज

परिचय

यस मोड्युलका पछिल्ला दुई पाठहरूमा, तपाईंले API बाट डेटा ल्याउनको लागि फारम र प्रदर्शन क्षेत्र निर्माण गर्ने तरिका सिक्नुभयो। यो वेबमा वेब उपस्थिति सिर्जना गर्ने एकदमै सामान्य तरिका हो। तपाईंले डेटा असिंक्रोनस रूपमा ल्याउनको लागि कसरी ह्यान्डल गर्ने भन्ने पनि सिक्नुभयो। तपाईंको ब्राउजर एक्सटेन्सन लगभग तयार छ।

अब केही पृष्ठभूमि कार्यहरू व्यवस्थापन गर्न बाँकी छ, जसमा एक्सटेन्सनको आइकनको रंग ताजा गर्ने समावेश छ। यो ब्राउजरले यस प्रकारको कार्य कसरी व्यवस्थापन गर्छ भन्ने कुरा बुझ्नको लागि राम्रो समय हो। तपाईंले निर्माण गरिरहेका वेब सम्पत्तिहरूको प्रदर्शनको सन्दर्भमा यी ब्राउजर कार्यहरूबारे सोचौं।

वेब प्रदर्शनको आधारभूत कुरा

"वेबसाइट प्रदर्शन दुई कुराहरूको बारेमा हो: पृष्ठ कति छिटो लोड हुन्छ, र त्यसमा रहेको कोड कति छिटो चल्छ।" -- ज्याक ग्रोसबार्ट

वेबसाइटलाई सबै प्रकारका उपकरणहरू, सबै प्रकारका प्रयोगकर्ताहरू, र सबै प्रकारका परिस्थितिहरूमा अत्यन्त छिटो बनाउने तरिका एक विशाल विषय हो। यहाँ केही बुँदाहरू छन् जुन तपाईंले सामान्य वेब प्रोजेक्ट वा ब्राउजर एक्सटेन्सन निर्माण गर्दा ध्यानमा राख्नुपर्छ।

तपाईंको साइट कुशलतापूर्वक चलिरहेको छ भन्ने सुनिश्चित गर्नको लागि पहिलो कुरा भनेको यसको प्रदर्शनको डेटा संकलन गर्नु हो। यसको लागि पहिलो स्थान भनेको तपाईंको वेब ब्राउजरको डेभलपर टूल्स हो। Edge मा, तपाईं "सेटिङ्स र थप" बटन (ब्राउजरको माथि दायाँपट्टि रहेको तीन डट आइकन) चयन गर्न सक्नुहुन्छ, त्यसपछि More Tools > Developer Tools मा जानुहोस् र Performance ट्याब खोल्नुहोस्। तपाईं Windows मा Ctrl + Shift + I वा Mac मा Option + Command + I कीबोर्ड सर्टकट प्रयोग गरेर पनि डेभलपर टूल्स खोल्न सक्नुहुन्छ।

Performance ट्याबमा एक प्रोफाइलिङ टूल हुन्छ। कुनै वेबसाइट खोल्नुहोस् (उदाहरणको लागि, https://www.microsoft.com) र 'Record' बटन क्लिक गर्नुहोस्, त्यसपछि साइटलाई रिफ्रेस गर्नुहोस्। कुनै पनि समयमा रेकर्डिङ रोक्नुहोस्, र तपाईंले साइटलाई 'स्क्रिप्ट', 'रेन्डर', र 'पेन्ट' गर्न उत्पन्न भएका रुटिनहरू देख्न सक्नुहुन्छ:

✅ Edge मा Performance प्यानलको बारेमा Microsoft डकुमेन्टेशन हेर्नुहोस्।

टिप: तपाईंको वेबसाइटको स्टार्टअप समयको सही रिडिङ प्राप्त गर्नको लागि, तपाईंको ब्राउजरको क्यास खाली गर्नुहोस्।

प्रोफाइल टाइमलाइनका तत्वहरू चयन गरेर तपाईंको पृष्ठ लोड हुँदा हुने घटनाहरूमा जुम इन गर्नुहोस्।

प्रोफाइल टाइमलाइनको कुनै भाग चयन गरेर र समरी प्यान हेरेर तपाईंको पृष्ठको प्रदर्शनको स्न्यापशट प्राप्त गर्नुहोस्:

Event Log प्यान जाँच गर्नुहोस् कि कुनै घटना १५ मिलिसेकेन्डभन्दा बढी समय लिएको छ कि छैन:

✅ तपाईंको प्रोफाइलरलाई राम्रोसँग चिन्नुहोस्! यस साइटमा डेभलपर टूल्स खोल्नुहोस् र कुनै बोटलनेक छ कि छैन हेर्नुहोस्। सबैभन्दा ढिलो लोड हुने सम्पत्ति कुन हो? सबैभन्दा छिटो?

प्रोफाइलिङ जाँचहरू

सामान्यतया, केही "समस्या क्षेत्रहरू" छन् जुन प्रत्येक वेब डेभलपरले साइट निर्माण गर्दा ध्यान दिनुपर्छ ताकि उत्पादनमा डिप्लोय गर्ने समय अप्रिय आश्चर्यहरूबाट बच्न सकियोस्।

एसेट साइजहरू: पछिल्ला केही वर्षहरूमा वेब 'भारी' भएको छ, र त्यसैले ढिलो पनि। यस तौलको केही भाग छविहरूको प्रयोगसँग सम्बन्धित छ।

✅ इन्टरनेट आर्काइभ हेर्नुहोस् पृष्ठको तौलको ऐतिहासिक दृश्य र थप जानकारीको लागि।

एक राम्रो अभ्यास भनेको तपाईंको छविहरूलाई अनुकूलित गर्नु र तपाईंका प्रयोगकर्ताहरूको लागि सही साइज र रिजोल्युसनमा डेलिभर गर्नु हो।

DOM ट्राभर्सलहरू: ब्राउजरले तपाईंले लेखेको कोडको आधारमा यसको Document Object Model निर्माण गर्नुपर्छ, त्यसैले राम्रो पृष्ठ प्रदर्शनको लागि तपाईंको ट्यागहरू न्यूनतम राख्नु राम्रो हुन्छ। पृष्ठलाई आवश्यक पर्ने मात्र प्रयोग गर्नुहोस् र स्टाइल गर्नुहोस्। यस बुँदामा, पृष्ठसँग सम्बन्धित अतिरिक्त CSS अनुकूलित गर्न सकिन्छ; उदाहरणका लागि, केवल एक पृष्ठमा प्रयोग गर्न आवश्यक स्टाइलहरू मुख्य स्टाइल शीटमा समावेश गर्न आवश्यक छैन।

जाभास्क्रिप्ट: प्रत्येक जाभास्क्रिप्ट डेभलपरले 'रेन्डर-ब्लकिङ' स्क्रिप्टहरूको लागि ध्यान दिनुपर्छ जुन DOM ट्राभर्स र ब्राउजरमा पेन्ट गर्नुअघि लोड गर्नुपर्छ। तपाईंको इनलाइन स्क्रिप्टहरूसँग defer प्रयोग गर्ने विचार गर्नुहोस् (जसरी Terrarium मोड्युलमा गरिएको छ)।

✅ साइट प्रदर्शन निर्धारण गर्न गरिने सामान्य जाँचहरूको बारेमा थप जान्नको लागि साइट स्पीड टेस्ट वेबसाइट मा केही साइटहरू प्रयास गर्नुहोस्।

अब तपाईंलाई ब्राउजरले तपाईंले पठाएका सम्पत्तिहरू कसरी रेन्डर गर्छ भन्ने थाहा छ, अब तपाईंको एक्सटेन्सन पूरा गर्न आवश्यक अन्तिम केही कुराहरू हेर्नुहोस्:

रंग गणना गर्ने फङ्सन सिर्जना गर्नुहोस्

/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 कलबाट प्राप्त कार्बन इन्टेन्सिटीको मान पास गर्नुहुन्छ, र त्यसपछि यसको मान रंगहरूको एरेमा प्रस्तुत गरिएको सूचकांकसँग कति नजिक छ भनेर गणना गर्नुहुन्छ। त्यसपछि तपाईंले त्यो नजिकको रंग मानलाई क्रोम रनटाइममा पठाउनुहुन्छ।

क्रोम रनटाइमसँग एक API छ जसले सबै प्रकारका पृष्ठभूमि कार्यहरू ह्यान्डल गर्छ, र तपाईंको एक्सटेन्सनले यसलाई प्रयोग गरिरहेको छ:

"क्रोम रनटाइम API प्रयोग गरेर पृष्ठभूमि पृष्ठ पुनःप्राप्त गर्नुहोस्, म्यानिफेस्टको विवरणहरू फर्काउनुहोस्, र एप वा एक्सटेन्सन लाइफसाइकलमा घटनाहरूको लागि सुन्नुहोस् र प्रतिक्रिया दिनुहोस्। तपाईं यस API प्रयोग गरेर URLहरूको सापेक्ष पथलाई पूर्ण-योग्य URLहरूमा रूपान्तरण गर्न सक्नुहुन्छ।"

✅ यदि तपाईं Edge को लागि यो ब्राउजर एक्सटेन्सन विकास गर्दै हुनुहुन्छ भने, तपाईंलाई आश्चर्य लाग्न सक्छ कि तपाईं क्रोम API प्रयोग गर्दै हुनुहुन्छ। Edge ब्राउजरका नयाँ संस्करणहरू Chromium ब्राउजर इन्जिनमा चल्छन्, त्यसैले तपाईं यी उपकरणहरू प्रयोग गर्न सक्नुहुन्छ।

नोट, यदि तपाईं ब्राउजर एक्सटेन्सन प्रोफाइल गर्न चाहनुहुन्छ भने, एक्सटेन्सन भित्रबाट डेभलपर टूल्स सुरू गर्नुहोस्, किनकि यो आफ्नै अलग ब्राउजर इन्स्ट्यान्स हो।

डिफल्ट आइकन रंग सेट गर्नुहोस्

अब, 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' भनिन्छ भने, त्यसपछि अर्को कोड चल्छ जसले Canvas API प्रयोग गरेर सही रंगको आइकन बनाउँछ।

✅ तपाईं Space Game पाठहरू मा Canvas API को बारेमा थप जान्नुहुनेछ।

अब, तपाईंको एक्सटेन्सन पुनः निर्माण गर्नुहोस् (npm run build), रिफ्रेस गर्नुहोस् र तपाईंको एक्सटेन्सन सुरू गर्नुहोस्, र रंग परिवर्तन हेर्नुहोस्। के यो काम गर्नको लागि राम्रो समय हो? अब तपाईंलाई थाहा छ!

बधाई छ, तपाईंले उपयोगी ब्राउजर एक्सटेन्सन निर्माण गर्नुभयो र ब्राउजर कसरी काम गर्छ र यसको प्रदर्शन कसरी प्रोफाइल गर्ने भन्ने बारेमा थप सिक्नुभयो।

🚀 चुनौती

केही पुराना ओपन सोर्स वेबसाइटहरूको अनुसन्धान गर्नुहोस्, र तिनीहरूको GitHub इतिहासको आधारमा, तिनीहरू प्रदर्शनको लागि वर्षौंसम्म कसरी अनुकूलित गरिएका थिए भनेर निर्धारण गर्न प्रयास गर्नुहोस्। सबैभन्दा सामान्य समस्या क्षेत्र के हो?

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

समीक्षा र आत्म-अध्ययन

प्रदर्शन न्यूजलेटर को लागि साइन अप गर्ने विचार गर्नुहोस्।

वेब टूल्सका प्रदर्शन ट्याबहरू हेरेर ब्राउजरहरूले वेब प्रदर्शन कसरी मापन गर्छन् भन्ने केही तरिकाहरूको अनुसन्धान गर्नुहोस्। के तपाईंले कुनै ठूला भिन्नता पाउनुभयो?

असाइनमेन्ट

साइटको प्रदर्शन विश्लेषण गर्नुहोस्

अस्वीकरण:
यो दस्तावेज़ AI अनुवाद सेवा Co-op Translator प्रयोग गरी अनुवाद गरिएको हो। हामी यथासम्भव शुद्धताको लागि प्रयास गर्छौं, तर कृपया जानकार रहनुहोस् कि स्वचालित अनुवादहरूमा त्रुटिहरू वा अशुद्धताहरू हुन सक्छन्। यसको मूल भाषामा रहेको मूल दस्तावेज़लाई आधिकारिक स्रोत मानिनुपर्छ। महत्त्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुने छैनौं।