Chrome 124 में नया

Pete LePage

Chrome 124 की खास बातें यहां दी गई हैं:

क्या आपको इसे बिना किसी रुकावट के देखना है? ज़्यादा जानकारी के लिए Chrome 124 के प्रॉडक्ट की जानकारी.

JavaScript में डिक्लेरेटिव शैडो डीओएम का इस्तेमाल करना

दो नए एपीआई हैं, जो डिक्लेरेटिव शैडो DOM को इस्तेमाल करने की अनुमति देते हैं JavaScript.

setHTMLUnsafe(), innerHTML के जैसा है और आपको इसका अंदरूनी एचटीएमएल सेट करने देता है बताई गई स्ट्रिंग का एक एलिमेंट. इससे आपको तब मदद मिलती है, जब ऐसा एचटीएमएल जिसमें डिक्लेरेटिव शैडो DOM शामिल है.

<my-custom-element>
  <template shadowrootmode="open">
    <style>
      :host {
        display: block;
        color: yellow;
      }
    </style>
    Hello, <slot></slot>
  </template>
</my-custom-element>

अगर आप सिर्फ़ innerHTML का इस्तेमाल करते हैं, तो ब्राउज़र इसे ठीक से पार्स नहीं करेगा. साथ ही, कोई शैडो DOM नहीं. हालांकि, setHTMLUnsafe() की मदद से शैडो डीओएम बनाया जाता है और तत्व को आपकी उम्मीद के अनुसार पार्स किया गया है.

const section = document.createElement("section");
section.setHTMLUnsafe(`<my-custom-element>...</my-custom-element>`);

अन्य एपीआई parseHTMLUnsafe() है और यह इसकी तरह ही काम करता है DOMParser.parseFromString().

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

अंत में, ये दोनों API पहले से ही के नवीनतम वर्शन में समर्थित हैं Firefox और Safari!

WebSocket स्ट्रीम एपीआई

WebSockets एक ऐसा शानदार तरीका है जिसकी मदद से, उपयोगकर्ता के पोलिंग पर निर्भर रहे बिना ब्राउज़र और सर्वर का इस्तेमाल करना. यह उनके लिए अच्छा है चैट ऐप्लिकेशन जैसी चीज़ों में, जहां आप जानकारी को तुरंत निपटाना चाहते हों आ जाता है.

हालांकि, अगर डेटा आपके हैंडल से जल्दी उपलब्ध हो जाए, तो क्या होगा?

इसे बैक प्रेशर कहा जाता है. इससे आपको गंभीर सिर दर्द हो सकता है. माफ़ करें, WebSocket API में पुराने सिस्टम को बेहतर तरीके से इस्तेमाल नहीं किया जा सकता दबाव.

WebSocket Stream API, आपको स्ट्रीम और वेब सॉकेट की ताकत है, जिसका मतलब है कि बैक प्रेशर, बिना किसी अतिरिक्त शुल्क के लागू किया जा सकता है.

एक नया WebSocketStream बनाकर शुरुआत करें और उसे WebSocket सर्वर.

const wss = new WebSocketStream(WSS_URL);
const {readable, writable} = await wss.opened;
const reader = readable.getReader();
const writer = writable.getWriter();

while (true) {
  const {value, done} = await reader.read();
  if (done) {
    break;
  }
  const result = await process(value);
  await writer.write(result);
}

इसके बाद, आपको कनेक्शन खुलने का इंतज़ार करना होगा. इससे ReadableStream और WritableStream में. इसके लिए, ReadableStream.getReader() तरीका इस्तेमाल करने पर, आपको ReadableStreamDefaultReader मिलेगा जिसके बाद, स्ट्रीम पूरी होने तक read() डेटा को इकट्ठा किया जा सकता है.

डेटा लिखने के लिए, WritableStream.getWriter() तरीके को कॉल करें. इससे आपको WritableStreamDefaultWriter, इसके बाद आप write() डेटा डाउनलोड कर सकते हैं.

ट्रांज़िशन में किए गए सुधार देखें

मैं व्यू ट्रांज़िशन की सुविधाओं को लेकर उत्साहित हूं. इसके अलावा, इसमें दो नई सुविधाएं भी दी गई हैं Chrome 124 में डिज़ाइन किया गया है.

नेविगेशन के दौरान, दस्तावेज़ के विंडो ऑब्जेक्ट पर pageswap इवेंट ट्रिगर होता है दस्तावेज़ को एक नए दस्तावेज़ से बदल देगा.

document.addEventListener("pageswap", event => {
  if (!event.viewTransition) {
     return;
  }
});

डॉक्यूमेंट रेंडर ब्लॉक करने की सुविधा की मदद से, किसी दस्तावेज़ को रेंडर होने से रोका जा सकता है जब तक अहम कॉन्टेंट को पार्स नहीं कर दिया जाता, तब तक यह पक्का किया जाता है कि पहला पेंट एक जैसा बना रहे ब्राउज़र पर लोड होता है.

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

बेशक वहां और भी बहुत कुछ है.

  • disallowReturnToOpener ब्राउज़र को संकेत देता है कि उसे पिक्चर में पिक्चर में कोई बटन नहीं दिखाना चाहिए जो उपयोगकर्ता को ओपनर टैब पर वापस जाने की अनुमति देती है.

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

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

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

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

सदस्यता लें

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

मेरा नाम पीट लेपेज है. Chrome 125 के रिलीज़ होते ही, हम Chrome में नया क्या है!