You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
162 lines
19 KiB
162 lines
19 KiB
# ब्राउज़र एक्सटेंशन प्रोजेक्ट पार्ट 3: पृष्ठभूमि कार्य और प्रदर्शन के बारे में जानें
|
|
|
|
## पूर्व व्याख्यान प्रश्नोत्तरी
|
|
|
|
[पूर्व व्याख्यान प्रश्नोत्तरी](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/27?loc=hi)
|
|
|
|
### परिचय
|
|
|
|
इस मॉड्यूल के अंतिम दो पाठों में, आपने सीखा कि एपीआई से प्राप्त डेटा के लिए एक फॉर्म और डिस्प्ले क्षेत्र कैसे बनाया जाए। यह वेब पर वेब उपस्थिति बनाने का एक बहुत ही मानक तरीका है। आपने यह भी सीखा कि कैसे डेटा को असंगत रूप से संभालना है। आपका ब्राउज़र एक्सटेंशन लगभग पूरा हो चुका है।
|
|
|
|
यह कुछ पृष्ठभूमि कार्यों को प्रबंधित करने के लिए बना हुआ है, जिसमें एक्सटेंशन के आइकन का रंग ताज़ा करना शामिल है, इसलिए यह इस बारे में बात करने का एक शानदार समय है कि ब्राउज़र इस तरह के कार्य का प्रबंधन कैसे करता है। आइए इन ब्राउज़र कार्यों के बारे में अपनी वेब परिसंपत्तियों के प्रदर्शन के संदर्भ में सोचते हैं क्योंकि आप इन्हें बनाते हैं।
|
|
|
|
## वेब प्रदर्शन मूल बातें
|
|
|
|
> "वेबसाइट का प्रदर्शन दो चीजों के बारे में है: पेज कितनी तेजी से लोड होता है, और उस पर कोड कितनी तेजी से चलता है।" -- [जैक ग्रॉसबरत](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) पर जाएँ
|
|
|
|
> युक्ति: अपनी वेब साइट के स्टार्टअप समय का सही पठन करने के लिए, अपने ब्राउज़र का कैश साफ़ करें
|
|
|
|
आपके पृष्ठ लोड होने पर होने वाली घटनाओं को ज़ूम करने के लिए प्रोफ़ाइल समयरेखा के तत्वों का चयन करें।
|
|
|
|
प्रोफ़ाइल टाइमलाइन के एक भाग का चयन करके और सारांश फलक को देखकर अपने पृष्ठ के प्रदर्शन का एक स्नैपशॉट प्राप्त करें:
|
|
|
|
|
|
|
|
यह देखने के लिए कि क्या कोई घटना 15 ms से अधिक समय की नहीं है, इवेंट लॉग फलक की जाँच करें:
|
|
|
|
|
|
|
|
✅ अपने प्रोफाइलर को जाने! इस साइट पर डेवलपर टूल खोलें और देखें कि क्या कोई अड़चन है। सबसे धीमी गति से लोड होने वाली ऐसेट क्या है? सबसे तेज?
|
|
|
|
## प्रोफाइल की जाँच
|
|
|
|
सामान्य तौर पर कुछ "समस्या वाले क्षेत्र" होते हैं, जो हर वेब डेवलपर को साइट बनाते समय देखना चाहिए, ताकि उत्पादन में तैनात होने के समय बुरा आश्चर्य न हो।
|
|
|
|
**एसेट आकार**: पिछले कुछ वर्षों में वेब 'भारी' हो गया है, और इस तरह धीमा है। इस वजन का कुछ छवियों के उपयोग के साथ क्या करना है।
|
|
|
|
✅ पृष्ठ भार और अधिक के ऐतिहासिक दृश्य के लिए [इंटरनेट आर्काइव](https://httparchive.org/reports/page-weight) देखें।
|
|
|
|
एक अच्छा अभ्यास यह सुनिश्चित करना है कि आपकी छवियों को अनुकूलित किया जाए, आपके उपयोगकर्ताओं के लिए सही आकार और रिज़ॉल्यूशन पर वितरित किया जाए।
|
|
|
|
**DOM ट्रैवर्सल्स**: ब्राउज़र को आपके द्वारा लिखे गए कोड के आधार पर अपने डॉक्यूमेंट ऑब्जेक्ट मॉडल का निर्माण करना होता है, इसलिए यह आपके टैग को कम से कम रखने के लिए अच्छे पेज प्रदर्शन के हित में है, केवल पेज का उपयोग करके और स्टाइल करके। इस बिंदु पर, एक पृष्ठ से जुड़े अतिरिक्त सीएसएस को अनुकूलित किया जा सकता है; उदाहरण के लिए, केवल एक पृष्ठ पर उपयोग की जाने वाली शैलियों को मुख्य शैली पत्रक में शामिल करने की आवश्यकता नहीं है।
|
|
|
|
**जावास्क्रिप्ट**: Eबहुत ही जावास्क्रिप्ट डेवलपर को 'रेंडर-ब्लॉकिंग' स्क्रिप्ट्स को देखना चाहिए, जिन्हें बाकी डोम से पहले लोड किया जाना चाहिए और उन्हें ब्राउजर में चित्रित किया जा सकता है। अपनी इनलाइन स्क्रिप्ट के साथ `defer` का उपयोग करने पर विचार करें (जैसा कि टेरारियम मॉड्यूल में किया जाता है)।
|
|
|
|
✅ साइट के प्रदर्शन को निर्धारित करने के लिए की जाने वाली सामान्य जाँचों के बारे में अधिक जानने के लिए [साइट स्पीड टेस्ट वेबसाइट](https://www.webpagetest.org/) पर कुछ साइटों को आज़माएँ।
|
|
|
|
अब जब आपके पास यह विचार है कि ब्राउज़र आपके द्वारा भेजी जाने वाली संपत्ति को कैसे प्रदान करता है, तो आइए आखिरी कुछ चीजों पर गौर करें जिन्हें आपको अपने विस्तार को पूरा करने के लिए करना है:
|
|
|
|
### रंग की गणना करने के लिए एक फ़ंक्शन बनाएं
|
|
|
|
`/src/index.js` में कार्य करना,` const` वैरिएबल की श्रृंखला के बाद `calculateColor()` नामक एक फंक्शन जोड़ें, जिससे आप DOM तक पहुँच प्राप्त कर सकते हैं:
|
|
|
|
```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 } });
|
|
}
|
|
```
|
|
|
|
यहाँ क्या चल रहा है? आप पिछले पाठ में पूर्ण की गई एपीआई कॉल से एक मूल्य (कार्बन की तीव्रता) में पास होते हैं, और फिर आप गणना करते हैं कि रंगों के सरणी में प्रस्तुत सूचकांक के लिए इसका मूल्य कितना करीब है। फिर आप उस निकटतम रंग मान को क्रोम रनटाइम पर भेजते हैं।
|
|
|
|
Chrome.runtime में [एपीआई](https://developer.chrome.com/extensions/runtime) है जो सभी प्रकार के पृष्ठभूमि कार्यों को संभालता है, और आपका एक्सटेंशन इसका लाभ उठा रहा है:
|
|
|
|
> "पृष्ठभूमि पृष्ठ को पुनः प्राप्त करने के लिए chrome.runtime API का उपयोग करें, प्रकट के बारे में विवरण लौटाएं, और ऐप या एक्सटेंशन जीवनचक्र में घटनाओं के लिए सुनें और जवाब दें। आप URL के सापेक्ष पथ को पूरी तरह से योग्य URL में बदलने के लिए भी इस API का उपयोग कर सकते हैं।"
|
|
|
|
✅ यदि आप एज के लिए इस ब्राउज़र एक्सटेंशन को विकसित कर रहे हैं, तो यह आपको आश्चर्यचकित कर सकता है कि आप क्रोम एपीआई का उपयोग कर रहे हैं। नया एज ब्राउज़र संस्करण क्रोमियम ब्राउज़र इंजन पर चलता है, जिससे आप इन उपकरणों का लाभ उठा सकते हैं।
|
|
|
|
> ध्यान दें, यदि आप किसी ब्राउज़र एक्सटेंशन को प्रोफाइल करना चाहते हैं, तो एक्सटेंशन के भीतर से dev टूल लॉन्च करें, क्योंकि यह उसका अपना अलग ब्राउज़र उदाहरण है।
|
|
|
|
### एक डिफ़ॉल्ट आइकन रंग सेट करें
|
|
|
|
अब, `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);
|
|
}
|
|
```
|
|
इस कोड में, आप बैकएंड टास्क मैनेजर में आने वाले किसी भी संदेश के लिए श्रोता जोड़ रहे हैं। यदि इसे 'अपडेटआईकॉन' कहा जाता है, तो अगला कोड चलाया जाता है, कैनवस एपीआई का उपयोग करके उचित रंग का एक आइकन खींचने के लिए।
|
|
|
|
✅ आप [अंतरिक्ष खेल के पाठों](../../../6-space-game/2-drawing-to-canvas/translations/README.hi.md) में कैनवस एपीआई के बारे में अधिक जानेंगे
|
|
|
|
आप स्पेस जीएनओ में कैनवस एपीआई के बारे में अधिक जानेंगे, अपने एक्सटेंशन का पुनर्निर्माण करेंगे (`npm run build`), अपने एक्सटेंशन को रीफ्रेश और लॉन्च करें, और रंग परिवर्तन देखें। क्या यह गलत काम चलाने या बर्तन धोने का अच्छा समय है? अब आप जानते हैं!
|
|
|
|
बधाई हो, आपने एक उपयोगी ब्राउज़र एक्सटेंशन बनाया है और इस बारे में अधिक जानकारी प्राप्त की है कि ब्राउज़र कैसे काम करता है और इसके प्रदर्शन को कैसे प्रोफाइल करता है।
|
|
|
|
---
|
|
|
|
## 🚀 चुनौती
|
|
|
|
कुछ ओपन सोर्स वेब साइटों की जांच करें जो बहुत पहले से हैं, और, उनके GitHub इतिहास के आधार पर, देखें कि क्या आप यह निर्धारित कर सकते हैं कि प्रदर्शन के लिए वे वर्षों में कैसे अनुकूलित किए गए थे, यदि बिल्कुल। सबसे आम दर्द बिंदु क्या है?
|
|
|
|
## व्याख्यान उपरांत प्रश्नोत्तरी
|
|
|
|
[व्याख्यान उपरांत प्रश्नोत्तरी](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/28?loc=hi)
|
|
|
|
## समीक्षा और स्व अध्ययन
|
|
|
|
[प्रदर्शन न्यूज़लेटर](https://perf.email/) के लिए साइन अप करने पर विचार करें
|
|
|
|
कुछ ऐसे तरीकों की जाँच करें जो ब्राउज़र अपने वेब टूल में प्रदर्शन टैब के माध्यम से वेब प्रदर्शन को गेज करते हैं। क्या आपको कोई बड़ा अंतर लगता है?
|
|
|
|
## असाइनमेंट
|
|
|
|
[प्रदर्शन के लिए एक साइट का विश्लेषण करें](assignment.hi.md)
|
|
|