20 KiB
ब्राउज़र एक्सटेंशन प्रोजेक्ट भाग 3: बैकग्राउंड टास्क और परफॉर्मेंस के बारे में जानें
प्री-लेक्चर क्विज़
परिचय
इस मॉड्यूल के पिछले दो पाठों में, आपने एक फॉर्म और डेटा को प्रदर्शित करने के लिए एक क्षेत्र बनाना सीखा, जिसे API से प्राप्त किया गया था। यह वेब पर एक वेब उपस्थिति बनाने का एक बहुत ही सामान्य तरीका है। आपने डेटा को असिंक्रोनस रूप से प्राप्त करने का प्रबंधन करना भी सीखा। आपका ब्राउज़र एक्सटेंशन लगभग पूरा हो चुका है।
अब बैकग्राउंड टास्क को प्रबंधित करना बाकी है, जिसमें एक्सटेंशन के आइकन का रंग रिफ्रेश करना शामिल है। यह एक अच्छा समय है यह समझने का कि ब्राउज़र इस प्रकार के कार्यों को कैसे प्रबंधित करता है। आइए इन ब्राउज़र कार्यों को आपके वेब एसेट्स के प्रदर्शन के संदर्भ में समझें जब आप उन्हें बनाते हैं।
वेब परफॉर्मेंस के मूल सिद्धांत
"वेबसाइट परफॉर्मेंस दो चीज़ों के बारे में है: पेज कितनी जल्दी लोड होता है, और उस पर कोड कितनी जल्दी चलता है।" -- ज़ैक ग्रॉसबार्ट
आपकी वेबसाइट को सभी प्रकार के डिवाइसों, उपयोगकर्ताओं और परिस्थितियों में तेज़ बनाने के विषय पर चर्चा करना स्वाभाविक रूप से बहुत व्यापक है। यहां कुछ बिंदु दिए गए हैं जिन्हें आपको एक सामान्य वेब प्रोजेक्ट या ब्राउज़र एक्सटेंशन बनाते समय ध्यान में रखना चाहिए।
सबसे पहली चीज़ जो आपको यह सुनिश्चित करने के लिए करनी चाहिए कि आपकी साइट कुशलता से चल रही है, वह है इसके प्रदर्शन के बारे में डेटा एकत्र करना। इसका पहला स्थान आपके वेब ब्राउज़र के डेवलपर टूल्स में है। Edge में, आप "सेटिंग्स और अधिक" बटन (ब्राउज़र के शीर्ष दाएं कोने में तीन डॉट्स आइकन) का चयन कर सकते हैं, फिर More Tools > Developer Tools पर नेविगेट करें और Performance टैब खोलें। आप Windows पर Ctrl + Shift + I या Mac पर Option + Command + I कीबोर्ड शॉर्टकट का उपयोग करके भी डेवलपर टूल्स खोल सकते हैं।
Performance टैब में एक प्रोफाइलिंग टूल होता है। एक वेबसाइट खोलें (उदाहरण के लिए, https://www.microsoft.com) और 'Record' बटन पर क्लिक करें, फिर साइट को रिफ्रेश करें। किसी भी समय रिकॉर्डिंग रोकें, और आप उन रूटीन को देख पाएंगे जो साइट को 'स्क्रिप्ट', 'रेंडर', और 'पेंट' करने के लिए उत्पन्न होते हैं:
✅ Microsoft डाक्यूमेंटेशन पर Edge के Performance पैनल के बारे में जानें।
टिप: अपनी वेबसाइट के स्टार्टअप समय का सटीक रीडिंग प्राप्त करने के लिए, अपने ब्राउज़र का कैश साफ़ करें।
प्रोफाइल टाइमलाइन के तत्वों का चयन करें ताकि आप उन घटनाओं को ज़ूम कर सकें जो आपके पेज लोड होने के दौरान होती हैं।
प्रोफाइल टाइमलाइन के एक हिस्से का चयन करके और सारांश पैन को देखकर अपने पेज के प्रदर्शन का स्नैपशॉट प्राप्त करें:
इवेंट लॉग पैन की जांच करें कि क्या कोई इवेंट 15 मिलीसेकंड से अधिक समय ले रहा है:
✅ अपने प्रोफाइलर को जानें! इस साइट पर डेवलपर टूल्स खोलें और देखें कि क्या कोई बाधा है। सबसे धीमी लोडिंग एसेट कौन सा है? सबसे तेज़ कौन सा है?
प्रोफाइलिंग चेक्स
सामान्य तौर पर, कुछ "समस्या क्षेत्र" होते हैं जिन पर हर वेब डेवलपर को साइट बनाते समय ध्यान देना चाहिए ताकि प्रोडक्शन में तैनाती के समय अप्रिय आश्चर्य से बचा जा सके।
एसेट साइज़: पिछले कुछ वर्षों में वेब 'भारी' और इस प्रकार धीमा हो गया है। इस वजन का कुछ हिस्सा छवियों के उपयोग से संबंधित है।
✅ इंटरनेट आर्काइव पर पेज वेट का ऐतिहासिक दृश्य और अधिक जानकारी देखें।
एक अच्छा अभ्यास यह सुनिश्चित करना है कि आपकी छवियां अनुकूलित हैं और आपके उपयोगकर्ताओं के लिए सही आकार और रिज़ॉल्यूशन में वितरित की गई हैं।
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 कॉल से प्राप्त किया था, और फिर आप इसकी वैल्यू को रंगों की सूची में प्रस्तुत इंडेक्स के करीब गणना करते हैं। फिर आप उस निकटतम रंग मान को क्रोम रनटाइम पर भेजते हैं।
chrome.runtime में एक API है जो सभी प्रकार के बैकग्राउंड टास्क को संभालता है, और आपका एक्सटेंशन इसका लाभ उठा रहा है:
"chrome.runtime API का उपयोग बैकग्राउंड पेज को पुनः प्राप्त करने, मैनिफेस्ट के बारे में विवरण लौटाने, और ऐप या एक्सटेंशन लाइफसाइकल में घटनाओं के लिए सुनने और प्रतिक्रिया देने के लिए करें। आप इस API का उपयोग URL के सापेक्ष पथ को पूर्ण-योग्य URL में बदलने के लिए भी कर सकते हैं।"
✅ यदि आप इस ब्राउज़र एक्सटेंशन को Edge के लिए विकसित कर रहे हैं, तो यह आपको आश्चर्यचकित कर सकता है कि आप एक क्रोम API का उपयोग कर रहे हैं। नए Edge ब्राउज़र संस्करण क्रोमियम ब्राउज़र इंजन पर चलते हैं, इसलिए आप इन टूल्स का लाभ उठा सकते हैं।
ध्यान दें, यदि आप किसी ब्राउज़र एक्सटेंशन को प्रोफाइल करना चाहते हैं, तो इसे एक्सटेंशन के भीतर से लॉन्च करें, क्योंकि यह अपना अलग ब्राउज़र इंस्टेंस है।
डिफ़ॉल्ट आइकन रंग सेट करें
अब, 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.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' कहा जाता है, तो अगला कोड सही रंग का आइकन बनाने के लिए Canvas API का उपयोग करता है।
✅ आप स्पेस गेम पाठों में Canvas API के बारे में और जानेंगे।
अब, अपने एक्सटेंशन को फिर से बनाएं (npm run build), रिफ्रेश करें और अपना एक्सटेंशन लॉन्च करें, और रंग बदलते हुए देखें। क्या यह कोई काम करने या बर्तन धोने का अच्छा समय है? अब आप जानते हैं!
बधाई हो, आपने एक उपयोगी ब्राउज़र एक्सटेंशन बनाया है और यह भी सीखा है कि ब्राउज़र कैसे काम करता है और इसकी परफॉर्मेंस को कैसे प्रोफाइल किया जाता है।
🚀 चुनौती
कुछ ओपन सोर्स वेबसाइटों की जांच करें जो लंबे समय से मौजूद हैं, और उनके GitHub इतिहास के आधार पर देखें कि क्या उन्हें प्रदर्शन के लिए अनुकूलित किया गया था। सबसे आम समस्या क्षेत्र क्या है?
पोस्ट-लेक्चर क्विज़
समीक्षा और स्व-अध्ययन
परफॉर्मेंस न्यूज़लेटर के लिए साइन अप करने पर विचार करें।
ब्राउज़र वेब परफॉर्मेंस को मापने के लिए किन तरीकों का उपयोग करते हैं, यह जानने के लिए उनके वेब टूल्स के परफॉर्मेंस टैब्स की जांच करें। क्या आपको कोई बड़ा अंतर दिखाई देता है?
असाइनमेंट
साइट का प्रदर्शन विश्लेषण करें
अस्वीकरण:
यह दस्तावेज़ AI अनुवाद सेवा Co-op Translator का उपयोग करके अनुवादित किया गया है। जबकि हम सटीकता के लिए प्रयासरत हैं, कृपया ध्यान दें कि स्वचालित अनुवाद में त्रुटियां या अशुद्धियां हो सकती हैं। मूल भाषा में उपलब्ध मूल दस्तावेज़ को प्रामाणिक स्रोत माना जाना चाहिए। महत्वपूर्ण जानकारी के लिए, पेशेवर मानव अनुवाद की सिफारिश की जाती है। इस अनुवाद के उपयोग से उत्पन्न किसी भी गलतफहमी या गलत व्याख्या के लिए हम उत्तरदायी नहीं हैं।