इस पेज का अनुवाद Cloud Translation API से किया गया है.

Chrome 83 में नया

Pete LePage

Chrome 83 अब ठीक से काम करने के लिए लॉन्च किया जा रहा है.

यहां आपके जानने योग्य तथ्य दिए गए हैं:

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

नमस्ते, पीट लेपेज बोल रहा हूं. फ़िलहाल, मैं घर से काम और शूटिंग कर रहा हूं. आइए, Chrome 83 में डेवलपर के लिए क्या नया है, इस बारे में जानें!

भरोसेमंद टाइप

डीओएम पर आधारित क्रॉस-साइट स्क्रिप्टिंग, वेब पर सुरक्षा से जुड़ी सबसे सामान्य कमजोरियों में से एक है. गलती से किसी को आपके पेज पर शामिल करना आसान हो सकता है. भरोसेमंद टाइप, इस तरह की कमजोरियों को रोकने में मदद कर सकते हैं. ऐसा इसलिए, क्योंकि इनकी मदद से डेटा को संभावित तौर पर खतरनाक फ़ंक्शन में भेजने से पहले, उसे प्रोसेस करना ज़रूरी होता है.

उदाहरण के लिए, innerHTML को लें. भरोसेमंद टाइप चालू होने पर, अगर कोई स्ट्रिंग पास करने की कोशिश की जाती है, तो TypeError की वजह से वह काम नहीं करेगी. ऐसा इसलिए होता है, क्योंकि ब्राउज़र को नहीं पता कि वह स्ट्रिंग पर भरोसा कर सकता है या नहीं.

// Trusted types turned on
const elem = document.getElementById('myDiv');
elem.innerHTML = `Hello, world!`;
// Will throw a TypeError

इसके बजाय, मुझे textContent जैसे किसी सुरक्षित फ़ंक्शन का इस्तेमाल करना होगा, किसी भरोसेमंद टाइप को पास करना होगा या एलिमेंट बनाकर appendChild() का इस्तेमाल करना होगा.

// Use a safe function
elem.textContent = ''; // OK

// Pass in a trusted type
import DOMPurify from 'dompurify';
const str = `Hello, world!`;
elem.innerHTML = DOMPurify.sanitize(str, {RETURN_TRUSTED_TYPE: true});

// Create an element
const img = document.createElement('img');
img.src = 'xyz.jpg';
elem.appendChild(img);

भरोसेमंद टाइप चालू करने से पहले, आपको report-only CSP हेडर का इस्तेमाल करके, किसी भी उल्लंघन की पहचान करनी होगी और उसे ठीक करना होगा.

Content-Security-Policy-Report-Only: require-trusted-types-for 'script'; report-uri //example.com

इसके बाद, जब सब कुछ ठीक हो जाए, तो इसे सही तरीके से चालू करें. पूरी जानकारी के लिए, web.dev पर भरोसेमंद टाइप की मदद से, डीओएम पर आधारित क्रॉस-साइट स्क्रिप्टिंग से जुड़ी जोखिम को रोकना लेख पढ़ें.

फ़ॉर्म कंट्रोल से जुड़े अपडेट

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

पहले, फ़ॉर्म कंट्रोल की डिफ़ॉल्ट स्टाइल.

फ़ॉर्म कंट्रोल की स्टाइल अपडेट करने के बाद.

फ़ॉर्म कंट्रोल के लुक को आधुनिक बनाने के लिए, Microsoft ने जो काम किया है उससे मैं काफ़ी प्रभावित हूं. इनमें बेहतर विज़ुअल स्टाइल के अलावा, बेहतर टच और ऐक्सेस की सुविधाएं भी मिलती हैं. इनमें बेहतर कीबोर्ड की सुविधा भी शामिल है!

नए फ़ॉर्म कंट्रोल, Microsoft Edge में पहले से ही उपलब्ध हैं. अब ये Chrome 83 में भी उपलब्ध हैं. ज़्यादा जानकारी के लिए, Chromium ब्लॉग पर फ़ॉर्म कंट्रोल और फ़ोकस में हुए अपडेट देखें.

ऑरिजिन ट्रायल

`measureMemory()` की मदद से मेमोरी मेज़र करना

Chrome 83 में ऑरिजिन ट्रायल शुरू किया जा रहा है. performance.measureMemory() एक नया एपीआई है. इससे आपके पेज के मेमोरी के इस्तेमाल को मेज़र किया जा सकता है और मेमोरी लीक का पता लगाया जा सकता है.

मेमोरी लीक आसानी से हो सकती हैं:

इवेंट लिसनर को अनरजिस्टर न करना
किसी iframe से ऑब्जेक्ट कैप्चर करना
वर्कर्स को बंद न करना
ऐरे में ऑब्जेक्ट इकट्ठा करना
और इसी तरह.

मेमोरी लीक की वजह से, पेज धीरे-धीरे लोड होते हैं और उपयोगकर्ताओं को बड़े पेज के तौर पर दिखते हैं.

if (performance.measureMemory) {
  try {
    const result = await performance.measureMemory();
    console.log(result);
  } catch (err) {
    console.error(err);
  }
}

नए एपीआई के बारे में पूरी जानकारी पाने के लिए, web.dev पर measureMemory() की मदद से, अपने वेब पेज के कुल मेमोरी इस्तेमाल को मॉनिटर करें लेख पढ़ें.

Native File System API से जुड़े अपडेट

Native File System API ने Chrome 83 में, लिखने लायक स्ट्रीम और फ़ाइल हैंडल को सेव करने की सुविधा के साथ नया ऑरिजिन ट्रायल शुरू किया.

async function writeURLToFile(fileHandle, url) {
  // Create a FileSystemWritableFileStream to write to.
  const writable = await fileHandle.createWritable();
  // Make an HTTP request for the contents.
  const response = await fetch(url);
  // Stream the response into the file.
  await response.body.pipeTo(writable);
  // pipeTo() closes the destination pipe automatically.
}

लिखने लायक स्ट्रीम की मदद से, फ़ाइल में लिखना बहुत आसान हो जाता है. साथ ही, यह एक स्ट्रीम होने की वजह से, जवाबों को एक स्ट्रीम से दूसरी स्ट्रीम में आसानी से भेजा जा सकता है.

फ़ाइल हैंडल को IndexedDB में सेव करने से, स्टेटस सेव किया जा सकता है या यह याद रखा जा सकता है कि उपयोगकर्ता किन फ़ाइलों पर काम कर रहा था. उदाहरण के लिए, हाल ही में बदलाव की गई फ़ाइलों की सूची बनाएं, वह फ़ाइल खोलें जिस पर उपयोगकर्ता काम कर रहा था वगैरह.

इन सुविधाओं का इस्तेमाल करने के लिए, आपको नए ऑरिजिन ट्रायल टोकन की ज़रूरत होगी. इसके लिए, मेरा अपडेट किया गया लेख पढ़ें नेटिव फ़ाइल सिस्टम एपीआई: web.dev पर, लोकल फ़ाइलों का ऐक्सेस देना पूरी जानकारी के साथ और नया ऑरिजिन ट्रायल टोकन पाने का तरीका.

अन्य ऑरिजिन ट्रायल

ऑरिजिन ट्रायल में उपलब्ध सुविधाओं की पूरी सूची देखें.

क्रॉस-ओरिजिन से जुड़ी नई नीतियां

कुछ वेब एपीआई से स्पेक्ट्रर जैसे साइड-चैनल हमलों का खतरा बढ़ जाता है. इस जोखिम को कम करने के लिए, ब्राउज़र ऑप्ट-इन के आधार पर एक अलग वातावरण उपलब्ध कराते हैं. इसे क्रॉस-ऑरिजिन आइसोलेशन कहा जाता है. क्रॉस-ऑरिजिन आइसोलेटेड स्टेट, document.domain में होने वाले बदलावों को भी रोकता है. document.domain में बदलाव करने की सुविधा की मदद से, एक ही साइट के दस्तावेज़ों के बीच कम्यूनिकेशन किया जा सकता है. इसे एक ही ऑरिजिन से जुड़ी नीति में एक खामी माना गया है.

पूरी जानकारी के लिए, COOP और COEP का इस्तेमाल करके, अपनी वेबसाइट को "क्रॉस-ऑरिजिन आइसोलेटेड" बनाना लेख पढ़ें.

वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी

उपयोगकर्ता अनुभव की क्वालिटी को मेज़र करने के कई तरीके हैं. हालांकि, उपयोगकर्ता अनुभव के कुछ पहलू, खास तौर पर साइट और कॉन्टेक्स्ट के हिसाब से होते हैं, लेकिन कुछ सिग्नल भी मौजूद होते हैं—"वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी"—जो सभी वेब अनुभवों के लिए बेहद ज़रूरी है. उपयोगकर्ता अनुभव से जुड़ी इन मुख्य ज़रूरतों में पेज लोड होने का अनुभव, इंटरैक्टिविटी, और पेज पर मौजूद कॉन्टेंट का विज़ुअल क्रैश होना शामिल है. इन ज़रूरतों को मिलाकर ही, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली रिपोर्ट तैयार की गई है.

सबसे बड़े एलिमेंट को रेंडर करने में लगने वाला समय, पेज लोड होने में लगने वाले समय का आकलन करती है. साथ ही, यह पेज लोड होने की टाइमलाइन में उस समय के बारे में बताती है जब पेज का मुख्य कॉन्टेंट लोड होने की संभावना होती है.
फ़र्स्ट इनपुट डिले मेट्रिक, रिस्पॉन्स को मेज़र करती है. साथ ही, इससे यह भी पता चलता है कि पेज के साथ पहली बार इंटरैक्ट करने पर, उपयोगकर्ताओं को कैसा अनुभव मिलता है.
कुल लेआउट शिफ़्ट से पता चलता है कि पेज लोड होने के दौरान उसका लेआउट कितनी बार बदलता है. साथ ही, इससे यह भी पता चलता है कि पेज पर दिखने वाले कॉन्टेंट का लेआउट अचानक कितनी बार बदलता है.

ये सभी मेट्रिक, उपयोगकर्ता के हिसाब से अहम नतीजे कैप्चर करती हैं. साथ ही, इन्हें फ़ील्ड में मेज़र किया जा सकता है. इनमें, प्रयोगशाला में गड़बड़ी का पता लगाने वाली मेट्रिक के बराबर मेट्रिक और टूल भी होते हैं. उदाहरण के लिए, सबसे बड़ा कॉन्टेंटफ़ुल पेंट, टॉपलाइन लोड होने वाली मेट्रिक है. हालांकि, यह फ़र्स्ट कॉन्टेंटफ़ुल पेंट (एफ़सीपी) और टाइम टू फ़र्स्ट बाइट (टीटीएफ़बी) पर भी निर्भर करता है. इन मेट्रिक को मॉनिटर करने और उनमें सुधार करने के लिए बहुत ज़रूरी होता है.

ज़्यादा जानने के लिए, पूरी जानकारी के लिए Chromium ब्लॉग पर वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी: अच्छी परफ़ॉर्मेंस वाली साइट के लिए ज़रूरी मेट्रिक लेख पढ़ें.

अन्य डेटा

Chrome अब Barcode Detection API के साथ काम करता है. इसकी मदद से, बारकोड का पता लगाया जा सकता है और उसे डिकोड किया जा सकता है.
नया सीएसएस @supports फ़ंक्शन, सीएसएस सिलेक्टर के लिए सुविधा की पहचान करने की सुविधा देता है.
नए ARIA एनोटेशन, टिप्पणियों, सुझावों, और टेक्स्ट हाइलाइट के लिए स्क्रीन रीडर की सुविधा के साथ काम करते हैं. ये एनोटेशन, <mark> की तरह ही काम करते हैं.
prefers-color-scheme मीडिया क्वेरी का इस्तेमाल करके, लेखक अपनी गहरे रंग वाली थीम को सपोर्ट कर सकते हैं. इससे उन्हें अपने बनाए गए अनुभव पर पूरा कंट्रोल मिलता है.
JavaScript में अब शेयर किए गए वर्कर में मॉड्यूल काम करते हैं.

क्या आपको जानना है कि आने वाले समय में क्या नया होने वाला है? इसे देखने के लिए, Fugu API ट्रैकर देखें!

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

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

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

मैं पीट लेपेज हूं और मुझे बाल कटवाने की ज़रूरत है, लेकिन जैसे ही Chrome 84 रिलीज़ होगा, मैं आपको तुरंत बताऊंगी -- Chrome में नया क्या है!