Deklaratywne aktualizacje częściowe

Barry Pollard
Noam Rosenthal

Opublikowano: 19 maja 2026 r.

Internet już dawno przestał być statycznym medium opartym na dokumentach, jakim był na początku. Nowoczesne, zaawansowane aplikacje internetowe są używane przez wszystkich z wielu powodów – od komunikacji, zakupów i korzystania ze szczegółowych treści po zarządzanie złożonym życiem.

HTML, pomimo wszystkich swoich zalet, nadal jest dostarczany w kolejności od góry do dołu, bez względu na to, kiedy treść jest gotowa lub kiedy użytkownik ją konsumuje. CSS umożliwia zmianę kolejności treści, ale często wiąże się to z poważnymi skutkami ubocznymi w zakresie dostępności. JavaScript umożliwia manipulowanie modelem DOM za pomocą różnych interfejsów API, co pozwala częściowo obejść to ograniczenie, ale często wymaga to rozbudowanej składni lub tworzenia drzew DOM, które można podłączyć do HTML.

Skuteczność jest niezwykle ważna w przypadku internetu ze względu na charakter klienta i serwera, ale często podejmuje się nieoptymalne decyzje, aby obejść kolejność HTML, co spowalnia działanie. Może to obejmować czekanie, aż cała strona będzie gotowa, lub używanie rozbudowanego frameworka do dostarczania komponentów w sposób asynchroniczny. Popularność frameworków JavaScriptu pokazuje, że programiści wolą model oparty na komponentach od sztywnego modelu dokumentu, który był podstawą internetu w jego początkach.

Zespół Chrome rozważał ten problem i opracował nowe dodatki do platformy internetowej pod nazwą Deklaratywne aktualizacje częściowe.

Dwa nowe zestawy interfejsów API ułatwiają dostarczanie kodu HTML w mniej liniowy sposób, zarówno w przypadku kolejności w dokumencie HTML, jak i w przypadku łatwiejszych sposobów dynamicznego wstawiania kodu HTML do istniejących dokumentów za pomocą nowych interfejsów API JavaScript. Są one gotowe do testowania przez deweloperów w Chrome 148 przy użyciu flagi chrome://flags/#enable-experimental-web-platform-features. Dostępne są też polyfille, które umożliwiają natychmiastowe korzystanie z tych nowych interfejsów API, nawet w przeglądarkach, które jeszcze ich nie obsługują.

Te dodatki do platformy internetowej są standaryzowane przy pozytywnych opiniach innych dostawców przeglądarek i ścieżek standaryzacji. Odpowiednie standardy są w trakcie aktualizacji, aby uwzględnić te nowe interfejsy API.

Strumieniowanie poza kolejnością

Pierwszy zestaw zmian to nowe interfejsy API do przesyłania strumieniowego w nieodpowiedniej kolejności, które używają elementu HTML <template> i symboli zastępczych instrukcji przetwarzania. Na przykład:

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

...

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

Instrukcje przetwarzania istnieją w XML od dawna, ale w HTML są traktowane jako komentarze i ignorowane. Ten nowy interfejs API zmienia to i wprowadza instrukcje przetwarzania do HTML. Gdy przeglądarka zobaczy instrukcje przetwarzania <?marker name="placeholder">, nie podejmuje od razu żadnych działań – podobnie jak wcześniej – ale można się do nich odwołać później.

Element <template> wyszukuje odpowiednie instrukcje przetwarzania za pomocą atrybutu name i zastępuje nimi treść. W tym przypadku po przeanalizowaniu DOM będzie wyglądać tak:

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

Oprócz atrybutu <?marker> dla zamienników istnieją też znaczniki zakresu <?start> i <?end>, które umożliwiają wyświetlanie tymczasowych treści zastępczych przed przetworzeniem szablonu:

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

...

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

W tym przypadku Loading… wyświetla się do momentu, gdy pojawi się <template>, a następnie zostaje zastąpiony nową treścią.

W szablonach można też umieszczać instrukcje przetwarzania, aby umożliwić wiele aktualizacji:

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

Po przetworzeniu daje to taki kod HTML:

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

Z końcową instrukcją przetwarzania na końcu, na wypadek gdyby do dokumentu dodano później więcej <template for="results">.

Prezentacja

W tym filmie pokazujemy, jak zaimplementować podstawową aplikację do albumu ze zdjęciami za pomocą strumieniowego HTML:

Wersja demonstracyjna albumu ze zdjęciami zaimplementowana za pomocą strumieniowania poza kolejnością (źródło)

Zarówno stan, jak i zdjęcia są przesyłane strumieniowo do kodu HTML po początkowym układzie.

Przypadki użycia

Istnieje wiele przypadków użycia tego kodu HTML do aktualizacji poza kolejnością w połączeniu ze strumieniowaniem HTML:

  • Architektura wyspowa Popularny wzorzec spopularyzowany przez platformy takie jak Astro to architektura wysp, w której komponenty są renderowane niezależnie na statycznym kodzie HTML. Interfejs <template for> API umożliwia obsługę treści statycznych w podobny sposób bezpośrednio w HTML. Frameworki JavaScriptu mogą też używać tego do tworzenia bardziej interaktywnych wysp lub obsługi komponentów.
  • Dostarczaj treści, gdy są gotowe. Dzięki tej architekturze wysp treści mogą być przesyłane strumieniowo, gdy są gotowe, zamiast być wstrzymywane z powodu treści wymagających dodatkowego przetwarzania, np. wyszukiwania w bazie danych. Wiele platform umożliwia przesyłanie strumieniowe HTML, ale ze względu na kolejność elementów HTML treść jest często opóźniana lub wymaga złożonych manipulacji DOM w JavaScript. Teraz możesz dostarczać statyczne treści w trakcie oczekiwania, a następnie na końcu strumienia HTML umieszczać treści wymagające większych nakładów.
  • Kod HTML może być dostarczany w optymalnej kolejności, co zwiększa wydajność wczytywania strony. Możesz zmienić kolejność nawet wtedy, gdy jest już gotowa. Przykładem są mega menu, które są popularną funkcją nawigacyjną zawierającą dużo kodu HTML, który użytkownik zobaczy dopiero wtedy, gdy strona stanie się interaktywna. Ten duży fragment kodu HTML może być dostarczany później w dokumencie HTML, aby nadać priorytet ważniejszemu kodowi HTML potrzebnemu do początkowego wczytania strony. Kolejność nie jest już problemem w przypadku HTML.

To tylko niektóre przypadki użycia. Z niecierpliwością czekamy na to, do czego deweloperzy wykorzystają ten nowy interfejs API.

Ograniczenia i subtelności

Interfejs API ma kilka ograniczeń i subtelności, o których warto pamiętać:

  • Ze względów bezpieczeństwa <template for> może aktualizować instrukcje przetwarzania tylko w ramach tego samego elementu nadrzędnego. Dodanie elementu <template for> bezpośrednio do elementu <body> daje mu dostęp do całego dokumentu (w tym do elementu <head>).
  • Instrukcja przetwarzania <?end> jest opcjonalna. Jeśli jej brakuje, zawartość między elementem <?start> a końcem elementu zawierającego zostanie zastąpiona.
  • Przeniesienie instrukcji przetwarzania po rozpoczęciu przesyłania strumieniowego <template for> może mieć nieoczekiwane konsekwencje, ponieważ nowe treści będą nadal przesyłane strumieniowo do starej lokalizacji.
  • Pamiętaj, że podczas dynamicznego wstawiania <template for> za pomocą metody takiej jak setHTML lub