डेटा के कुछ हिस्से को अपडेट करने के लिए एलान करना

Barry Pollard

Noam Rosenthal

पब्लिश होने की तारीख: 19 मई, 2026, पिछली बार अपडेट किए जाने की तारीख: 8 सितंबर, 2026

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

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

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

Chrome की टीम इस समस्या पर विचार कर रही है. साथ ही, Declarative Partial Updates नाम से वेब प्लैटफ़ॉर्म में नए अपडेट डेवलप कर रही है.

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

स्ट्रीमिंग में गड़बड़ी

Browser Support

• 150
• 150
• x
• x

Source

बदलावों का पहला सेट, for एट्रिब्यूट के साथ <template> एचटीएमएल एलिमेंट और प्रोसेसिंग के निर्देश देने वाले प्लेसहोल्डर का इस्तेमाल करने वाले नए आउट-ऑफ़-ऑर्डर स्ट्रीमिंग एपीआई हैं. उदाहरण के लिए:

<div>
  <?marker name="placeholder">
</div>

...

<template for="placeholder">
  Here is some <em>HTML content</em>!
</template>

प्रोसेसिंग के निर्देश, एक्सएमएल में लंबे समय से मौजूद हैं. हालांकि, एचटीएमएल में इन्हें टिप्पणियों के तौर पर माना जाता है और अनदेखा कर दिया जाता है. इस नए एपीआई की मदद से, एचटीएमएल में प्रोसेसिंग के निर्देश दिए जा सकते हैं. उदाहरण के लिए, जब ब्राउज़र को <?marker name="placeholder"> प्रोसेसिंग का निर्देश मिलता है, तो वह तुरंत कुछ नहीं करता. हालांकि, इसे बाद में रेफ़र किया जा सकता है.

for एट्रिब्यूट वाला <template> एलिमेंट, name एट्रिब्यूट वाले प्रोसेसिंग निर्देशों को ढूंढता है और कॉन्टेंट को बदल देता है. इस मामले में, पार्स होने के बाद DOM इस तरह दिखता है. इसमें कुछ व्हाइटस्पेस के अंतर को अनदेखा किया गया है:

<div>
  Here is some <em>HTML content</em>!
</div>

बदलावों के लिए <?marker> एट्रिब्यूट के साथ-साथ, <?start> और <?end> रेंज मार्कर भी होते हैं. इनकी मदद से, टेंप्लेट प्रोसेस होने से पहले कुछ समय के लिए प्लेसहोल्डर कॉन्टेंट दिखाया जा सकता है:

<div>
  <?start name="another-placeholder">
  Loading…
  <?end>
</div>

...

<template for="another-placeholder">
  Here is some <em>HTML content</em>!
</template>

इस मामले में, Loading… स्ट्रिंग तब तक दिखती है, जब तक <template> नहीं दिख जाता. इसके बाद, इसे नए कॉन्टेंट से बदल दिया जाता है.

एक से ज़्यादा अपडेट की अनुमति देने के लिए, टेंप्लेट में प्रोसेसिंग के निर्देश भी शामिल किए जा सकते हैं:

<ul id="results">
  <?start name="results">
  Loading…
  <?end>
</ul>

...

<template for="results">
  <li>Result One</li>
  <?marker name="results">
</template>

...

<template for="results">
  <li>Result Two</li>
  <?marker name="results">
</template>

...

पार्स और प्रोसेस किए जाने के बाद, यह एचटीएमएल इस तरह दिखता है:

<ul id="results">
  <li>Result One</li>
  <li>Result Two</li>
  <?marker name="results">
</ul>

आखिर में प्रोसेसिंग से जुड़ा निर्देश दिया गया है, ताकि अगर बाद में दस्तावेज़ में कोई और <template for="results"> प्लेसहोल्डर जोड़ा जाता है, तो उसे प्रोसेस किया जा सके.

स्टैंडर्ड एचटीएमएल एलिमेंट के बजाय प्रोसेसिंग के निर्देश क्यों?

यह सवाल, पहली बार इस एपीआई का इस्तेमाल करने वाले लोगों के लिए सामान्य है. इसमें <slot> या <template> एलिमेंट का इस्तेमाल करने के सुझाव दिए गए हैं. इस प्रस्ताव के शुरुआती वर्शन में, स्टैंडर्ड एचटीएमएल एलिमेंट का इस्तेमाल किया गया था. हालांकि, डिज़ाइन में बदलाव होने के बाद, प्रोसेसिंग के निर्देशों का इस्तेमाल किया गया. प्रोसेसिंग के निर्देशों की मदद से, डीओएम पर असर डाले बिना पैचिंग की जा सकती है. इससे इसका इस्तेमाल <head> में किया जा सकता है. उदाहरण के लिए, <title> अपडेट के लिए. इसके अलावा, इसका इस्तेमाल <table> जैसे अन्य एलिमेंट में भी किया जा सकता है. उदाहरण के लिए, वैकल्पिक अतिरिक्त लाइनें जोड़ने के लिए.

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

डेमो

इस वीडियो में, स्ट्रीमिंग एचटीएमएल का इस्तेमाल करके एक बुनियादी फ़ोटो एल्बम ऐप्लिकेशन लागू किया गया है:

फ़ोटो एल्बम का डेमो, जिसमें आउट-ऑफ़-ऑर्डर स्ट्रीमिंग का इस्तेमाल किया गया है (सोर्स)

शुरुआती लेआउट के बाद, स्टेटस और फ़ोटो, दोनों को एचटीएमएल में स्ट्रीम किया जाता है.

उपयोग के उदाहरण

स्ट्रीमिंग एचटीएमएल के साथ-साथ, क्रम से बाहर के एचटीएमएल को पैच करने के कई उदाहरण हैं:

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

ये सिर्फ़ इस्तेमाल के कुछ उदाहरण हैं. हमें यह देखकर खुशी होगी कि डेवलपर इस नए एपीआई का इस्तेमाल किस तरह करते हैं.

पाबंदियां और बारीकियां

एपीआई के इस्तेमाल से जुड़ी कुछ पाबंदियां हैं. साथ ही, कुछ ऐसी बारीकियां हैं जिनके बारे में आपको पता होना चाहिए:

• सुरक्षा से जुड़ी वजहों से, <template for> सिर्फ़ एक ही पैरंट एलिमेंट के लिए, प्रोसेसिंग से जुड़े निर्देशों को अपडेट कर सकता है. <template for> को सीधे तौर पर <body> एलिमेंट में जोड़ने से, इसे पूरे दस्तावेज़ (इसमें <head> भी शामिल है) का ऐक्सेस मिल जाता है.
• <?end> प्रोसेसिंग इंस्ट्रक्शन देना ज़रूरी नहीं है. अगर यह मौजूद नहीं है, तो <?start> एलिमेंट और कंटेनिंग एलिमेंट के आखिर में मौजूद कॉन्टेंट को बदल दिया जाएगा.
• <template for> की स्ट्रीमिंग शुरू होने के बाद, प्रोसेसिंग के निर्देशों को दूसरी जगह ले जाने से भी अनचाहे नतीजे मिल सकते हैं. ऐसा इसलिए, क्योंकि नया कॉन्टेंट पुरानी जगह पर स्ट्रीम होता रहेगा.
• ध्यान दें कि <template for> को डाइनैमिक तरीके से डालने पर, जैसे कि setHTML या innerHTML प्रॉपर्टी का इस्तेमाल करने पर, टेंप्लेट को पार्स करते समय उसका "पैरंट" एक इंटरमीडिएट दस्तावेज़ फ़्रैगमेंट होता है. इसका मतलब है कि इन तरीकों से एचटीएमएल डालने पर, मौजूदा DOM में बदलाव नहीं किया जा सकता. साथ ही, फ़्रैगमेंट में "इन प्लेस" पैचिंग होती है. हालांकि, streamHTMLUnsafe जैसे तरीकों का इस्तेमाल करके स्ट्रीम करने पर (इसके बारे में जल्द ही बताया जाएगा), कोई इंटरमीडिएट फ़्रैगमेंट नहीं होता. इसलिए, टेंप्लेट मौजूदा कॉन्टेंट को बदल सकते हैं.

मानकीकरण की स्थिति

<template for> एट्रिब्यूट, एचटीएमएल स्टैंडर्ड का हिस्सा है. हालांकि, यह अभी सभी ब्राउज़र पर काम नहीं करता.

आने वाले समय में जोड़ी जा सकने वाली सुविधाएं

आने वाले समय में, इन सुविधाओं को भी जोड़ा जा सकता है:

• क्लाइंट साइड में ये शामिल हैं. उदाहरण के लिए, <template for="footer" src="/partials/footer.html"> या बिना पैच किए भी <template src="/partials/footer.html">. ज़्यादा जानकारी के लिए, एक्सप्लेनर देखें. यह सुविधा chrome://flags/#enable-experimental-web-platform-features फ़्लैग के पीछे उपलब्ध है.
• ऐसे कॉन्टेंट को ओवरराइट होने से रोकना जिसमें बदलाव नहीं किया जाएगा. इसे कॉन्टेंट के वर्शन नंबर या वर्शनिंग की मदद से हासिल किया जा सकता है. इससे कॉन्टेंट को रीसेट करने के बजाय, रूट में बदलाव या अन्य अपडेट के बीच स्थिति को बनाए रखा जा सकेगा.
• पैच करते समय सैनिटाइज़ करना. उदाहरण के लिए, <template for=icon safe><svg id="from-untrusted-source">...</svg></template>

पॉलीफ़िल

Chrome टीम ने एक template-for-polyfill रिलीज़ किया है, जो npm पर उपलब्ध है. इससे साइटें, इस नई सुविधा का तुरंत इस्तेमाल कर सकती हैं. भले ही, यह सुविधा अन्य ब्राउज़र में उपलब्ध न हो.

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

HTML डालने और स्ट्रीम करने के नए तरीके

सभी कॉन्टेंट को एचटीएमएल के तौर पर डिलीवर नहीं किया जा सकता. Chrome ने इस क्षेत्र में जो दूसरा काम किया है उसका मकसद, JavaScript की मदद से कॉन्टेंट को आसानी से अपडेट करना है.

JavaScript का इस्तेमाल करके, किसी मौजूदा दस्तावेज़ में डाइनैमिक रूप से एचटीएमएल इंजेक्ट करने के कई तरीके पहले से मौजूद हैं:

• setHTML
• setHTMLUnsafe
• innerHTML और outerHTML
• createContextualFragment
• insertAdjacentHTML

हालांकि, ये सभी टूल अलग-अलग तरीके से काम करते हैं. इनमें कुछ बारीकियां और अंतर होते हैं जिन पर डेवलपर शायद हमेशा ध्यान न दें:

• क्या नया कॉन्टेंट, मौजूदा कॉन्टेंट को बदल देता है या उसमें जुड़ जाता है?
• क्या वे संभावित रूप से खतरनाक एचटीएमएल को सैनिटाइज़ करते हैं—उदाहरण के लिए. <script> टैग से बचकर?
• अगर ऐसा नहीं है, तो क्या <script> को चलाना चाहिए?
• ये भरोसेमंद टाइप के साथ कैसे काम करते हैं?

कुछ डेवलपर ने उन एपीआई को ध्यान से देखा और उनमें से हर एक के लिए, उन सवालों के जवाब भरोसे के साथ दिए.

इनका इस्तेमाल सिर्फ़ एचटीएमएल के पूरे सेट के लिए किया जा सकता है. इसके बारे में पहले से पता होना चाहिए. ऐसा तब होता है, जब एचटीएमएल को स्ट्रीम करने की अनुमति देने के लिए कॉल किए गए हों. इसका मतलब है कि आपको कॉन्टेंट डालने से पहले उसे पूरा डाउनलोड करना होगा. जबकि, एचटीएमएल की एक बड़ी खासियत यह है कि इसमें कॉन्टेंट को तुरंत स्ट्रीम किया जा सकता है. इस समस्या को कुछ हद तक ठीक किया जा सकता है. इसके लिए, पेलोड को अलग-अलग हिस्सों में बांटना या document.write जैसे पुराने तरीकों का इस्तेमाल करना होता है. हालांकि, इनसे नई समस्याएं पैदा हो जाती हैं.

स्टैटिक और स्ट्रीमिंग एपीआई का नया सेट

Browser Support

• 
• 
• x
• x

Chrome ने setHTML और setHTMLUnsafe के लिए, नए एपीआई का एक सुइट और एक्सटेंशन तैयार किए हैं. इनसे, वीडियो को साफ़ किया जा सकता है. साथ ही, स्ट्रीमिंग की सुविधा भी मिलती है.

इन्हें Chrome 148 से डेवलपर टेस्टिंग के लिए तैयार किया गया है. इसके लिए, chrome://flags/#enable-experimental-web-platform-features फ़्लैग का इस्तेमाल किया जा सकता है. इन्हें Chrome 155 में लॉन्च करने का प्लान है.

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

विज्ञापन डालने और स्ट्रीम करने के नए तरीके

कार्रवाई	स्थिर	स्ट्रीमिंग
इस तरीके का इस्तेमाल करके, एलिमेंट के एचटीएमएल कॉन्टेंट को सेट किया जा सकता है	setHTML(html, options);	streamHTML(options);
पूरे एलिमेंट को इस एचटीएमएल से बदलें	replaceWithHTML(html, options);	streamReplaceWithHTML(options);
एचटीएमएल को एलिमेंट से पहले जोड़ें	beforeHTML(html, options);	streamBeforeHTML(options);
एचटीएमएल को एलिमेंट के पहले चाइल्ड के तौर पर जोड़ें	prependHTML(html, options);	streamPrependHTML(options);
एचटीएमएल को एलिमेंट के आखिरी चाइल्ड के तौर पर जोड़ना	appendHTML(html, options);	streamAppendHTML(options);
एलिमेंट के बाद एचटीएमएल जोड़ें	afterHTML(html, options);	streamAfterHTML(options);

Unsafe के कुछ ऐसे वर्शन भी हैं जिनके बारे में जल्द ही बताया जाएगा. हालांकि, ऐसा लग सकता है कि इनकी संख्या बहुत ज़्यादा है. खास तौर पर, जब Unsafe जैसे फ़ंक्शन को जोड़ा जाता है. हालांकि, नाम रखने के एक जैसे तरीके की वजह से, यह समझना आसान हो जाता है कि हर फ़ंक्शन क्या करता है. ऐसा पहले बताए गए तरीकों की तुलना में ज़्यादा आसानी से किया जा सकता है.

स्टैटिक वर्शन, डीओएम स्ट्रिंग आर्ग्युमेंट के तौर पर नया एचटीएमएल लेते हैं. साथ ही, इनमें कुछ विकल्प भी होते हैं:

const newHTML = "<p>This is a new paragraph</p>";
const contentElement = document.querySelector('#content-to-update');

contentElement.setHTML(newHTML);

स्ट्रीमिंग वर्शन, Streams API के साथ काम करते हैं. जैसे, getWriter() के साथ:

const contentElement = document.querySelector('#content-to-update');
const writer = contentElement.streamHTMLUnsafe().getWriter();

// Example stream of updating content
while (true) {
  await writer.write(`<p>${++i}</p>`);
  await new Promise((resolve) => setTimeout(resolve, 1000));
}

writer.close();

इसके अलावा, पाइप चेन का इस्तेमाल करके फ़ेच किए गए जवाब से भी ऐसा किया जा सकता है:

const contentElement = document.querySelector('#content-to-update');
const response = await fetch('/api/content.html');

response.body
  .pipeThrough(new TextDecoderStream())
  .pipeTo(contentElement.streamHTMLUnsafe());

textStream() सुविधा शुल्क

Browser Support

• 151
• 151
• x
• x

textStream आसान तरीका भी जोड़ा गया है. इसमें, आपको सीधे तौर पर स्ट्रीम करने की सुविधा मिलती है. इसके लिए, आपको TextDecoderStream() चरण पूरा करने की ज़रूरत नहीं होती:

const contentElement = document.querySelector('#content-to-update');
const response = await fetch('/api/content.html');

response.textStream().pipeTo(contentElement.streamHTMLUnsafe());

options

options आर्ग्युमेंट की मदद से, कस्टम sanitizer तय किया जा सकता है. इसकी डिफ़ॉल्ट वैल्यू default होती है. इसका मतलब है कि डिफ़ॉल्ट सैनिटाइज़र कॉन्फ़िगरेशन. इसका इस्तेमाल इस तरह किया जाता है:

const newHTML = '<p>This is a new paragraph</p>';
const contentElement = document.querySelector('#content-to-update');

// Only allows basic formatting
const basicFormattingSanitzer = new Sanitizer({ elements: ['em', 'i', 'b', 'strong'] });

contentElement.setHTML(newHTML, {sanitizer: basicFormattingSanitzer});

"असुरक्षित" तरीके

हर एपीआई के "असुरक्षित" वर्शन भी उपलब्ध हैं:

विज्ञापन दिखाने और स्ट्रीम करने के "असुरक्षित" तरीके

कार्रवाई	स्थिर	स्ट्रीमिंग
इस तरीके का इस्तेमाल करके, एलिमेंट के एचटीएमएल कॉन्टेंट को सेट किया जा सकता है	setHTMLUnsafe(html,options);	streamHTMLUnsafe(options);
पूरे एलिमेंट को इस एचटीएमएल से बदलें	replaceWithHTMLUnsafe(html, options);	streamReplaceWithHTMLUnsafe(options);
एचटीएमएल को एलिमेंट से पहले जोड़ें	beforeHTMLUnsafe(html, options);	streamBeforeHTMLUnsafe(options);
एचटीएमएल को एलिमेंट के पहले चाइल्ड के तौर पर जोड़ें	prependHTMLUnsafe(html, options);	streamPrependHTMLUnsafe(options);
एचटीएमएल को एलिमेंट के आखिरी चाइल्ड के तौर पर जोड़ना	appendHTMLUnsafe(html, options);	streamAppendHTMLUnsafe(options);
एलिमेंट के बाद एचटीएमएल जोड़ें	afterHTMLUnsafe(html, options);	streamAfterHTMLUnsafe(options);

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

setHTML की तरह, setHTMLUnsafe भी एक मौजूदा तरीका है. हालांकि, स्क्रिप्ट को चलाने के लिए, इसमें runScripts options पैरामीटर जोड़ा गया है:

const newHTML = `<p>This is a new paragraph</p>
                 <script src=script.js></script>`;
const contentElement = document.querySelector('#content-to-update');

contentElement.setHTMLUnsafe(newHTML, {runScripts: true});

इस तरीके में "सुरक्षित नहीं है" शब्द का इस्तेमाल, डेवलपर को संभावित जोखिम के बारे में याद दिलाने के लिए किया गया है. साथ ही, यह बताने के लिए किया गया है कि वे स्क्रिप्ट को कैसे सुरक्षित कर सकते हैं या उन पर पाबंदी लगा सकते हैं. इसका मतलब यह नहीं है कि इन तरीकों का इस्तेमाल नहीं किया जाना चाहिए.

यह कितना "असुरक्षित" है, यह इस बात पर निर्भर करता है कि इनपुट कितने भरोसेमंद हैं. Unsafe स्टैटिक तरीके, html आर्ग्युमेंट के तौर पर DOM स्ट्रिंग या TrustedHTML, दोनों के साथ काम करते हैं. साथ ही, सैनिटाइज़र का इस्तेमाल करने की अनुमति देते हैं. हालांकि, runScript का मकसद स्क्रिप्ट को अनुमति देना है. इसलिए, डिफ़ॉल्ट रूप से किसी सैनिटाइज़र का इस्तेमाल नहीं किया जाता है.

उपयोग के उदाहरण

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

इस्तेमाल के उदाहरणों में ये शामिल हैं:

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

ये सिर्फ़ कुछ उदाहरण हैं. हमें यह देखने का इंतज़ार रहेगा कि आप किस तरह के इमोजी और बैज डिज़ाइन करते हैं!

पाबंदियां और बारीकियां

इन नए एपीआई में कुछ पाबंदियां और बारीकियां भी शामिल हैं, जिनके बारे में आपको पता होना चाहिए:

• स्ट्रीमिंग को Trusted Types API के साथ इंटिग्रेट करने के लिए, createParserOptions के नए तरीके का इस्तेमाल करना ज़रूरी है. इससे किसी भी एचटीएमएल सेटिंग ऑपरेशन में सैनिटाइज़र को इंजेक्ट किया जा सकता है. भरोसेमंद टाइप के इंटिग्रेशन के बारे में ज़्यादा जानकारी के लिए, इसके बारे में बताने वाला लेख पढ़ें
• <template for> की तरह ही, स्ट्रीम किए जा रहे एलिमेंट को हटाने से अनचाहे नतीजे मिल सकते हैं या स्ट्रीम में गड़बड़ियां हो सकती हैं.
• streamHTMLUnsafe कई मामलों में मुख्य पार्सर की तरह काम करता है. जैसे, मुख्य दस्तावेज़ में जोड़े जाने पर <template for> निर्देशों को प्रोसेस करना और स्ट्रीम के आखिर तक defer स्क्रिप्ट को रोकना.

मानकीकरण की स्थिति

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

पॉलीफ़िल

Chrome टीम ने एक html-setters-polyfill रिलीज़ किया है, जो npm पर उपलब्ध है. इससे साइटें, इस नई सुविधा का तुरंत इस्तेमाल कर सकती हैं. भले ही, यह सुविधा अन्य ब्राउज़र में उपलब्ध न हो.

ध्यान दें कि यह पॉलीफ़िल स्ट्रीम नहीं करता है. इसके बजाय, यह बफ़र करता है और पूरा होने पर लागू होता है. यह एपीआई के शेप के लिए ज़्यादा पॉलीफ़िल है, न कि फ़ंक्शन के लिए.

इसके अलावा, सुरक्षित कॉन्टेंट सेट करने की सुविधा, setHTML और Sanitizer API पर निर्भर करती है. हालांकि, Safari में यह सुविधा काम नहीं करती.

इन दोनों का एक साथ इस्तेमाल करें

ये दोनों अलग-अलग एपीआई हैं, लेकिन इनका इस्तेमाल एक साथ करने से ज़्यादा फ़ायदे मिलते हैं. एचटीएमएल में नए <template for> एलिमेंट स्ट्रीम करके, कॉन्टेंट के अलग-अलग हिस्सों को डाइनैमिक तरीके से अपडेट किया जा सकता है. इसके लिए, आपको हर हिस्से को सीधे तौर पर टारगेट करने की ज़रूरत नहीं होती. साथ ही, आपको DOM के लिए अलग-अलग JavaScript रेफ़रंस की भी ज़रूरत नहीं होती.

एसपीए-स्टाइल वाले पेज को लोड करने के लिए, प्रोसेसिंग के निर्देशों वाला आउटलाइन पेज लोड किया जा सकता है. इसके बाद, हर नए पेज के टेंप्लेट को एचटीएमएल के सबसे नीचे स्ट्रीम किया जा सकता है, ताकि उन्हें प्रोसेसिंग के निर्देशों में शामिल किया जा सके.

इन दोनों एपीआई में, इस्तेमाल के और भी कई उदाहरण और संभावनाएं मौजूद हैं. इसलिए, हमारी (सीमित!) कल्पनाओं को अपने रास्ते में न आने दें. आंशिक अपडेट को मैनेज करना आसान बनाकर, छोटे-मोटे बदलावों के साथ बार-बार इस्तेमाल किए जाने वाले लंबे कोड को कम किया जा सकता है. साथ ही, अपडेट को आसान बनाया जा सकता है और वेब के लिए नई संभावनाएं खोली जा सकती हैं!

Chrome, Declarative Partial Updates प्रोजेक्ट के तहत कुछ और एपीआई पर काम कर रहा है. हालांकि, हमें इन दोनों एपीआई को आपके लिए उपलब्ध कराते हुए खुशी हो रही है. हम आपको अपडेट देते रहेंगे. साथ ही, इस बारे में ज़्यादा जानकारी उपलब्ध होने पर, हम आपको इसकी सूचना देंगे.