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

Barry Pollard

Noam Rosenthal

पब्लिश होने की तारीख: 19 मई, 2026

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

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

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

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

एपीआई के दो नए सेट की मदद से, एचटीएमएल को कम लीनियर तरीके से डिलीवर करना आसान हो जाता है. ऐसा एचटीएमएल दस्तावेज़ में क्रम से बाहर या JavaScript के नए एपीआई का इस्तेमाल करके, मौजूदा दस्तावेज़ों में डाइनैमिक तरीके से एचटीएमएल डालने के आसान तरीकों से किया जा सकता है. Chrome 148 से, डेवलपर chrome://flags/#enable-experimental-web-platform-features फ़्लैग का इस्तेमाल करके, इनकी टेस्टिंग कर सकते हैं. पॉलीफ़िल भी उपलब्ध हैं. इनकी मदद से, इन नए एपीआई का तुरंत इस्तेमाल किया जा सकता है. भले ही, ब्राउज़र इन्हें अब तक सपोर्ट न करते हों.

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

क्रम से बाहर स्ट्रीमिंग

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

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

...

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

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

<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"> जोड़ने पर, आखिर में फ़ाइनल प्रोसेसिंग निर्देश दिखता है.

डेमो

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

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

इस्तेमाल के उदाहरण

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

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

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

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

एपीआई में कुछ पाबंदियां और बारीकियां शामिल हैं. इनके बारे में यहां बताया गया है:

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

आने वाले समय में उपलब्ध होने वाली संभावित सुविधाएं

आने वाले समय में उपलब्ध होने वाली कुछ संभावित सुविधाएं, जिन पर विचार किया जा रहा है, वे ये हैं:

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

पॉलीफ़िल

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

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

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

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

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

• setHTML
• setHTMLUnsafe
• innerHTML और outerHTML सेटर
• createContextualFragment
• insertAdjacentHTML

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

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

कुछ ही डेवलपर, इन एपीआई को देखकर, इनमें से हर एपीआई के लिए इन सवालों के जवाब भरोसे के साथ दे सकते हैं.

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

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

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

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

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

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

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());

हम एक ऐसा तरीका भी जोड़ने की योजना बना रहे हैं जिसकी मदद से, इंटरमीडिएट TextDecoderStream() चरण की ज़रूरत के बिना, सीधे स्ट्रीम किया जा सकेगा.

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});

"Unsafe" तरीके

हर एपीआई के "unsafe" वर्शन भी मौजूद हैं:

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

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

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" शब्द का इस्तेमाल, डेवलपर को संभावित जोखिम के बारे में याद दिलाने के लिए किया गया है. साथ ही, यह भी बताया गया है कि वे स्क्रिप्ट को सैनिटाइज़ या प्रतिबंधित कैसे कर सकते हैं. इसका मतलब यह नहीं है कि इन तरीकों का इस्तेमाल नहीं किया जाना चाहिए.

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

इस्तेमाल के उदाहरण

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

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

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

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

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

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

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

पॉलीफ़िल

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

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

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

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

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

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

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