37 KiB

Raw Blame History

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

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

यो ब्राउजर एक्सटेन्सन श्रृंखलाको अन्तिम पाठ हो, र हामी तपाईंको कार्बन फुटप्रिन्ट ट्र्याकरलाई सहज रूपमा काम गर्ने बनाउनेछौं। तपाईंले गतिशील आइकन अपडेटहरू थप्नुहुनेछ र प्रदर्शन समस्याहरू पहिचान गर्न सिक्नुहुनेछ। यो रेस कार ट्युनिङ जस्तै हो - साना अनुकूलनहरूले सबै कुरा कसरी चल्छ भन्नेमा ठूलो फरक पार्न सक्छ।

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

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

परिचय

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

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

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

जब तपाईंको कोड कुशलतापूर्वक चल्छ, मानिसहरूले वास्तवमा महसुस गर्न सक्छन्। तपाईंलाई थाहा छ त्यो क्षण जब पृष्ठ तुरुन्तै लोड हुन्छ वा एनिमेसन सहज रूपमा बग्छ? त्यो राम्रो प्रदर्शनको काम हो।

प्रदर्शन केवल गति मात्र होइन - यो वेब अनुभवहरूलाई प्राकृतिक बनाउने बारे हो, क्लंकी र निराशाजनकको सट्टा। कम्प्युटिङको प्रारम्भिक दिनहरूमा, ग्रेस होपरले आफ्नो डेस्कमा एक नानोसेकेन्ड (लगभग एक फिट लामो तारको टुक्रा) राख्थिन् ताकि प्रकाश एक अर्बौं सेकेन्डमा कति टाढा यात्रा गर्छ भनेर देखाउन सकियोस्। यो कम्प्युटिङमा प्रत्येक माइक्रोसेकेन्ड किन महत्त्वपूर्ण छ भन्ने व्याख्या गर्ने उनको तरिका थियो। आउनुहोस्, के चीजले गति कम गरिरहेको छ भनेर पत्ता लगाउन मद्दत गर्ने डिटेक्टिभ उपकरणहरू अन्वेषण गरौं।

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

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

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

Edge मा Developer Tools खोल्न, माथि दायाँ कुनामा तीन डटहरू क्लिक गर्नुहोस्, त्यसपछि More Tools > Developer Tools मा जानुहोस्। वा किबोर्ड सर्टकट प्रयोग गर्नुहोस्: Ctrl + Shift + I Windows मा वा Option + Command + I Mac मा। एकपटक त्यहाँ पुगेपछि, Performance ट्याबमा क्लिक गर्नुहोस् - यहीँ तपाईं आफ्नो अनुसन्धान गर्नुहुनेछ।

यहाँ तपाईंको प्रदर्शन डिटेक्टिभ टूलकिट छ:

खोल्नुहोस् Developer Tools (तपाईंले यो बारम्बार प्रयोग गर्नुहुनेछ!)
Performance ट्याबमा जानुहोस् - यसलाई तपाईंको वेब एपको फिटनेस ट्र्याकरको रूपमा सोच्नुहोस्
Record बटन थिच्नुहोस् र आफ्नो पृष्ठलाई क्रियाशील अवस्थामा हेर्नुहोस्
परिणामहरू अध्ययन गर्नुहोस् के चीजले गति कम गरिरहेको छ भनेर पत्ता लगाउन

आउनुहोस्, यसलाई प्रयास गरौं। एउटा वेबसाइट खोल्नुहोस् (Microsoft.com राम्रो काम गर्छ) र 'Record' बटन क्लिक गर्नुहोस्। अब पृष्ठलाई रिफ्रेस गर्नुहोस् र प्रोफाइलरले के भइरहेको छ भनेर क्याप्चर गर्न हेर्नुहोस्। जब तपाईं रेकर्डिङ रोक्नुहुन्छ, तपाईंले ब्राउजरले साइटलाई 'स्क्रिप्ट', 'रेन्डर', र 'पेन्ट' गर्ने तरिकाको विस्तृत विवरण देख्नुहुनेछ। यो मिशन कन्ट्रोलले रकेट प्रक्षेपणको समयमा प्रत्येक प्रणालीलाई अनुगमन गर्ने तरिकाको जस्तै हो - तपाईंलाई वास्तविक समयको डेटा प्राप्त हुन्छ कि के भइरहेको छ र कहिले।

✅ Microsoft Documentation मा थप विवरणहरू छन् यदि तपाईं गहिरो जान्न चाहनुहुन्छ भने

प्रो टिप: परीक्षण गर्नु अघि आफ्नो ब्राउजर क्यास खाली गर्नुहोस् ताकि तपाईंको साइट पहिलो पटक आगन्तुकहरूको लागि कस्तो प्रदर्शन गर्छ हेर्न सक्नुहोस् - यो सामान्यत: दोहोरिने आगन्तुकहरू भन्दा धेरै फरक हुन्छ!

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

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

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

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

प्रोफाइलिङ गर्दा के हेर्ने

प्रोफाइलर चलाउनु भनेको सुरुवात मात्र हो - वास्तविक सीप भनेको ती रंगीन चार्टहरूले वास्तवमा के बताइरहेका छन् भन्ने कुरा जान्नु हो। चिन्ता नगर्नुहोस्, तपाईंले तिनीहरूलाई पढ्न सिक्नुहुनेछ। अनुभवी डेभलपरहरूले पूर्ण समस्या बन्नु अघि चेतावनी संकेतहरू पहिचान गर्न सिकेका छन्।

आउनुहोस्, सामान्य संदिग्धहरूको बारेमा कुरा गरौं - प्रदर्शन समस्याहरू जसले वेब परियोजनाहरूमा चुपचाप प्रवेश गर्न रुचाउँछन्। जस्तै मारी क्युरीले आफ्नो प्रयोगशालामा विकिरण स्तरलाई सावधानीपूर्वक अनुगमन गर्नुपरेको थियो, हामीले निश्चित ढाँचाहरूको लागि हेर्नुपर्छ जसले समस्या उत्पन्न गरिरहेको संकेत गर्दछ। यी चाँडै समात्नुले तपाईंलाई (र तपाईंका प्रयोगकर्ताहरूलाई) धेरै निराशा बचत गर्नेछ।

सम्पत्ति आकारहरू: वेबसाइटहरू वर्षौंमा "गह्रौं" हुँदै गएका छन्, र त्यो अतिरिक्त वजनको धेरै भाग छविहरूबाट आउँछ। यो जस्तै हामीले हाम्रो डिजिटल सुटकेसहरूमा थप र थप सामानहरू भरिरहेका छौं।

✅ Internet Archive हेर्नुहोस् कि पृष्ठ आकारहरू समयसँगै कसरी बढेका छन् - यो धेरै खुलासा छ।

यहाँ तपाईंको सम्पत्तिहरू अनुकूलित गर्ने तरिका छ:

छविहरूलाई कम्प्रेस गर्नुहोस्! आधुनिक फर्म्याटहरू जस्तै WebP ले फाइल आकारलाई नाटकीय रूपमा कटौती गर्न सक्छ
प्रत्येक उपकरणको लागि सही छवि आकार प्रदान गर्नुहोस् - फोनहरूमा ठूला डेस्कटप छविहरू पठाउन आवश्यक छैन
CSS र JavaScriptलाई मिनिफाइ गर्नुहोस् - प्रत्येक बाइट महत्त्वपूर्ण छ
लेजी लोडिङ प्रयोग गर्नुहोस् ताकि छविहरू केवल प्रयोगकर्ताहरूले वास्तवमा स्क्रोल गर्दा मात्र डाउनलोड हुन्छ

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

DOM अनुकूलनका प्रमुख रणनीतिहरू:

HTML तत्वहरूको संख्या र नेस्टिङ स्तरलाई न्यूनतम बनाउनुहोस्
अप्रयुक्त CSS नियमहरू हटाउनुहोस् र शैली शीटहरूलाई कुशलतापूर्वक समेकित गर्नुहोस्
CSSलाई प्रत्येक पृष्ठको लागि आवश्यक पर्ने मात्र लोड गर्न व्यवस्थित गर्नुहोस्
HTMLलाई ब्राउजर पार्सिङको लागि राम्रो बनाउन सेम्यान्टिक रूपमा संरचना गर्नुहोस्

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

आधुनिक JavaScript अनुकूलन प्रविधिहरू:

स्क्रिप्टहरू DOM पार्सिङ पछि लोड गर्न defer एट्रिब्युट प्रयोग गर्नुहोस्
कोड स्प्लिटिङ कार्यान्वयन गर्नुहोस् ताकि केवल आवश्यक JavaScript लोड होस्
गैर-आवश्यक कार्यक्षमताको लागि लेजी लोडिङ लागू गर्नुहोस्
भारी लाइब्रेरीहरू र फ्रेमवर्कहरूको प्रयोग न्यूनतम गर्नुहोस् जब सम्भव छ

✅ साइट प्रदर्शन जाँच गर्ने सामान्य चेकहरूको बारेमा जान्न Site Speed Test वेबसाइट मा केही साइटहरू प्रयास गर्नुहोस्।

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

रंग गणना गर्ने फंक्शन बनाउनुहोस्

अब हामी एउटा फंक्शन बनाउनेछौं जसले संख्यात्मक डेटा meaningful रंगहरूमा परिवर्तन गर्छ। यसलाई ट्राफिक लाइट प्रणाली जस्तै सोच्नुहोस् - हरियो सफा ऊर्जा, रातो उच्च कार्बन तीव्रता।

यो फंक्शनले हाम्रो 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 प्रयोग गरेर पृष्ठभूमि पृष्ठ पुनः प्राप्त गर्नुहोस्, म्यानिफेस्टको बारेमा विवरणहरू फर्काउनुहोस्, र एप वा एक्सटेन्सन जीवनचक्रमा घटनाहरूको लागि सुन्नुहोस् र प्रतिक्रिया दिनुहोस्। तपाईं यस API प्रयोग गरेर URLहरूको सापेक्ष पथलाई पूर्ण-योग्य URLहरूमा रूपान्तरण गर्न सक्नुहुन्छ।"

किन Chrome Runtime API यति उपयोगी छ:

तपाईंको एक्सटेन्सनका विभिन्न भागहरूलाई एकअर्कासँग कुरा गर्न दिन्छ
पृष्ठभूमि कार्यहरू ह्यान्डल गर्दछ प्रयोगकर्ता इन्टरफेस फ्रिज नगरी
तपाईंको एक्सटेन्सनको जीवनचक्र घटनाहरू व्यवस्थापन गर्दछ
स्क्रिप्टहरू बीच सन्देश पासिङलाई सुपर सजिलो बनाउँछ

✅ यदि तपाईं 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);
}

यो पृष्ठभूमि स्क्रिप्टले के गर्छ:

तपाईंको मुख्य स्क्रिप्टबाट सन्देशहरू सुन्छ (जस्तै रिसेप्सनिस्टले कलहरू लिन्छ)
तिनी 'updateIcon' अनुरोधहरूलाई प्रक्रिया गर्छ तपाईंको टूलबार आइकन परिवर्तन गर्न
Canvas API प्रयोग गरेर नयाँ आइकनहरू बनाउँछ
साधारण रंगीन वृत्त कोरेर वर्तमान कार्बन तीव्रता देखाउँछ
ताजा आइकनसँग तपाईंको ब्राउजर टूलबार अपडेट गर्छ
स्मूथ प्रदर्शनको लागि OffscreenCanvas प्रयोग गर्छ (कुनै UI ब्लकिङ छैन)

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

तपाईंको एक्सटेन्सन परीक्षण गर्ने समय:

सबै कुरा निर्माण गर्नुहोस् npm run build प्रयोग गरेर
ब्राउजरमा आफ्नो एक्सटेन्सन पुनःलोड गर्नुहोस् (यो चरण नबिर्सनुहोस्)
**आफ्नो एक्सटे यहाँ एउटा रोचक जासुसी मिशन छ: केही पुराना ओपन सोर्स वेबसाइटहरू (जस्तै Wikipedia, GitHub, वा Stack Overflow) छनोट गर्नुहोस् र तिनीहरूको कमिट इतिहासमा गहिरो अध्ययन गर्नुहोस्। के तपाईंले देख्न सक्नुहुन्छ कि तिनीहरूले कहिले प्रदर्शन सुधार गरेका थिए? कुन समस्याहरू बारम्बार देखा परिरहेका थिए?

तपाईंको अनुसन्धानको तरिका:

खोज्नुहोस् कमिट सन्देशहरूमा "optimize," "performance," वा "faster" जस्ता शब्दहरू
हेर्नुहोस् ढाँचाहरू - के तिनीहरूले बारम्बार एउटै प्रकारका समस्याहरू समाधान गरिरहेका छन्?
पहिचान गर्नुहोस् वेबसाइटहरू सुस्त बनाउने सामान्य कारणहरू
साझा गर्नुहोस् तपाईंले के पत्ता लगाउनुभयो - अन्य विकासकर्ताहरूले वास्तविक उदाहरणहरूबाट सिक्न सक्छन्

पोस्ट-व्याख्यान क्विज

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

प्रदर्शन समाचारपत्र को लागि साइन अप गर्ने विचार गर्नुहोस्।

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

असाइनमेन्ट

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

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

37 KiB Raw Blame History