Lee Stott
2daab5271b
|
3 weeks ago | |
|---|---|---|
| .. | ||
| README.md | 3 weeks ago | |
| assignment.md | 4 weeks ago | |
README.md
ब्राउझर एक्स्टेंशन प्रकल्प भाग 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 पॅनेलवर भेट द्या.
टीप: तुमच्या वेबसाइटच्या स्टार्टअप वेळेचे अचूक वाचन मिळवण्यासाठी, तुमच्या ब्राउझरचा कॅशे क्लिअर करा.
प्रोफाइल टाइमलाइनचे घटक निवडा आणि तुमच्या पृष्ठाच्या लोड होण्याच्या वेळी घडणाऱ्या घटनांवर झूम करा.
प्रोफाइल टाइमलाइनचा एक भाग निवडून आणि सारांश पॅन पाहून तुमच्या पृष्ठाच्या कार्यक्षमतेचा स्नॅपशॉट मिळवा:
Event Log पॅन तपासा आणि कोणतीही घटना 15 ms पेक्षा जास्त वेळ घेत आहे का ते पहा:
✅ तुमचा प्रोफाइलर ओळखा! या साइटवर डेव्हलपर टूल्स उघडा आणि कोणतेही अडथळे आहेत का ते पहा. सर्वात हळू लोड होणारा अॅसेट कोणता आहे? सर्वात वेगवान कोणता आहे?
प्रोफाइलिंग तपासणी
सर्वसाधारणपणे, काही "समस्या क्षेत्रे" आहेत ज्याकडे प्रत्येक वेब डेव्हलपरने साइट तयार करताना लक्ष दिले पाहिजे, जेणेकरून उत्पादनात तैनात करताना अप्रिय आश्चर्य टाळता येईल.
अॅसेट साइजेस: वेब गेल्या काही वर्षांत 'जड' आणि त्यामुळे हळू झाला आहे. यापैकी काही वजन प्रतिमांच्या वापराशी संबंधित आहे.
✅ Internet Archive वर पृष्ठ वजनाचा ऐतिहासिक आढावा आणि अधिक तपासा.
चांगली पद्धत म्हणजे तुमच्या प्रतिमा ऑप्टिमाइझ करणे आणि तुमच्या वापरकर्त्यांसाठी योग्य आकार आणि रिझोल्यूशनमध्ये वितरित करणे.
DOM ट्रॅव्हर्सल्स: ब्राउझरला तुमच्या कोडवर आधारित त्याचा Document Object Model तयार करावा लागतो, त्यामुळे चांगल्या पृष्ठ कार्यक्षमतेसाठी तुमचे टॅग्स कमीत कमी ठेवणे महत्त्वाचे आहे, फक्त पृष्ठाला आवश्यक असलेले वापरणे आणि स्टाईल करणे. याच मुद्द्यावर, पृष्ठाशी संबंधित जास्त CSS ऑप्टिमाइझ केले जाऊ शकते; ज्या शैली फक्त एका पृष्ठावर वापरल्या जाणार आहेत त्या मुख्य स्टाईल शीटमध्ये समाविष्ट करण्याची गरज नाही, उदाहरणार्थ.
JavaScript: प्रत्येक JavaScript डेव्हलपरने 'रेंडर-ब्लॉकिंग' स्क्रिप्ट्ससाठी लक्ष ठेवले पाहिजे, ज्या DOM ट्रॅव्हर्स आणि ब्राउझरवर पेंट होण्यापूर्वी लोड करणे आवश्यक आहे. तुमच्या इनलाइन स्क्रिप्ट्ससह defer वापरण्याचा विचार करा (जसे की Terrarium मॉड्यूलमध्ये केले आहे).
✅ Site Speed Test वेबसाइट वर काही साइट्स वापरून पहा आणि साइट कार्यक्षमता निश्चित करण्यासाठी केलेल्या सामान्य तपासण्यांबद्दल अधिक जाणून घ्या.
आता तुम्हाला ब्राउझरला तुम्ही पाठवलेल्या अॅसेट्स कसे रेंडर करायचे याची कल्पना आली आहे, चला तुमचे एक्स्टेंशन पूर्ण करण्यासाठी आवश्यक असलेल्या शेवटच्या काही गोष्टी पाहूया:
रंग काढण्यासाठी फंक्शन तयार करा
/src/index.js मध्ये, DOM वर प्रवेश मिळवण्यासाठी सेट केलेल्या const व्हेरिएबल्सच्या मालिकेनंतर calculateColor() नावाचे फंक्शन जोडा:
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 कडे पाठवता.
chrome.runtime कडे API आहे जो सर्व प्रकारच्या बॅकग्राउंड टास्क्स हाताळतो, आणि तुमचे एक्स्टेंशन त्याचा फायदा घेत आहे:
"chrome.runtime API चा वापर बॅकग्राउंड पृष्ठ पुनर्प्राप्त करण्यासाठी, मॅनिफेस्टबद्दल तपशील परत करण्यासाठी, आणि अॅप किंवा एक्स्टेंशन लाइफसायकलमधील घटनांसाठी ऐकण्यासाठी आणि प्रतिसाद देण्यासाठी करा. तुम्ही या API चा वापर URL च्या सापेक्ष मार्गांना पूर्णपणे पात्र URL मध्ये रूपांतरित करण्यासाठी देखील करू शकता."
✅ जर तुम्ही हे ब्राउझर एक्स्टेंशन Edge साठी विकसित करत असाल, तर तुम्हाला कदाचित आश्चर्य वाटेल की तुम्ही chrome API वापरत आहात. नवीन Edge ब्राउझर आवृत्त्या Chromium ब्राउझर इंजिनवर चालतात, त्यामुळे तुम्ही या साधनांचा फायदा घेऊ शकता.
टीप, जर तुम्हाला ब्राउझर एक्स्टेंशन प्रोफाइल करायचे असेल, तर एक्स्टेंशनच्या आतून डेव्हलपर टूल्स लाँच करा, कारण ते स्वतःचे स्वतंत्र ब्राउझर उदाहरण आहे.
डिफॉल्ट आयकॉन रंग सेट करा
आता, init() फंक्शनमध्ये, chrome च्या 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 वापरून चालवला जातो.
✅ तुम्ही Space Game धड्यांमध्ये Canvas API बद्दल अधिक शिकाल.
आता, तुमचे एक्स्टेंशन पुन्हा तयार करा (npm run build), रीफ्रेश करा आणि तुमचे एक्स्टेंशन लाँच करा, आणि रंग बदलताना पहा. एखाद्या कामासाठी बाहेर जाण्याची किंवा भांडी धुण्याची ही चांगली वेळ आहे का? आता तुम्हाला कळेल!
अभिनंदन, तुम्ही एक उपयुक्त ब्राउझर एक्स्टेंशन तयार केले आहे आणि ब्राउझर कसे कार्य करते आणि त्याच्या कार्यक्षमतेचे प्रोफाइल कसे करायचे हे अधिक शिकले आहे.
🚀 आव्हान
काही ओपन सोर्स वेबसाइट्स तपासा ज्या खूप पूर्वीपासून अस्तित्वात आहेत, आणि त्यांच्या GitHub इतिहासाच्या आधारे, त्या कार्यक्षमतेसाठी कशा ऑप्टिमाइझ केल्या गेल्या हे ठरवण्याचा प्रयत्न करा, जर केल्या असतील तर. सर्वात सामान्य समस्या क्षेत्र कोणते आहे?
व्याख्यानानंतरची प्रश्नमंजुषा
पुनरावलोकन आणि स्व-अभ्यास
परफॉर्मन्स न्यूजलेटर साठी साइन अप करण्याचा विचार करा.
ब्राउझर वेब कार्यक्षमता कशी मोजतात याबद्दल जाणून घेण्यासाठी त्यांच्या वेब टूल्समधील कार्यक्षमता टॅब्स तपासा. तुम्हाला कोणते मोठे फरक आढळतात का?
असाइनमेंट
साइटचे कार्यक्षमतेसाठी विश्लेषण करा
अस्वीकरण:
हा दस्तऐवज AI भाषांतर सेवा Co-op Translator वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी कृपया लक्षात ठेवा की स्वयंचलित भाषांतरांमध्ये त्रुटी किंवा अचूकतेचा अभाव असू शकतो. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून उद्भवलेल्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही.