Chrome 123 में नया

Adriana Jara

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

मैं एड्रियाना जारा हूं. चलिए, देखते हैं कि Chrome 123 में डेवलपर के लिए नया क्या है.

light-dark() सीएसएस फ़ंक्शन.

सीएसएस में light-dark() फ़ंक्शन की मदद से, उपयोगकर्ता की पसंद के हिसाब से हल्के या गहरे रंग वाले मोड के रंग बनाए जा सकते हैं. किसी एक सीएसएस प्रॉपर्टी में दो अलग-अलग रंग की वैल्यू बताने के लिए, light-dark() फ़ंक्शन का इस्तेमाल करें.

एलिमेंट की कंप्यूट की गई color-scheme वैल्यू के आधार पर, ब्राउज़र अपने-आप सही रंग चुन लेगा. उदाहरण के लिए, इस सीएसएस की मदद से:

html {
  color-scheme: light dark;
}
.target {
    background-color: light-dark(lime, green);
}
  • अगर उपयोगकर्ता ने हल्के रंग वाली कोई थीम चुनी है, तो एलिमेंट का बैकग्राउंड नींबू रंग का होगा.
  • अगर उपयोगकर्ता ने गहरे रंग वाली थीम चुनी है, तो एलिमेंट का बैकग्राउंड हरा होगा.

लॉन्ग ऐनिमेशन फ़्रेम एपीआई.

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

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

इस जानकारी को इकट्ठा करने और उसका विश्लेषण करने से, आपको परफ़ॉर्मेंस से जुड़ी रुकावटों की पहचान करने और उन्हें ठीक करने में मदद मिलती है. नीचे दिए गए कोड का इस्तेमाल करके लंबे फ़्रेम कैप्चर किए जा सकते हैं.

const observer = new PerformanceObserver((list) => {
  console.log(list.getEntries());
});

observer.observe({ type: 'long-animation-frame', buffered: true });

सर्विस वर्कर स्टैटिक रूटिंग एपीआई.

सर्विस वर्कर का इस्तेमाल करके, वेबसाइटों को ऑफ़लाइन काम करने के लिए बढ़ावा दिया जा सकता है. साथ ही, कैश मेमोरी में सेव करने की ऐसी रणनीतियां बनाई जा सकती हैं जिनसे परफ़ॉर्मेंस बेहतर हो सकती है.

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

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

addEventListener('install', (event) => {
  event.addRoutes({
    condition: {
          urlPattern: "/articles/*",
          runningStatus: "running"
    },
    source: "fetch-event"
  });
});

और ज़्यादा!

बेशक, यहां बहुत कुछ है.

  • उपयोगकर्ता ने NavigationActivation इंटरफ़ेस का इस्तेमाल करके कहां से नेविगेट किया है, इसके आधार पर आपकी पसंद के मुताबिक बनाए गए पेज दिखाए जा सकते हैं.

  • Chrome में अब Zstandard (zstd) का इस्तेमाल किया जा सकता है. यह Content-Encoding, पेजों को तेज़ी से लोड करने और कम बैंडविड्थ का इस्तेमाल करने में मदद करता है. साथ ही, सर्वर पर कम समय और सीपीयू के साथ कंप्रेस भी करता है, जिससे सर्वर की लागत कम हो जाती है.

  • बैक-फ़ॉरवर्ड कैश मेमोरी के लिए, notRestoredReasons एपीआई Chrome 123 से रोल आउट किया जा रहा है. इससे साइट के मालिक, फ़ील्ड में यह जानकारी इकट्ठा कर पाते हैं कि bfcache का इस्तेमाल क्यों नहीं किया जा सका. साइट के मालिक इसका इस्तेमाल करके, bfcache के इस्तेमाल को बेहतर बना सकते हैं, ताकि इतिहास को तेज़ी से नेविगेट किया जा सके.

  • display-mode के लिए picture-in-picture वैल्यू की मदद से, सीएसएस के ऐसे खास नियम लिखे जा सकते हैं जो सिर्फ़ तब लागू होते हैं, जब वेब ऐप्लिकेशन को पिक्चर में पिक्चर मोड में दिखाया जाता है. उदाहरण के लिए:

@media all and (display-mode: picture-in-picture) {
  body {
    margin: 0;
  }
  h1 {
    font-size: 0.8em;
  }
}

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

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

सदस्यता लें

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

यो सोय एड्रियाना जारा और Chrome 124 के रिलीज़ होते ही, मैं आपको बताऊंगी कि Chrome की नई सुविधाएं क्या हैं!