# ब्राउजर एक्सटेन्सन प्रोजेक्ट भाग ३: पृष्ठभूमि कार्यहरू र प्रदर्शनबारे जान्नुहोस् ## प्रि-लेक्चर क्विज [प्रि-लेक्चर क्विज](https://ff-quizzes.netlify.app/web/quiz/27) ### परिचय यस मोड्युलका पछिल्ला दुई पाठहरूमा, तपाईंले API बाट डेटा ल्याउनको लागि फारम र प्रदर्शन क्षेत्र निर्माण गर्ने तरिका सिक्नुभयो। यो वेबमा वेब उपस्थिति सिर्जना गर्ने एकदम सामान्य तरिका हो। तपाईंले डेटा असिन्क्रोनस रूपमा ल्याउनको लागि कसरी ह्यान्डल गर्ने भन्ने पनि सिक्नुभयो। तपाईंको ब्राउजर एक्सटेन्सन लगभग तयार छ। अब केही पृष्ठभूमि कार्यहरू व्यवस्थापन गर्न बाँकी छ, जसमा एक्सटेन्सनको आइकनको रंग ताजा गर्ने कार्य पनि समावेश छ। यो ब्राउजरले यस प्रकारको कार्य कसरी व्यवस्थापन गर्छ भन्ने कुरा बुझ्नको लागि राम्रो समय हो। तपाईंले निर्माण गरिरहेका वेब सम्पत्तिहरूको प्रदर्शनको सन्दर्भमा यी ब्राउजर कार्यहरूबारे सोचौं। ## वेब प्रदर्शनको आधारभूत कुरा > "वेबसाइट प्रदर्शन दुई कुराबारे हो: पृष्ठ कति छिटो लोड हुन्छ, र त्यसमा रहेको कोड कति छिटो चल्छ।" -- [ज्याक ग्रोसबार्ट](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/) वेबसाइटहरूलाई सबै प्रकारका उपकरणहरू, सबै प्रकारका प्रयोगकर्ताहरू, र सबै प्रकारका परिस्थितिहरूमा अत्यन्त छिटो बनाउने विषय अपेक्षाकृत विशाल छ। यहाँ केही बुँदाहरू छन् जुन तपाईंले सामान्य वेब प्रोजेक्ट वा ब्राउजर एक्सटेन्सन निर्माण गर्दा ध्यानमा राख्नुपर्छ। तपाईंको साइट कुशलतापूर्वक चलिरहेको छ भन्ने सुनिश्चित गर्नको लागि पहिलो कुरा भनेको यसको प्रदर्शनको डेटा संकलन गर्नु हो। यसको पहिलो स्थान भनेको तपाईंको वेब ब्राउजरको डेभलपर टूल्स हो। Edge मा, तपाईं "सेटिङ्स र थप" बटन (ब्राउजरको माथि दायाँपट्टि रहेको तीन डट आइकन) चयन गर्न सक्नुहुन्छ, त्यसपछि More Tools > Developer Tools मा जानुहोस् र Performance ट्याब खोल्नुहोस्। तपाईं Windows मा `Ctrl` + `Shift` + `I` वा Mac मा `Option` + `Command` + `I` प्रयोग गरेर डेभलपर टूल्स खोल्न सक्नुहुन्छ। Performance ट्याबमा एक प्रोफाइलिङ टूल हुन्छ। कुनै वेबसाइट खोल्नुहोस् (उदाहरणको लागि, [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) र 'Record' बटन क्लिक गर्नुहोस्, त्यसपछि साइटलाई रिफ्रेस गर्नुहोस्। कुनै पनि समयमा रेकर्डिङ रोक्नुहोस्, र तपाईंले साइटलाई 'स्क्रिप्ट', 'रेन्डर', र 'पेन्ट' गर्न उत्पन्न हुने रुटिनहरू देख्न सक्नुहुन्छ:  ✅ [Microsoft Documentation](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) मा Edge को Performance प्यानलबारे जान्नुहोस्। > टिप: तपाईंको वेबसाइटको स्टार्टअप समयको सही रिडिङ प्राप्त गर्नको लागि, तपाईंको ब्राउजरको क्यास खाली गर्नुहोस्। प्रोफाइल टाइमलाइनका तत्वहरू चयन गरेर पृष्ठ लोड हुँदा हुने घटनाहरूमा जुम इन गर्नुहोस्। प्रोफाइल टाइमलाइनको कुनै भाग चयन गरेर र समरी प्यान हेरेर तपाईंको पृष्ठको प्रदर्शनको स्न्यापशट प्राप्त गर्नुहोस्:  Event Log प्यान जाँच गरेर हेर्नुहोस् कि कुनै घटना १५ मिलिसेकेन्डभन्दा बढी समय लिएको छ कि छैन:  ✅ तपाईंको प्रोफाइलरलाई चिन्नुहोस्! यस साइटमा डेभलपर टूल्स खोल्नुहोस् र हेर्नुहोस् कि कुनै बोटलनेक छ कि छैन। सबैभन्दा ढिलो लोड हुने सम्पत्ति कुन हो? सबैभन्दा छिटो? ## प्रोफाइलिङ जाँचहरू सामान्यतया, केही "समस्या क्षेत्रहरू" छन् जसलाई प्रत्येक वेब डेभलपरले साइट निर्माण गर्दा ध्यान दिनुपर्छ ताकि उत्पादनमा डिप्लोय गर्ने समय अप्रिय आश्चर्यहरूबाट बच्न सकियोस्। **एसेट साइजहरू**: पछिल्ला केही वर्षहरूमा वेब 'भारी' भएको छ, र यसैले ढिलो पनि। यस तौलको केही भाग छविहरूको प्रयोगसँग सम्बन्धित छ। ✅ [Internet Archive](https://httparchive.org/reports/page-weight) हेरेर पृष्ठको तौलको ऐतिहासिक दृश्य र थप जानकारी प्राप्त गर्नुहोस्। एक राम्रो अभ्यास भनेको सुनिश्चित गर्नु हो कि तपाईंको छविहरू अनुकूलित छन् र तपाईंका प्रयोगकर्ताहरूको लागि सही आकार र रिजोल्युसनमा प्रदान गरिएका छन्। **DOM ट्राभर्सलहरू**: ब्राउजरले तपाईंले लेखेको कोडको आधारमा यसको Document Object Model निर्माण गर्नुपर्छ, त्यसैले राम्रो पृष्ठ प्रदर्शनको लागि तपाईंका ट्यागहरू न्यूनतम राख्नु राम्रो हुन्छ। पृष्ठले आवश्यक पर्ने मात्र प्रयोग र स्टाइल गर्नुहोस्। यस बुँदामा, पृष्ठसँग सम्बन्धित अतिरिक्त CSS अनुकूलित गर्न सकिन्छ; उदाहरणका लागि, केवल एक पृष्ठमा प्रयोग गर्न आवश्यक पर्ने स्टाइलहरू मुख्य स्टाइल शीटमा समावेश गर्न आवश्यक छैन। **जाभास्क्रिप्ट**: प्रत्येक जाभास्क्रिप्ट डेभलपरले 'रेन्डर-ब्लकिङ' स्क्रिप्टहरूको लागि ध्यान दिनुपर्छ जसले DOM ट्राभर्स र ब्राउजरमा पेन्ट गर्नुअघि लोड हुनुपर्छ। तपाईंका इनलाइन स्क्रिप्टहरूसँग `defer` प्रयोग गर्ने विचार गर्नुहोस् (जसरी Terrarium मोड्युलमा गरिएको छ)। ✅ साइट प्रदर्शन निर्धारण गर्न गरिने सामान्य जाँचहरूबारे थप जान्नको लागि [Site Speed Test वेबसाइट](https://www.webpagetest.org/) मा केही साइटहरू प्रयास गर्नुहोस्। अब तपाईंलाई ब्राउजरले तपाईंले पठाएका सम्पत्तिहरू कसरी रेन्डर गर्छ भन्ने थाहा छ, अब तपाईंको एक्सटेन्सन पूरा गर्न आवश्यक अन्तिम केही कुराहरू हेरौं: ### रंग गणना गर्ने फङ्सन सिर्जना गर्नुहोस् `/src/index.js` मा काम गर्दै, `calculateColor()` नामक फङ्सनलाई DOM पहुँच गर्न सेट गरिएका `const` भेरिएबलहरूको श्रृंखलापछि थप्नुहोस्: ```JavaScript 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](https://developer.chrome.com/extensions/runtime) छ जसले सबै प्रकारका पृष्ठभूमि कार्यहरू ह्यान्डल गर्छ, र तपाईंको एक्सटेन्सनले यसलाई प्रयोग गरिरहेको छ: > "क्रोम रनटाइम API प्रयोग गरेर पृष्ठभूमि पृष्ठ पुनःप्राप्त गर्नुहोस्, म्यानिफेस्टको विवरणहरू फर्काउनुहोस्, र एप वा एक्सटेन्सन लाइफसाइकलमा घटनाहरूको लागि सुन्नुहोस् र प्रतिक्रिया दिनुहोस्। तपाईंले यस API प्रयोग गरेर URLहरूको सापेक्ष पथलाई पूर्ण-योग्य URLहरूमा रूपान्तरण गर्न पनि सक्नुहुन्छ।" ✅ यदि तपाईं Edge को लागि यो ब्राउजर एक्सटेन्सन विकास गर्दै हुनुहुन्छ भने, तपाईंलाई आश्चर्य लाग्न सक्छ कि तपाईं क्रोम API प्रयोग गर्दै हुनुहुन्छ। Edge ब्राउजरका नयाँ संस्करणहरू Chromium ब्राउजर इन्जिनमा चल्छन्, त्यसैले तपाईंले यी उपकरणहरू प्रयोग गर्न सक्नुहुन्छ। > नोट, यदि तपाईं ब्राउजर एक्सटेन्सन प्रोफाइल गर्न चाहनुहुन्छ भने, एक्सटेन्सनभित्रै डेभलपर टूल्स खोल्नुहोस्, किनकि यो आफ्नै अलग ब्राउजर इन्स्ट्यान्स हो। ### डिफल्ट आइकन रंग सेट गर्नुहोस् अब, `init()` फङ्सनमा, आइकनलाई सुरुमा सामान्य हरियो रंगमा सेट गर्नुहोस् र फेरि क्रोमको `updateIcon` एक्सनलाई कल गर्नुहोस्: ```JavaScript chrome.runtime.sendMessage({ action: 'updateIcon', value: { color: 'green', }, }); ``` ### फङ्सन कल गर्नुहोस्, कल कार्यान्वयन गर्नुहोस् अब, तपाईंले पछिल्लो पाठमा पूरा गरेको C02Signal API द्वारा फर्काइएको प्रॉमिसमा यो फङ्सनलाई कल गर्नुहोस्: ```JavaScript //let CO2... calculateColor(CO2); ``` अन्तमा, `/dist/background.js` मा, यी पृष्ठभूमि कार्य कलहरूको लागि लिस्नर थप्नुहोस्: ```JavaScript chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) { if (msg.action === 'updateIcon') { chrome.browserAction.setIcon({ imageData: drawIcon(msg.value) }); } }); //borrowed from energy lollipop extension, nice feature! function drawIcon(value) { let canvas = document.createElement('canvas'); 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 प्रयोग गरेर ड्र गर्न अर्को कोड चलाइन्छ। ✅ तपाईं [Space Game पाठहरू](../../6-space-game/2-drawing-to-canvas/README.md) मा क्यानभास API को बारेमा थप जान्नुहुनेछ। अब, तपाईंको एक्सटेन्सन पुनः निर्माण गर्नुहोस् (`npm run build`), रिफ्रेस गर्नुहोस् र तपाईंको एक्सटेन्सन सुरु गर्नुहोस्, र रंग परिवर्तन हेर्नुहोस्। के यो काम गर्न वा भाँडा माझ्न जाने राम्रो समय हो? अब तपाईंलाई थाहा छ! बधाई छ, तपाईंले उपयोगी ब्राउजर एक्सटेन्सन निर्माण गर्नुभयो र ब्राउजर कसरी काम गर्छ र यसको प्रदर्शन कसरी प्रोफाइल गर्ने भन्ने बारे थप सिक्नुभयो। --- ## 🚀 चुनौती केही पुराना ओपन सोर्स वेबसाइटहरू अन्वेषण गर्नुहोस्, र तिनीहरूको GitHub इतिहासको आधारमा, तिनीहरू प्रदर्शनको लागि वर्षौंसम्म कसरी अनुकूलित गरिए भन्ने निर्धारण गर्न प्रयास गर्नुहोस्। सबैभन्दा सामान्य समस्या क्षेत्र कुन हो? ## पोस्ट-लेक्चर क्विज [पोस्ट-लेक्चर क्विज](https://ff-quizzes.netlify.app/web/quiz/28) ## समीक्षा र आत्म अध्ययन [प्रदर्शन न्यूजलेटर](https://perf.email/) को लागि साइन अप गर्ने विचार गर्नुहोस्। वेब टूल्सका प्रदर्शन ट्याबहरू हेरेर ब्राउजरहरूले वेब प्रदर्शन कसरी मापन गर्छन् भन्ने केही तरिकाहरू अन्वेषण गर्नुहोस्। के तपाईंले कुनै प्रमुख भिन्नता पाउनुभयो? ## असाइनमेन्ट [साइटको प्रदर्शन विश्लेषण गर्नुहोस्](assignment.md) --- **अस्वीकरण**: यो दस्तावेज़ AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) प्रयोग गरेर अनुवाद गरिएको हो। हामी शुद्धताको लागि प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादहरूमा त्रुटि वा अशुद्धता हुन सक्छ। यसको मूल भाषा मा रहेको मूल दस्तावेज़लाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुने छैनौं।