Chrome 77 अब रोल आउट हो रहा है!
- सबसे बड़े कॉन्टेंटफ़ुल पेंट की मदद से, अपनी साइट की परफ़ॉर्मेंस को ट्रैक करने का एक बेहतर तरीका है.
- Forms में कुछ नई सुविधाएं जोड़ी गई हैं.
- नेटिव लेज़ी लोडिंग यहां है.
- Chrome DevSummit 2019, 11 से 12 नवंबर, 2019 के बीच हो रहा है.
- और बहुत से अन्य.
मेरा नाम पीट लीपेज है. चलिए, देखते हैं कि Chrome 77 में डेवलपर के लिए नया क्या है!
सबसे बड़ा कॉन्टेंटफ़ुल पेंट
असल दुनिया में अपनी साइट की परफ़ॉर्मेंस को समझना और उसे मेज़र करना मुश्किल हो सकता है.
load या DOMContentLoaded जैसी मेट्रिक से यह पता नहीं चलता कि उपयोगकर्ता स्क्रीन पर क्या देख रहा है. फ़र्स्ट पेंट और पहला कॉन्टेंटफ़ुल पेंट, अनुभव की शुरुआत को ही कैप्चर करते हैं. पहला सार्थक पेंट बेहतर है, लेकिन
यह जटिल और कभी-कभी गलत होता है.
सबसे बड़ा कॉन्टेंटफ़ुल पेंट एपीआई, Chrome 77 में उपलब्ध है. यह व्यूपोर्ट में दिखने वाले सबसे बड़े कॉन्टेंट एलिमेंट के रेंडर होने में लगने वाले समय की रिपोर्ट करता है. साथ ही, इससे यह मेज़र किया जा सकता है कि पेज का मुख्य कॉन्टेंट कब लोड हुआ.
सबसे बड़े कॉन्टेंटफ़ुल पेंट को मापने के लिए, आपको परफ़ॉर्मेंस ऑब्ज़र्वर का इस्तेमाल करना होगा और largest-contentful-paint इवेंट खोजना होगा.
let lcp;
const po = new PerformanceObserver((eList) => {
const e = eList.getEntries();
const last = e[e.length - 1];
lcp = last.renderTime || last.loadTime;
});
const poOpts = {
type: 'largest-contentful-paint',
buffered: true
}
po.observe(poOpts);
पेज अक्सर अलग-अलग चरणों में लोड होता है. इसलिए, हो सकता है कि पेज का सबसे बड़ा एलिमेंट बदल जाए. इसलिए, आंकड़ों की जानकारी देने वाली सेवा को सिर्फ़ आखिरी largest-contentful-paint इवेंट की रिपोर्ट करें.
addEventListener('visibilitychange', function fn() {
const visState = document.visibilityState;
if (lcp && visState === 'hidden') {
sendToAnalytics({'lcp': lcp});
removeEventListener('visibilitychange', fn, true);
}
}, true);
फ़िल ने web.dev पर सबसे बड़े कॉन्टेंटफ़ुल पेंट के बारे में एक बेहतरीन पोस्ट की है.
नए फ़ॉर्म की सुविधाएं
कई डेवलपर कस्टम फ़ॉर्म कंट्रोल बनाते हैं, ताकि मौजूदा एलिमेंट के लुक और स्टाइल को पसंद के मुताबिक बनाया जा सके. इसके अलावा, ऐसे नए कंट्रोल बनाए जा सकते हैं जो ब्राउज़र में पहले से मौजूद नहीं हैं. आम तौर पर, इसमें JavaScript और छिपे हुए <input> एलिमेंट का इस्तेमाल करना शामिल होता है. हालांकि, यह पूरी तरह से सटीक समाधान नहीं है.
वेब की दो नई सुविधाएं, Chrome 77 में जोड़ी गई हैं. इनसे कस्टम फ़ॉर्म कंट्रोल बनाने और मौजूदा सीमाओं को हटाने में मदद मिलती है.
formdata इवेंट
formdata इवेंट एक लो-लेवल एपीआई है, जो किसी भी JavaScript कोड को फ़ॉर्म सबमिशन में हिस्सा लेने देता है. इसका इस्तेमाल करने के लिए, उस फ़ॉर्म में formdata इवेंट लिसनर जोड़ें जिससे आपको इंटरैक्ट करना है.
const form = document.querySelector('form');
form.addEventListener('formdata', ({formData}) => {
formData.append('my-input', myInputValue);
});
जब लोग 'सबमिट करें' बटन पर क्लिक करते हैं, तब फ़ॉर्म formdata इवेंट फ़ायर करता है.
इसमें FormData ऑब्जेक्ट शामिल होता है, जिसमें सबमिट किया गया पूरा डेटा होता है.
इसके बाद, formdata इवेंट हैंडलर में सबमिट किए जाने से पहले, formdata को अपडेट किया जा सकता है या उसमें बदलाव किया जा सकता है.
फ़ॉर्म से जुड़े कस्टम एलिमेंट
फ़ॉर्म से जुड़े कस्टम एलिमेंट, कस्टम एलिमेंट और नेटिव कंट्रोल के बीच के अंतर को कम करने में मदद करते हैं. स्टैटिक formAssociated प्रॉपर्टी जोड़ने से, ब्राउज़र कस्टम एलिमेंट को दूसरे सभी फ़ॉर्म एलिमेंट की तरह ही इस्तेमाल करता है. नेटिव कंट्रोल के साथ एक जैसा अनुभव देने के लिए, आपको name, value, और validity जैसे इनपुट एलिमेंट पर मिलने वाली सामान्य प्रॉपर्टी भी जोड़नी चाहिए.
class MyCounter extends HTMLElement {
static formAssociated = true;
constructor() {
super();
this._internals = this.attachInternals();
this._value = 0;
}
...
}
पूरी जानकारी के लिए web.dev पर, बेहतर फ़ॉर्म कंट्रोल देखें!
नेटिव लेज़ी लोडिंग
मुझे ठीक से नहीं पता कि मैं अपने पिछले वीडियो में नेटिव लेज़ी लोडिंग से कैसे चूक गया! यह बहुत ही अद्भुत है, इसलिए मैं इसे अब शामिल कर रही हूं. लेज़ी लोडिंग एक ऐसी तकनीक है जिसकी मदद से, ऑफ़-स्क्रीन <img> या <iframe> जैसे गै़र-ज़रूरी संसाधनों को तब तक लोड होने से रोका जा सकता है, जब तक कि उनकी ज़रूरत न हो. इससे आपके पेज की परफ़ॉर्मेंस बेहतर होती है.
Chrome 76 से, ब्राउज़र लेज़ी लोडिंग को हैंडल करता है. इसके लिए, कस्टम लेज़ी लोडिंग कोड लिखने या अलग JavaScript लाइब्रेरी का इस्तेमाल करने की ज़रूरत नहीं होती.
ब्राउज़र को यह बताने के लिए कि आपको कोई इमेज चाहिए या iframe लेज़ी लोडिंग है,
loading="lazy" एट्रिब्यूट का इस्तेमाल करें. "फ़ोल्ड के ऊपर" वाली इमेज और iframe सामान्य रूप से लोड होते हैं. साथ ही, नीचे दिए गए लेबल सिर्फ़ तब फ़ेच किए जाते हैं, जब उपयोगकर्ता
उनके आस-पास स्क्रोल करता है.
<img src="image.jpg" loading="lazy" width="400" height="250" alt="...">
ज़्यादा जानकारी के लिए, web.dev पर वेब के लिए, ब्राउज़र लेवल की लेज़ी-लोडिंग की सुविधा देखें.
Chrome डेवलपर समिट 2019
Chrome डेवलपर समिट 11 और 12 नवंबर को होने वाला है.
यह वेब प्लैटफ़ॉर्म पर आने वाले नए टूल और अपडेट के बारे में जानने और Chrome की इंजीनियरिंग टीम की सीधे तौर पर बात करने का एक शानदार मौका है.
इसे हमारे YouTube चैनल पर लाइव स्ट्रीम किया जाएगा. इसके अलावा, Chrome Dev Summit 2019 की वेबसाइट पर जाकर, न्योते के लिए अनुरोध किया जा सकता है.
और ज़्यादा!
डेवलपर के लिए, Chrome 77 में कुछ ही बदलाव किए गए हैं, बेशक, और भी बहुत कुछ है.
Contact पिकर API, ऑरिजिन ट्रायल के तौर पर उपलब्ध एक नया टूल है. यह मांग पर उपलब्ध पिकर है. इसकी मदद से, उपयोगकर्ता अपनी संपर्क सूची से एंट्री या एंट्री चुन सकते हैं और चुने गए संपर्कों की सीमित जानकारी वेबसाइट के साथ शेयर कर सकते हैं.
इसके अलावा, intl.NumberFormat एपीआई में नई मेज़रमेंट इकाइयां मौजूद हैं.
इसके बारे में और पढ़ें
इसमें सिर्फ़ कुछ खास बातों के बारे में बताया गया है. Chrome 77 में और बदलावों के बारे में जानने के लिए, नीचे दिए गए लिंक देखें.
- Chrome DevTools (77) में नया क्या है
- Chrome 77 का इस्तेमाल बंद होने और हटाने से जुड़ी जानकारी
- Chrome 77 के लिए ChromeStatus.com से जुड़े अपडेट
- Chrome 77 में JavaScript में नया क्या है
- Chromium सोर्स का डेटा स्टोर करने की जगह में बदलाव की सूची
सदस्यता लें
हमारे वीडियो के बारे में अप-टू-डेट रहना चाहते हैं, तो हमारे Chrome डेवलपर YouTube चैनल की सदस्यता लें. जब भी हम कोई नया वीडियो लॉन्च करेंगे, तब आपको ईमेल से सूचना मिलेगी.
मैं हूं पीट लेपेज और Chrome 78 के रिलीज़ होते ही, मैं आपको बताऊंगी -- Chrome में नया क्या है!