Chrome 83 में नया

पीट लीपेज
पीट लीपेज

Chrome 83 अब स्टेबल होने वाला है.

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

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

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

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

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

// 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

सब कुछ चालू कर लेने के बाद, आप इसे ठीक से चालू कर सकते हैं. पूरी जानकारी भरोसेमंद टाइप की मदद से DOM पर आधारित क्रॉस-साइट स्क्रिप्टिंग के जोखिम से बचें सेक्शन में दी गई है.

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

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

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

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

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

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

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

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

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

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

वेब वाइटल

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

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

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

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

अन्य डेटा

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

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

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

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

सदस्यता लें

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

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