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

Chrome 83 में नया

Pete LePage

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

यहां आवश्यक जानकारी दी गई है:

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

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

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

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

उदाहरण के लिए 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 सीएसपी हेडर का इस्तेमाल करके उल्लंघनों की पहचान करके उन्हें ठीक करना होगा.

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 में बदलाव करने से, एक ही साइट के दस्तावेज़ों के बीच कम्यूनिकेशन की अनुमति मिलती है. साथ ही, इसे एक ही ऑरिजिन से जुड़ी नीति में एक लूपहोल के रूप में देखा जाता है.

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

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

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

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

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

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

अन्य डेटा

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

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

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

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

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

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