Chrome 77 में नया

Pete LePage

Chrome 77 का वर्शन अब रोल आउट किया जा रहा है!

नमस्ते, मैं पीट लेपेज हूं. आइए, Chrome 77 में डेवलपर के लिए क्या नया है, इस बारे में जानें!

सबसे बड़ा कॉन्टेंटफ़ुल पेंट

अपनी साइट की असल परफ़ॉर्मेंस को समझना और मेज़र करना मुश्किल हो सकता है. load या DOMContentLoaded जैसी मेट्रिक से यह पता नहीं चलता कि उपयोगकर्ता स्क्रीन पर क्या देख रहा है. फ़र्स्ट पेंट और फ़र्स्ट कॉन्टेंटफ़ुल पेंट, सिर्फ़ उपयोगकर्ता के अनुभव की शुरुआत को कैप्चर करते हैं. फ़र्स्ट मीनिंगफ़ुल पेंट बेहतर है, लेकिन यह मुश्किल है और कभी-कभी गलत भी हो सकता है.

Largest Contentful Paint API, 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 Dev Summit 2019

Chrome Dev Summit 11 और 12 नवंबर को होने वाला है.

यह वेब प्लैटफ़ॉर्म पर आने वाले नए टूल और अपडेट के बारे में जानने का शानदार मौका है. साथ ही, सीधे Chrome की इंजीनियरिंग टीम से सुनने का भी मौका है.

इसे हमारे YouTube चैनल पर लाइव स्ट्रीम किया जाएगा. अगर आपको इसमें व्यक्तिगत तौर पर हिस्सा लेना है, तो Chrome Dev Summit 2019 की वेबसाइट पर जाकर, न्योते का अनुरोध किया जा सकता है.

और भी कई सुविधाएं!

डेवलपर के लिए, Chrome 77 में ये कुछ बदलाव किए गए हैं. हालांकि, इसमें और भी कई बदलाव किए गए हैं.

Contact Picker API, ऑरिजिन ट्रायल के तौर पर उपलब्ध है. यह एक नया और ऑन-डिमांड पिकर है. इसकी मदद से, उपयोगकर्ता अपनी संपर्क सूची से कोई एंट्री या एंट्री चुन सकते हैं. साथ ही, चुने गए संपर्कों की सीमित जानकारी किसी वेबसाइट के साथ शेयर कर सकते हैं.

साथ ही, intl.NumberFormat एपीआई में मेज़रमेंट की नई इकाइयां भी हैं.

इसके बारे में और पढ़ें

इसमें सिर्फ़ कुछ खास हाइलाइट शामिल हैं. Chrome 77 में किए गए अन्य बदलावों के बारे में जानने के लिए, यहां दिए गए लिंक देखें.

सदस्यता लें

अगर आपको हमारे वीडियो के बारे में अप-टू-डेट रहना है, तो Chrome Developers के YouTube चैनल की सदस्यता लें. ऐसा करने पर, जब भी हम कोई नया वीडियो लॉन्च करेंगे, आपको ईमेल से सूचना मिलेगी.

मेरा नाम पीट लेपेज है. Chrome 78 के रिलीज़ होने के बाद, मैं आपको बताऊंगा कि Chrome में नया क्या है!