इस मॉड्यूल के अंतिम दो पाठों में, आपने सीखा कि एपीआई से प्राप्त डेटा के लिए एक फॉर्म और डिस्प्ले क्षेत्र कैसे बनाया जाए। यह वेब पर वेब उपस्थिति बनाने का एक बहुत ही मानक तरीका है। आपने यह भी सीखा कि कैसे डेटा को असंगत रूप से संभालना है। आपका ब्राउज़र एक्सटेंशन लगभग पूरा हो चुका है।
यह कुछ पृष्ठभूमि कार्यों को प्रबंधित करने के लिए बना हुआ है, जिसमें एक्सटेंशन के आइकन का रंग ताज़ा करना शामिल है, इसलिए यह इस बारे में बात करने का एक शानदार समय है कि ब्राउज़र इस तरह के कार्य का प्रबंधन कैसे करता है। आइए इन ब्राउज़र कार्यों के बारे में अपनी वेब परिसंपत्तियों के प्रदर्शन के संदर्भ में सोचते हैं क्योंकि आप इन्हें बनाते हैं।
> "वेबसाइट का प्रदर्शन दो चीजों के बारे में है: पेज कितनी तेजी से लोड होता है, और उस पर कोड कितनी तेजी से चलता है।" -- [जैक ग्रॉसबरत](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
सभी प्रकार की स्थितियों में, सभी प्रकार के उपयोगकर्ताओं के लिए, आपकी वेब साइटों को सभी प्रकार के उपकरणों पर तेज़ी से तेज़ बनाने का विषय, बहुत ही विशाल है। यहां कुछ बिंदुओं को ध्यान में रखा जाता है क्योंकि आप या तो एक मानक वेब परियोजना या एक ब्राउज़र एक्सटेंशन का निर्माण करते हैं।
अपनी साइट को कुशलतापूर्वक चलाने के लिए सबसे पहले आपको यह सुनिश्चित करने की आवश्यकता है कि उसके प्रदर्शन के बारे में डेटा इकट्ठा किया जाए। ऐसा करने का पहला स्थान आपके वेब ब्राउज़र के डेवलपर टूल में है।. एज में, आप "Settings and more" बटन (ब्राउज़र के शीर्ष दाईं ओर तीन डॉट्स आइकन) का चयन कर सकते हैं, फिर More Tools> Developer Tools पर नेविगेट करें और प्रदर्शन टैब खोलें। आप विंडोज पर कीबोर्ड शॉर्टकट `Ctrl` +` शिफ्ट` + `I` या मैक पर डेवलपर विकल्प खोलने के लिए `Option` + `Command` +` I` का भी उपयोग कर सकते हैं।
प्रदर्शन टैब में एक प्रोफ़ाइल उपकरण होता है। एक वेब साइट खोलें (उदाहरण के लिए, https://www.microsoft.com) और 'Record' बटन पर क्लिक करें, फिर साइट को रीफ़्रेश करें। किसी भी समय रिकॉर्डिंग बंद कर दें, और आप साइट को 'स्क्रिप्ट', 'रेंडर' और 'पेंट' से उत्पन्न रूटीन को देख पाएंगे:
✅ किनारे पर प्रदर्शन पैनल पर [Microsoft दस्तावेज़ीकरण](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance?WT.mc_id=academy-13441-cxa) पर जाएँ
सामान्य तौर पर कुछ "समस्या वाले क्षेत्र" होते हैं, जो हर वेब डेवलपर को साइट बनाते समय देखना चाहिए, ताकि उत्पादन में तैनात होने के समय बुरा आश्चर्य न हो।
**DOM ट्रैवर्सल्स**: ब्राउज़र को आपके द्वारा लिखे गए कोड के आधार पर अपने डॉक्यूमेंट ऑब्जेक्ट मॉडल का निर्माण करना होता है, इसलिए यह आपके टैग को कम से कम रखने के लिए अच्छे पेज प्रदर्शन के हित में है, केवल पेज का उपयोग करके और स्टाइल करके। इस बिंदु पर, एक पृष्ठ से जुड़े अतिरिक्त सीएसएस को अनुकूलित किया जा सकता है; उदाहरण के लिए, केवल एक पृष्ठ पर उपयोग की जाने वाली शैलियों को मुख्य शैली पत्रक में शामिल करने की आवश्यकता नहीं है।
**जावास्क्रिप्ट**: Eबहुत ही जावास्क्रिप्ट डेवलपर को 'रेंडर-ब्लॉकिंग' स्क्रिप्ट्स को देखना चाहिए, जिन्हें बाकी डोम से पहले लोड किया जाना चाहिए और उन्हें ब्राउजर में चित्रित किया जा सकता है। अपनी इनलाइन स्क्रिप्ट के साथ `defer` का उपयोग करने पर विचार करें (जैसा कि टेरारियम मॉड्यूल में किया जाता है)।
✅ साइट के प्रदर्शन को निर्धारित करने के लिए की जाने वाली सामान्य जाँचों के बारे में अधिक जानने के लिए [साइट स्पीड टेस्ट वेबसाइट](https://www.webpagetest.org/) पर कुछ साइटों को आज़माएँ।
अब जब आपके पास यह विचार है कि ब्राउज़र आपके द्वारा भेजी जाने वाली संपत्ति को कैसे प्रदान करता है, तो आइए आखिरी कुछ चीजों पर गौर करें जिन्हें आपको अपने विस्तार को पूरा करने के लिए करना है:
`/src/index.js` में कार्य करना,` const` वैरिएबल की श्रृंखला के बाद `calculateColor()` नामक एक फंक्शन जोड़ें, जिससे आप DOM तक पहुँच प्राप्त कर सकते हैं:
यहाँ क्या चल रहा है? आप पिछले पाठ में पूर्ण की गई एपीआई कॉल से एक मूल्य (कार्बन की तीव्रता) में पास होते हैं, और फिर आप गणना करते हैं कि रंगों के सरणी में प्रस्तुत सूचकांक के लिए इसका मूल्य कितना करीब है। फिर आप उस निकटतम रंग मान को क्रोम रनटाइम पर भेजते हैं।
Chrome.runtime में [एपीआई](https://developer.chrome.com/extensions/runtime) है जो सभी प्रकार के पृष्ठभूमि कार्यों को संभालता है, और आपका एक्सटेंशन इसका लाभ उठा रहा है:
> "पृष्ठभूमि पृष्ठ को पुनः प्राप्त करने के लिए chrome.runtime API का उपयोग करें, प्रकट के बारे में विवरण लौटाएं, और ऐप या एक्सटेंशन जीवनचक्र में घटनाओं के लिए सुनें और जवाब दें। आप URL के सापेक्ष पथ को पूरी तरह से योग्य URL में बदलने के लिए भी इस API का उपयोग कर सकते हैं।"
✅ यदि आप एज के लिए इस ब्राउज़र एक्सटेंशन को विकसित कर रहे हैं, तो यह आपको आश्चर्यचकित कर सकता है कि आप क्रोम एपीआई का उपयोग कर रहे हैं। नया एज ब्राउज़र संस्करण क्रोमियम ब्राउज़र इंजन पर चलता है, जिससे आप इन उपकरणों का लाभ उठा सकते हैं।
> ध्यान दें, यदि आप किसी ब्राउज़र एक्सटेंशन को प्रोफाइल करना चाहते हैं, तो एक्सटेंशन के भीतर से dev टूल लॉन्च करें, क्योंकि यह उसका अपना अलग ब्राउज़र उदाहरण है।
इस कोड में, आप बैकएंड टास्क मैनेजर में आने वाले किसी भी संदेश के लिए श्रोता जोड़ रहे हैं। यदि इसे 'अपडेटआईकॉन' कहा जाता है, तो अगला कोड चलाया जाता है, कैनवस एपीआई का उपयोग करके उचित रंग का एक आइकन खींचने के लिए।
आप स्पेस जीएनओ में कैनवस एपीआई के बारे में अधिक जानेंगे, अपने एक्सटेंशन का पुनर्निर्माण करेंगे (`npm run build`), अपने एक्सटेंशन को रीफ्रेश और लॉन्च करें, और रंग परिवर्तन देखें। क्या यह गलत काम चलाने या बर्तन धोने का अच्छा समय है? अब आप जानते हैं!
बधाई हो, आपने एक उपयोगी ब्राउज़र एक्सटेंशन बनाया है और इस बारे में अधिक जानकारी प्राप्त की है कि ब्राउज़र कैसे काम करता है और इसके प्रदर्शन को कैसे प्रोफाइल करता है।
कुछ ओपन सोर्स वेब साइटों की जांच करें जो बहुत पहले से हैं, और, उनके GitHub इतिहास के आधार पर, देखें कि क्या आप यह निर्धारित कर सकते हैं कि प्रदर्शन के लिए वे वर्षों में कैसे अनुकूलित किए गए थे, यदि बिल्कुल। सबसे आम दर्द बिंदु क्या है?
