Chrome 83 में नया

Pete LePage

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

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

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

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

ध्यान दें: ऐप्लिकेशन शॉर्टकट Chrome 83 में मिलने चाहिए थे, लेकिन Chrome 84 रिलीज़ होने में देरी होगी. इसे 14 जुलाई के लिए शेड्यूल किया गया है.

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

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

उदाहरण के लिए, 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 पर.

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

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

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

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

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

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

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

measureMemory() की मदद से मेमोरी मापें

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

मेमोरी लीक की सुविधा आसानी से दी जा सकती है:

• किसी इवेंट लिसनर का रजिस्ट्रेशन रद्द करना भूल जाना
• iframe से ऑब्जेक्ट कैप्चर करना
• कर्मचारी को बंद नहीं करना
• सरणियों में ऑब्जेक्ट इकट्ठा करना
• वगैरह.

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

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

चेक आउट करने का समय 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: लोकल फ़ाइलों का ऐक्सेस आसान बनाना इस पेज पर आपको पूरी जानकारी मिल जाएगी.साथ ही, आपको नया ऑरिजिन ट्रायल टोकन पाने का तरीका भी पता चलेगा.

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

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

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

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

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

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

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

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

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

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

अन्य डेटा

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

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

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

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

• Chrome DevTools (83) में नया क्या है
• Chrome 83 के बंद होने और कॉन्टेंट हटाना
• Chrome 83 के लिए, ChromeStatus.com से जुड़े अपडेट
• Chrome 83 के लिए JavaScript में नया क्या है
• Chromium सोर्स की रिपॉज़िटरी में बदलाव की सूची

सदस्यता लें

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

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