У веб-браузерах також було введено потокову передачу HTML поза порядком, шаблон, який дозволяє користувачам переглядати та взаємодіяти зі сторінкою до її повного завантаження. За цією пропозицією браузер міг би виправляти заповнювач, коли дані надходять через декларативний HTML або відповідний API JavaScript. Chrome 150 поставляється з декларативними функціями, а Safari та Firefox оголосили про підтримку. Декларативна […]
У веб-браузерах також було введено потокову передачу HTML поза порядком, шаблон, який дозволяє користувачам переглядати та взаємодіяти зі сторінкою до її повного завантаження. За цією пропозицією браузер міг би виправляти заповнювач, коли дані надходять через декларативний HTML або відповідний API JavaScript. Chrome 150 поставляється з декларативними функціями, а Safari та Firefox оголосили про підтримку.
Декларативна пропозиція за замовчуванням вводить позачергове потокове передавання. через новий елемент for атрибут. Розробник оголошує одну точку вставки, напр. ) або обернути тимчасовий резервний вміст (наприклад, Loading profile...).
Коли сервер транслює матч Далі в документі аналізатор HTML відповідає ідентифікатору та і Видаляє маркери та проміжні резервні вузли між ними та вставляє вміст шаблону в цю позицію DOM. Розробники також можуть включити інструкції з обробки у свої шаблони, щоб дозволити багаторазове оновлення.
<ul id="results">
<?start name="results">
Loading…
<?end>
ul>
<template for="results">
<li>Result Oneli>
<?marker name="results">
template>
...
<template for="results">
<li>Result Twoli>
<?marker name="results">
template>
...
Після аналізу та обробки шаблону HTML кінцевий HTML на сторінці виглядатиме так:
<ul id="results">
<li>Result Oneli>
<li>Result Twoli>
<?marker name="results">
ul>
Щоб запобігти міжкомпонентним ін’єкційним атакам (наприклад, ненадійна розмітка викрадення конфіденційних форм або цілей навігації в іншому місці документа), Лише інструкції з обробки виправлень (вузли розмітки, що починаються з ) можуть бути суворо виправлені. delimiters) located within its immediate parent element (i.e., its direct siblings and their descendants). As an explicit specification exception, placing the template directly under grants it global document scope, allowing deferred updates to reach elements inside the tag or nested structural containers.
To extend streaming workflows to client-side scripting, the initiative pairs these markup primitives with a unified suite of static and streaming DOM insertion methods. The specification defines a predictable matrix of operations: setHTML, replaceWithHTML, beforeHTML, prependHTML, appendHTMLі afterHTMLвідповідний метод потокової передачі (streamHTML, streamAppendHTMLі т.д.) і *Unsafe підвид. Дзвінок streamHTMLUnsafe()Наприклад, це поверне: WritableStream Він поступово передає вхідні блоки до внутрішнього аналізатора фрагментів HTML. Fetch API доповнює це. response.textStream() помічник:
const feedContainer = document.querySelector("#feed-container");
const response = await fetch("/api/feed-stream");
await response.textStream().pipeTo(
feedContainer.streamHTMLUnsafe({ runScripts: false })
);
Ця пропозиція стандартизує методи рендерингу, які інтерфейсні фреймворки давно реалізували різними способами шляхом інтерналізації позачергової доставки та рендерингу в механізм браузера. Спочатку він був розроблений Facebook BigPipe у 2009 році, а пізніше популяризувався такими фреймворками, як React (з потоковою передачею Suspense) і Next.js. Ці різні техніки мають однакову мету. Йдеться про те, щоб частини сторінки з повільними обчисленнями не блокували всю сторінку.
Примітиви декларативної розмітки ( і цільові інструкції з обробки) вбудовані в стандарт WHATWG HTML Living Standard із початковою підтримкою, що постачається з Chrome і Edge 150. textStream() У версії 151 супутній метод потокової передачі JavaScript DOM продовжує інший процес стандартизації. WebKit оголосив про позитивну позицію щодо стандарту, а Mozilla висловила позитивний інтерес.
