এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

ঘোষণামূলক আংশিক আপডেট

Barry Pollard

Noam Rosenthal

প্রকাশিত: ১৯ মে, ২০২৬, সর্বশেষ হালনাগাদ: ৮ সেপ্টেম্বর, ২০২৬

ওয়েব তার শুরুর দিকের সেই স্থির ও নথি-নির্ভর মাধ্যম থেকে অনেক আগেই সরে এসেছে। আধুনিক, সমৃদ্ধ ওয়েব অ্যাপগুলো সবাই নানা কারণে ব্যবহার করে, যেমন যোগাযোগ করা, কেনাকাটা করা, উন্নত মানের কনটেন্ট উপভোগ করা থেকে শুরু করে আমাদের জটিল জীবন পরিচালনা করা পর্যন্ত।

এতসব অগ্রগতি সত্ত্বেও, HTML এখনও উপর থেকে নীচে ক্রমানুসারে উপস্থাপিত হয়, যেখানে কন্টেন্ট কখন প্রস্তুত বা ব্যবহারকারী কখন তা গ্রহণ করছেন সেদিকে তেমন মনোযোগ দেওয়া হয় না। CSS আপনাকে কন্টেন্টের ক্রম পরিবর্তন করার সুযোগ দেয়, কিন্তু প্রায়শই এর ফলে অ্যাক্সেসিবিলিটির উপর গুরুতর প্রভাব পড়ে। জাভাস্ক্রিপ্ট আপনাকে বিভিন্ন API-এর মাধ্যমে DOM-কে নিয়ন্ত্রণ করে এই সীমাবদ্ধতা থেকে কিছুটা মুক্তি দেয়, কিন্তু সেগুলোর জন্য প্রায়শই বিশদ সিনট্যাক্স অথবা HTML-এর সাথে যুক্ত করার জন্য DOM ট্রি তৈরি করার প্রয়োজন হয়।

ওয়েবের ক্লায়েন্ট-সার্ভার প্রকৃতির কারণে এর পারফরম্যান্স অত্যন্ত গুরুত্বপূর্ণ। তবে, HTML-এর এই ক্রমিক প্রকৃতিকে এড়ানোর জন্য প্রায়শই ত্রুটিপূর্ণ সিদ্ধান্ত নেওয়া হয়, যা পারফরম্যান্সকে ধীর করে দেয়। এর মধ্যে রয়েছে পুরো পৃষ্ঠাটি প্রস্তুত হওয়া পর্যন্ত অপেক্ষা করা অথবা অ্যাসিঙ্ক্রোনাস পদ্ধতিতে কম্পোনেন্ট সরবরাহ করার জন্য একটি ভারী ফ্রেমওয়ার্ক ব্যবহার করা। জাভাস্ক্রিপ্ট ফ্রেমওয়ার্কগুলোর জনপ্রিয়তা এটাই প্রমাণ করে যে, ওয়েব ডেভেলপাররা ওয়েবের উৎপত্তির কঠোর ডকুমেন্ট-ভিত্তিক মডেলের চেয়ে কম্পোনেন্ট-ভিত্তিক মডেলকেই বেশি পছন্দ করেন।

ক্রোম টিম এই সমস্যাটি বিবেচনা করছে এবং ‘ডিক্লারেটিভ পার্শিয়াল আপডেট’ নামে ওয়েব প্ল্যাটফর্মে নতুন সংযোজন তৈরি করছে।

প্রথম দুটি নতুন এপিআই সেট এইচটিএমএলকে আরও অ-রৈখিক পদ্ধতিতে উপস্থাপন করা সহজ করে তোলে; তা এইচটিএমএল ডকুমেন্টের মধ্যেই এলোমেলোভাবে হোক, অথবা নতুন জাভাস্ক্রিপ্ট এপিআই ব্যবহার করে বিদ্যমান ডকুমেন্টে গতিশীলভাবে এইচটিএমএল সন্নিবেশ করার সহজ উপায়ের মাধ্যমেই হোক। পলিফিলও উপলব্ধ রয়েছে, যা আপনাকে এই নতুন এপিআইগুলো সঙ্গে সঙ্গেই ব্যবহার করতে দেয়, এমনকি সেইসব ব্রাউজারেও যা এখনও এগুলো সমর্থন করে না।

অচল স্ট্রিমিং

Browser Support

Source

প্রথম ধাপের পরিবর্তনগুলো হলো প্রসেসিং ইনস্ট্রাকশন প্লেসহোল্ডার এবং for অ্যাট্রিবিউটসহ <template> HTML এলিমেন্ট ব্যবহার করে নতুন আউট-অফ-অর্ডার স্ট্রিমিং এপিআই । উদাহরণস্বরূপ:

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

...

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

প্রসেসিং ইনস্ট্রাকশন অনেক দিন ধরেই XML-এ বিদ্যমান ছিল, কিন্তু HTML-এ সেগুলোকে কমেন্ট হিসেবে গণ্য করা হতো এবং উপেক্ষা করা হতো। এই নতুন API সেই অবস্থার পরিবর্তন করে এবং HTML-এ প্রসেসিং ইনস্ট্রাকশন নিয়ে আসে। উদাহরণস্বরূপ, যখন ব্রাউজার <?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>

এক্ষেত্রে, <template> দেখা না যাওয়া পর্যন্ত একটি Loading… ’ স্ট্রিং প্রদর্শিত হয় এবং তারপর তা নতুন বিষয়বস্তু দ্বারা প্রতিস্থাপিত হয়।

একাধিকবার আপডেটের সুযোগ দেওয়ার জন্য টেমপ্লেটে প্রসেসিং নির্দেশাবলী অন্তর্ভুক্ত করাও সম্ভব:

<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>

...

পার্স এবং প্রসেস করার পর এর ফলে নিম্নলিখিত HTML পাওয়া যায়:

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

শেষে চূড়ান্ত প্রক্রিয়াকরণের নির্দেশাবলী সহ, যদি পরবর্তীতে ডকুমেন্টে আরও কোনো <template for="results"> প্লেসহোল্ডার যোগ করা হয়।

সাধারণ HTML এলিমেন্টের পরিবর্তে প্রসেসিং ইনস্ট্রাকশন কেন?

যারা প্রথমবার এই এপিআই ব্যবহার করছেন, তাদের জন্য এটি একটি সাধারণ প্রশ্ন, এবং এক্ষেত্রে <slot> বা এমনকি <template> এলিমেন্টগুলো সরাসরি ব্যবহার করার পরামর্শ দেওয়া হয়। এই প্রস্তাবনার একটি প্রাথমিক সংস্করণ সাধারণ এইচটিএমএল এলিমেন্টগুলোর সাথে কাজ করত, কিন্তু ডিজাইনটি উন্নত করার সাথে সাথে প্রসেসিং ইনস্ট্রাকশন ব্যবহার শুরু হয়। প্রসেসিং ইনস্ট্রাকশন ব্যবহারের ফলে ডম (DOM)-কে প্রভাবিত না করেই প্যাচিং করা সম্ভব হয়। এর ফলে এটি <head> ট্যাগের ভেতরে—যেমন <title> আপডেট করার জন্য—অথবা এমনকি <table> -এর মতো অন্যান্য এলিমেন্টের ভেতরেও (যেমন, ঐচ্ছিক অতিরিক্ত সারি যোগ করার জন্য) ব্যবহার করা যায়।

অনেক ওয়েব ডেভেলপারের কাছে সিনট্যাক্সটি অপরিচিত হওয়া সত্ত্বেও, প্রসেসিং ইনস্ট্রাকশনগুলো অনেক বেশি নমনীয়তা প্রদান করে এবং ব্যাকওয়ার্ড কম্প্যাটিবিলিটি সমস্যার সম্ভাবনা কমিয়ে দেয়। এগুলো ইতিমধ্যেই XML-এ ব্যবহৃত হয় এবং এই প্রস্তাবনার কল্যাণে এখন HTML স্ট্যান্ডার্ডের অংশ হয়ে উঠেছে।

ডেমো

এই ভিডিওতে, স্ট্রিমিং এইচটিএমএল ব্যবহার করে একটি সাধারণ ফটো অ্যালবাম অ্যাপ্লিকেশন তৈরি করা হয়েছে:

আউট-অফ-অর্ডার স্ট্রিমিং ব্যবহার করে বাস্তবায়িত ফটো অ্যালবাম ডেমো ( উৎস )

প্রাথমিক লেআউটের পরে স্ট্যাটাস এবং ছবি উভয়ই এইচটিএমএল-এ স্ট্রিম করা হয়।

ব্যবহারের ক্ষেত্র

স্ট্রিমিং এইচটিএমএল-এর সাথে যুক্ত হলে এই আউট-অফ-অর্ডার প্যাচিং এইচটিএমএল-এর অনেক ব্যবহার রয়েছে:

আইল্যান্ড আর্কিটেকচার হলো অ্যাস্ট্রোর মতো ফ্রেমওয়ার্ক দ্বারা জনপ্রিয় একটি সাধারণ প্যাটার্ন, যেখানে স্ট্যাটিক HTML-এর উপরে কম্পোনেন্টগুলো স্বাধীনভাবে হাইড্রেট করা হয়। <template for> API-এর মাধ্যমে সরাসরি HTML-এ একই পদ্ধতিতে স্ট্যাটিক কন্টেন্ট পরিচালনা করা যায়। জাভাস্ক্রিপ্ট ফ্রেমওয়ার্কগুলোও আরও ইন্টারেক্টিভ আইল্যান্ড তৈরি করতে বা কম্পোনেন্ট পরিচালনার জন্য এটি ব্যবহার করতে পারে।
কন্টেন্ট প্রস্তুত হলেই ডেলিভারি করুন। এই আইল্যান্ড আর্কিটেকচারের কল্যাণে, অতিরিক্ত প্রসেসিংয়ের প্রয়োজন এমন কন্টেন্টের জন্য—যেমন, ডাটাবেস লুকআপ—কন্টেন্ট আটকে না রেখে, প্রস্তুত হলেই তা স্ট্রিম করা যায়। যদিও অনেক প্ল্যাটফর্ম HTML স্ট্রিমিংয়ের সুযোগ দেয়, কিন্তু HTML-এর ইন-অর্ডার প্রকৃতির কারণে প্রায়শই কন্টেন্ট আটকে রাখা হয়, অথবা জটিল জাভাস্ক্রিপ্ট DOM ম্যানিপুলেশনের আশ্রয় নিতে হয়। এখন আপনি অপেক্ষারত অবস্থাতেই স্ট্যাটিক কন্টেন্ট ডেলিভারি করতে পারেন, এবং তারপর HTML স্ট্রিমের শেষে আরও ব্যয়বহুল ও ডাইনামিক কন্টেন্ট যুক্ত করতে পারেন।
পেজ লোড পারফরম্যান্সের জন্য এইচটিএমএল (HTML) সর্বোত্তম ক্রমে উপস্থাপন করা যেতে পারে। এটিকে আরও এক ধাপ এগিয়ে নিয়ে, এইচটিএমএল প্রস্তুত হয়ে যাওয়ার পরেও এর ক্রম পরিবর্তন করা যায়। উদাহরণস্বরূপ, মেগা মেনু হলো একটি সাধারণ নেভিগেশন ফিচার, যাতে এমন অনেক এইচটিএমএল কোড থাকে যা পেজটি ইন্টারেক্টিভ না হওয়া পর্যন্ত ব্যবহারকারী দেখতে পান না। প্রাথমিক পেজ লোডের জন্য প্রয়োজনীয় অধিক গুরুত্বপূর্ণ এইচটিএমএল-কে অগ্রাধিকার দিতে, এইচটিএমএল ডকুমেন্টের শেষের দিকে এই বিশাল এইচটিএমএল অংশটি উপস্থাপন করা যেতে পারে। এইচটিএমএল-এর ক্ষেত্রে ক্রম আর কোনো বাধা নয়।

এগুলো কয়েকটি ব্যবহারের উদাহরণ মাত্র, এবং ডেভেলপাররা এই নতুন এপিআইটি কী কাজে ব্যবহার করেন তা দেখার জন্য আমরা অধীর আগ্রহে অপেক্ষা করছি।

সীমাবদ্ধতা এবং সূক্ষ্মতা

এপিআই-টিতে কিছু সীমাবদ্ধতা ও সূক্ষ্ম বিষয় রয়েছে, যেগুলো সম্পর্কে সচেতন থাকা প্রয়োজন:

নিরাপত্তাজনিত কারণে <template for> শুধুমাত্র একই প্যারেন্ট এলিমেন্টের মধ্যেকার প্রসেসিং নির্দেশাবলী আপডেট করতে পারে। সরাসরি <body> এলিমেন্টে <template for> যোগ করলে এটি পুরো ডকুমেন্ট ( <head> সহ) অ্যাক্সেস করতে পারে।
<?end> প্রসেসিং নির্দেশনাটি ঐচ্ছিক এবং এটি অনুপস্থিত থাকলে, <?start> এলিমেন্ট এবং ধারণকারী এলিমেন্টের শেষের মধ্যবর্তী বিষয়বস্তু প্রতিস্থাপিত হবে।
কোনো <template for> স্ট্রিমিং শুরু হওয়ার পরে প্রসেসিং নির্দেশাবলী স্থানান্তর করলে অপ্রত্যাশিত পরিণতি হতে পারে, যার ফলে নতুন কন্টেন্ট পুরানো অবস্থানেও স্ট্রিমিং হতে থাকে।
উল্লেখ্য যে, setHTML বা innerHTML প্রপার্টির মতো কোনো মেথড ব্যবহার করে ডাইনামিকভাবে <template for> যুক্ত করার সময়, পার্স করার পর টেমপ্লেটটির "প্যারেন্ট" একটি মধ্যবর্তী ডকুমেন্ট ফ্র্যাগমেন্ট হয়। এর মানে হলো, এই মেথডগুলো ব্যবহার করে HTML যুক্ত করলে তা বিদ্যমান DOM-কে পরিবর্তন করতে পারে না এবং প্যাচিংটি ফ্র্যাগমেন্টের ভেতরেই "ইন প্লেস" ঘটে। তবে, streamHTMLUnsafe মতো মেথড ব্যবহার করে স্ট্রিমিং করার সময় (যা শীঘ্রই আলোচনা করা হবে), কোনো মধ্যবর্তী ফ্র্যাগমেন্ট থাকে না, ফলে টেমপ্লেটগুলো বিদ্যমান কন্টেন্টকে প্রতিস্থাপন করতে পারে।

মানকরণের অবস্থা

<template for> অ্যাট্রিবিউটটি HTML স্ট্যান্ডার্ডের একটি অংশ হলেও, এটি এখনও সব ব্রাউজারে সমর্থিত নয়।

ভবিষ্যতের সম্ভাব্য সংযোজন

ভবিষ্যতে যোগ করার জন্য বিবেচনাধীন কিছু সম্ভাব্য সংযোজন হলো:

ক্লায়েন্ট সাইডে অন্তর্ভুক্ত করা যায়। উদাহরণস্বরূপ, <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>

পলিফিল

ক্রোম টিম একটি template-for-polyfill প্রকাশ করেছে যা এনপিএম-এ উপলব্ধ , যাতে সাইটগুলি অন্যান্য ব্রাউজারে এটি আসার আগেই এই নতুন কার্যকারিতাটি অবিলম্বে ব্যবহার করতে পারে।

যেহেতু এটি সরাসরি ব্রাউজারের এইচটিএমএল পার্সার আপডেট করতে পারে না, তাই এর কিছু সীমাবদ্ধতা রয়েছে, তবে সবচেয়ে প্রচলিত ব্যবহারগুলো এতে অন্তর্ভুক্ত। সাইটগুলোর উচিত অন্যান্য ব্রাউজারেও এটি পরীক্ষা করে দেখা।

নবায়নকৃত এইচটিএমএল সন্নিবেশ এবং স্ট্রিমিং পদ্ধতি

সব কন্টেন্ট HTML হিসেবে সরবরাহ করা যায় না। এই ক্ষেত্রে ক্রোমের কাজের দ্বিতীয় অংশের লক্ষ্য হলো জাভাস্ক্রিপ্ট ব্যবহার করে কন্টেন্ট আপডেট করা আরও সহজ করে তোলা।

জাভাস্ক্রিপ্ট ব্যবহার করে বিদ্যমান কোনো ডকুমেন্টে ডায়নামিকভাবে HTML যুক্ত করার একাধিক উপায় ইতিমধ্যেই রয়েছে:

setHTML
setHTMLUnsafe
innerHTML এবং outerHTML
createContextualFragment
insertAdjacentHTML

তবে, এগুলোর প্রত্যেকটি কিছুটা ভিন্ন উপায়ে কাজ করে এবং এর মধ্যে এমন কিছু সূক্ষ্মতা ও পার্থক্য রয়েছে যা ডেভেলপাররা সবসময় বিবেচনা নাও করতে পারেন:

নতুন কন্টেন্টটি কি ওভাররাইট করে নাকি যুক্ত করে?
তারা কি সম্ভাব্য বিপজ্জনক HTML পরিমার্জন করে—উদাহরণস্বরূপ, <script> ট্যাগ এস্কেপ করার মাধ্যমে?
তা না হলে, <script> কি চালানো উচিত?
তারা ট্রাস্টেড টাইপস-এর সাথে কীভাবে কাজ করে?

খুব কম ডেভেলপারই সততার সাথে ওই এপিআইগুলো দেখে সেগুলোর প্রত্যেকটির জন্য ওই প্রশ্নগুলোর উত্তর আত্মবিশ্বাসের সাথে দিতে পারবেন।

এর একটি বড় সীমাবদ্ধতা হলো, এগুলো কেবল আগে থেকে জানা সম্পূর্ণ HTML সেটের জন্যই ব্যবহার করা যায়, যখন HTML স্ট্রিম করার অনুমতি দেওয়া হয়। কার্যত, এর মানে হলো, কন্টেন্ট ঢোকানোর আগে আপনাকে পুরো কন্টেন্টটি ডাউনলোড করতে হবে, অথচ HTML-এর অন্যতম একটি শক্তিশালী দিকই হলো তাৎক্ষণিকভাবে কন্টেন্ট স্ট্রিম করে নেওয়ার ক্ষমতা। পেলোড ভাগ করে অথবা document.write মতো হ্যাকি ও অপ্রচলিত পদ্ধতি ব্যবহার করে সীমিতভাবে এর সমাধান করা যায়, কিন্তু সেগুলো নিজস্ব সমস্যা তৈরি করে।

স্ট্যাটিক এবং স্ট্রিমিং এপিআই-এর একটি নতুন সেট

Browser Support

ক্রোম বিদ্যমান setHTML এবং setHTMLUnsafe জন্য একগুচ্ছ নতুন এপিআই ও এক্সটেনশন তৈরি করেছে যা এই সমস্যাটির সমাধান করে, এবং এর পাশাপাশি স্ট্রিমিং কার্যকারিতাও চালু করেছে।

chrome://flags/#enable-experimental-web-platform-features ফ্ল্যাগটি ব্যবহার করে এগুলো Chrome 148 থেকে ডেভেলপারদের পরীক্ষার জন্য প্রস্তুত এবং Chrome 155-এ চালু করার পরিকল্পনা রয়েছে।

সেট বা প্রতিস্থাপন করার পদ্ধতির পাশাপাশি বিদ্যমান HTML-এর আগে বা পরে কন্টেন্ট সন্নিবেশ করার পদ্ধতিও রয়েছে। প্রতিটি পদ্ধতিরই স্ট্রিম সমতুল্য রয়েছে:

নতুন সন্নিবেশ এবং স্ট্রিমিং পদ্ধতি
পদক্ষেপ	স্থির	স্ট্রিমিং
এলিমেন্টের HTML বিষয়বস্তু সেট করুন	`setHTML(html, options);`	`streamHTML(options);`
সম্পূর্ণ এলিমেন্টটি এই HTML দিয়ে প্রতিস্থাপন করুন	`replaceWithHTML(html, options);`	`streamReplaceWithHTML(options);`
এলিমেন্টের আগে HTML যোগ করুন	`beforeHTML(html, options);`	`streamBeforeHTML(options);`
এলিমেন্টের প্রথম চাইল্ড হিসেবে HTML যোগ করুন।	`prependHTML(html, options);`	`streamPrependHTML(options);`
এলিমেন্টের শেষ চাইল্ড হিসেবে HTML যোগ করুন।	`appendHTML(html, options);`	`streamAppendHTML(options);`
এলিমেন্টের পরে HTML যোগ করুন	`afterHTML(html, options);`	`streamAfterHTML(options);`

এর কিছু Unsafe সংস্করণও রয়েছে, যা নিয়ে শীঘ্রই আলোচনা করা হবে। যদিও এগুলোর সংখ্যা অনেক বলে মনে হতে পারে—বিশেষ করে যখন আপনি Unsafe সমতুল্য সংস্করণগুলোও যোগ করবেন—কিন্তু একই নামকরণের রীতিটি পূর্বে উল্লিখিত সম্পর্কহীন মেথডগুলোর তুলনায় কোনটি কী কাজ করে তা আরও স্পষ্ট করে তোলে।

স্ট্যাটিক সংস্করণগুলো DOM স্ট্রিং আর্গুমেন্ট হিসেবে নতুন HTML গ্রহণ করে, সাথে ঐচ্ছিক অপশনগুলোও থাকে:

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

একটি 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});

"অনিরাপদ" পদ্ধতি

এছাড়াও প্রতিটি এপিআই-এর "অনিরাপদ" সংস্করণ রয়েছে:

"অনিরাপদ" সন্নিবেশ এবং স্ট্রিমিং পদ্ধতি
পদক্ষেপ	স্থির	স্ট্রিমিং
এলিমেন্টের HTML বিষয়বস্তু সেট করুন	`setHTMLUnsafe(html,options);`	`streamHTMLUnsafe(options);`
সম্পূর্ণ এলিমেন্টটি এই HTML দিয়ে প্রতিস্থাপন করুন	`replaceWithHTMLUnsafe(html, options);`	`streamReplaceWithHTMLUnsafe(options);`
এলিমেন্টের আগে HTML যোগ করুন	`beforeHTMLUnsafe(html, options);`	`streamBeforeHTMLUnsafe(options);`
এলিমেন্টের প্রথম চাইল্ড হিসেবে HTML যোগ করুন।	`prependHTMLUnsafe(html, options);`	`streamPrependHTMLUnsafe(options);`
এলিমেন্টের শেষ চাইল্ড হিসেবে HTML যোগ করুন।	`appendHTMLUnsafe(html, options);`	`streamAppendHTMLUnsafe(options);`
এলিমেন্টের পরে HTML যোগ করুন	`afterHTMLUnsafe(html, options);`	`streamAfterHTMLUnsafe(options);`

এই "অনিরাপদ" মেথডগুলো ডিফল্টরূপে স্যানিটাইজার বন্ধ করে দেয়, এবং আপনি চাইলে একটি কাস্টম স্যানিটাইজার নির্দিষ্ট করে দিতে পারেন। এই মেথডগুলো একটি ঐচ্ছিক 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 স্ট্যাটিক মেথডগুলো html আর্গুমেন্ট হিসেবে DOM String বা TrustedHTML উভয়ের সাথেই কাজ করে এবং স্যানিটাইজার ব্যবহারেরও সুযোগ দেয়। যদিও runScript এর মূল উদ্দেশ্যই হলো স্ক্রিপ্ট ব্যবহারের অনুমতি দেওয়া, আর একারণেই ডিফল্টভাবে কোনো স্যানিটাইজার ব্যবহৃত হয় না।

ব্যবহারের ক্ষেত্র

এই নতুন এপিআইগুলো ডেভেলপারদের জন্য বিদ্যমান পেজগুলোতে এইচটিএমএল যোগ করা সহজ করে তোলে এবং একই নাম ও অপশনসহ নতুন এপিআই যুক্ত করে। স্ট্রিমিং এপিআইগুলোর ফলে প্ল্যাটফর্মে সমস্ত নতুন কন্টেন্ট উপলব্ধ হওয়া পর্যন্ত অপেক্ষা করতে হয় না, যা পারফরম্যান্সের সুবিধা দেয়।

ব্যবহারের ক্ষেত্রগুলোর মধ্যে রয়েছে:

সিঙ্গেল পেজ অ্যাপে (SPA) বড় আকারের কন্টেন্ট আপডেটের ডাইনামিক স্ট্রিমিং। পূর্বে যেমন উল্লেখ করা হয়েছে, বর্তমান SPA আর্কিটেকচারের একটি বড় অসুবিধা হলো এটি প্রাথমিক HTML লোডের স্ট্রিমিং প্রকৃতির সুবিধা নিতে পারে না—এখন পর্যন্ত!
এইচটিএমএল ফুটারের মতো সাধারণ কন্টেন্ট যুক্ত করা। জাভাস্ক্রিপ্ট এপিআই ব্যবহার করে আপনি পার্সিয়াল কন্টেন্ট নিয়ে এসে পেজে যুক্ত করতে পারেন, যা ক্যাশিংয়ের সুবিধা দেয় এবং প্রতিটি পেজ পাঠানোর সময় সেগুলোর পুনরাবৃত্তি করতে হয় না। তবে, এটি চালানোর জন্য জাভাস্ক্রিপ্টের উপর নির্ভরশীল হওয়ায়, এটি শুধুমাত্র সেইসব কন্টেন্টের জন্য ব্যবহার করা উচিত যা প্রাথমিক লোডের সময় দৃশ্যমান হবে না।

আবারও বলছি, এগুলো মাত্র কয়েকটি উদাহরণ এবং আপনারা কী উদ্ভাবন করেন তা দেখার জন্য আমরা অধীর আগ্রহে অপেক্ষা করছি!

সীমাবদ্ধতা এবং সূক্ষ্মতা

এই নতুন এপিআইগুলোতে কিছু সীমাবদ্ধতা ও সূক্ষ্ম বিষয়ও রয়েছে, যেগুলো সম্পর্কে সচেতন থাকা প্রয়োজন:

ট্রাস্টেড টাইপস এপিআই-এর সাথে স্ট্রিমিং ইন্টিগ্রেশনের জন্য একটি নতুন createParserOptions মেথড ব্যবহার করতে হয়, যা যেকোনো এইচটিএমএল সেটিং অপারেশনে একটি স্যানিটাইজার ইনজেক্ট করার সুযোগ দেয়। ট্রাস্টেড টাইপস ইন্টিগ্রেশন সম্পর্কে আরও বিস্তারিত জানতে এক্সপ্লেনারটি দেখুন।
<template for> এর মতোই, যে এলিমেন্টগুলোতে স্ট্রিমিং করা হচ্ছে সেগুলোকে সরানো হলে অপ্রত্যাশিত পরিণতি বা স্ট্রিমিং ত্রুটি তৈরি হতে পারে।
streamHTMLUnsafe অনেক দিক থেকে মূল পার্সারের মতোই কাজ করে, যার মধ্যে রয়েছে মূল ডকুমেন্টে <template for> নির্দেশাবলী যুক্ত হওয়ার সাথে সাথেই সেগুলোর প্রক্রিয়াকরণ এবং স্ট্রিমের শেষ পর্যন্ত defer স্ক্রিপ্টগুলোকে স্থগিত রাখা।

মানকরণের অবস্থা

নতুন ইনসারশন এবং স্ট্রিমিং পদ্ধতিগুলো এইচটিএমএল স্ট্যান্ডার্ডে যুক্ত করার প্রক্রিয়া চলছে , কিন্তু এগুলো এখনও সব ব্রাউজারে সমর্থিত নয়।

পলিফিল

ক্রোম টিম একটি html-setters-polyfill প্রকাশ করেছে যা npm-এ উপলব্ধ , যাতে সাইটগুলি অন্যান্য ব্রাউজারে এটি আসার আগেই এই নতুন কার্যকারিতাটি অবিলম্বে ব্যবহার করতে পারে।

উল্লেখ্য যে, এই পলিফিলটি স্ট্রিম করে না, বরং এটি বাফার করে এবং কাজ শেষ হলে প্রয়োগ করে। এটি কার্যকারিতার চেয়ে এপিআই (API) কাঠামোর জন্য বেশি উপযোগী একটি পলিফিল।

এছাড়াও, নিরাপদ কন্টেন্ট সেট করা setHTML এবং Sanitizer API-এর উপর নির্ভর করে, যা Safari-তে সমর্থিত নয়।

এই দুটি একসাথে ব্যবহার করুন

যদিও এগুলি দুটি আলাদা এপিআই, এদের সমন্বয়ের মাধ্যমেই আসল শক্তি প্রকাশ পায়। এইচটিএমএল-এ নতুন <template for> এলিমেন্ট স্ট্রিম করার মাধ্যমে, আপনি ডম-এ আলাদা জাভাস্ক্রিপ্ট রেফারেন্স দিয়ে প্রতিটি অংশকে সরাসরি টার্গেট না করেই কন্টেন্টের বিভিন্ন অংশ ডাইনামিকভাবে আপডেট করতে পারেন।

একটি সাধারণ SPA-ধাঁচের পেজ লোড বাস্তবায়ন করা যেতে পারে, যার জন্য প্রসেসিং নির্দেশনাসহ একটি আউটলাইন পেজ লোড করতে হবে এবং তারপর প্রতিটি নতুন পেজের টেমপ্লেটগুলোকে HTML-এর একেবারে নিচে স্ট্রিম করে সেই প্রসেসিং নির্দেশনাগুলোর সাথে খাপ খাইয়ে নিতে হবে।

নিঃসন্দেহে এই দুটি এপিআই-এর আরও সম্ভাবনা ও ব্যবহারের ক্ষেত্র রয়েছে, তাই আমাদের (সীমিত!) কল্পনাকে আপনার পথে বাধা হতে দেবেন না। আংশিক আপডেট পরিচালনা সহজ করার মাধ্যমে আপনি কিছু বয়লারপ্লেট কোড কমাতে, আপডেট আরও সহজ করতে এবং ওয়েবের জন্য নতুন সম্ভাবনা উন্মোচন করতে পারেন!

ডিক্লারেটিভ পার্শিয়াল আপডেটস প্রোজেক্টের অধীনে ক্রোম আরও কয়েকটি এপিআই নিয়ে কাজ করছে, কিন্তু আমরা এই প্রথম দুটি আপনাদের হাতে তুলে দিতে পেরে আনন্দিত। আমরা আপনাদের আপডেট জানাতে থাকব এবং এই ক্ষেত্রে আরও কিছু উপলব্ধ হলে জানিয়ে দেব।

অচল স্ট্রিমিং

সাধারণ HTML এলিমেন্টের পরিবর্তে প্রসেসিং ইনস্ট্রাকশন কেন?

ডেমো

ব্যবহারের ক্ষেত্র

সীমাবদ্ধতা এবং সূক্ষ্মতা

মানকরণের অবস্থা

ভবিষ্যতের সম্ভাব্য সংযোজন

পলিফিল

নবায়নকৃত এইচটিএমএল সন্নিবেশ এবং স্ট্রিমিং পদ্ধতি

স্ট্যাটিক এবং স্ট্রিমিং এপিআই-এর একটি নতুন সেট

textStream() সুবিধাজনক পদ্ধতি

options

"অনিরাপদ" পদ্ধতি

ব্যবহারের ক্ষেত্র

সীমাবদ্ধতা এবং সূক্ষ্মতা

মানকরণের অবস্থা

পলিফিল

এই দুটি একসাথে ব্যবহার করুন

`textStream()` সুবিধাজনক পদ্ধতি

`options`