Sırasız (OOO) HTML Akışı

Sırasız (OOO) HTML Akışı (Bildirim temelli kısmi güncellemeler olarak da bilinir), HTML'nin geleneksel "yukarıdan aşağıya" doğrusal işlenmesine bir alternatiftir. Geliştiricilerin, dokümanın başlarında yer tutucular tanımlamasına ve bunları aynı ağ akışında daha sonra gelen veya yeni zorunlu JavaScript akış API'leri aracılığıyla gelen içeriklerle "yamalamasına" olanak tanır.

Hızlı Genel Bakış

Bu özellik iki temel mekanizmadan oluşur:

1. Bildirim temelli yama (HTML tabanlı): Sunucudan akış sırasında DOM'daki içeriği değiştirmek için yeni işleme talimatlarını (<?marker>, <?start>, <?end>) ve <template for> öğesini kullanır.
2. Zorunlu ayarlama ve akış (JS tabanlı): HTML'nin ayarlanmasına veya okunabilir akışların yerel performans ve isteğe bağlı komut dosyası yürütme ile doğrudan DOM öğelerine aktarılmasına olanak tanıyan bir dizi yeni yöntem (ör. streamHTML(), setHTMLUnsafe()).

En İyi Uygulamalar

• Ekranın üst kısmındaki içeriğe öncelik verin: Önemli kullanıcı arayüzü öğelerini (başlık, hero, birincil gezinme, birincil içerik) önce yayınlayın. Yorumlar, reklamlar veya ilgili içerikler gibi "pahalı" ya da daha düşük öncelikli bileşenler için yer tutucular kullanın.
• Doğal yükleme durumlarını uygulama: Yedek içeriği sarmalamak için <?start> ve <?end> işaretlerini kullanın. Tarayıcı, ilgili <template for> geldiğinde bu işaretler arasındaki her şeyi otomatik olarak değiştirir.
• Cumulative Layout Shift (CLS) değerini en aza indirin: Yer tutucular için her zaman sabit boyutlar sağlayın. Nihai içerik boyutu bilinmiyorsa yer ayırmak ve rahatsız edici kaymaları önlemek için iskelet ekranlar veya CSS aspect-ratio kullanın.
• Erişilebilirlik ve odak yönetimi: Sırasız güncellemelerin ekran okuyucu kullanıcılarının kafasını karıştırabileceğini unutmayın. Kritik güncellemeler için aria-live bölgelerini kullanın ve etkin öğeyi içeren bir yer tutucu değiştirilirse odağın kaybolmadığından emin olun.

Uygulama Ayrıntıları

1. Bildirime Dayalı HTML İşaretçileri

Tarayıcı, içeriğin nerede yamalanması gerektiğini belirlemek için belirli işleme talimatlarını arar.

<!-- A simple insertion point -->
<div id="sidebar">
  <?marker name="dynamic-comments">
</div>

<!-- A replacement range with loading state -->
<main>
  <?start name="main-content">
    <div class="skeleton">Loading content...</div>
  <?end>
</main>

... (other content) ...

<!-- Later in the same stream, provide the content -->
<template for="dynamic-comments">
  <div class="comments">...</div>
</template>

<template for="main-content">
  <article>
    <h1>The Real Content</h1>
    <p>This replaces the skeleton div automatically.</p>
  </article>
</template>

Bir <template>, ekleme noktasının yerini aldığında bu ekleme noktası artık mevcut olmaz ve tekrar kullanılamaz. Ancak <template>, akışta daha sonra kullanılabilecek ekleme noktaları içerebilir.

 <?start name="replaced-content">
  <div class="skeleton">
<?end>
<!-- Later in the same stream, provide initial content -->
<template for="replaced-content">
  <?start name="replaced-content">
    <div>Quickly computed result</div>
  <?end>
</template>
<!-- Later in the same stream, provide full content -->
<template for="replaced-content">
  <?start name="replaced-content">
    <div>Full result</div>
  <?end>
</template>

2. Emir kipi JS akışı

Tarayıcı, DOM'u statik olarak (bir dizeden) veya akış yoluyla güncellemek için 24 yöntemden (her biri 4 varyasyona sahip 6 işlem) oluşan bir paket sunar.

API Referans Matrisi

Temel Kavramlar

• Güvenli ve Güvenli Olmayan:
  • Güvenli yöntemler (ör. setHTML()), <script> etiketleri gibi tehlikeli olabilecek içerikleri kaldırmak için varsayılan olarak yerleşik bir temizleyici kullanır. Varsayılan temizleyiciye ek olarak uygulanacak seçeneklerde özel bir Sanitizer nesnesi iletebilirsiniz.
  • Güvenli olmayan yöntemler (ör. setHTMLUnsafe()) varsayılan olarak temizleme yapmaz ancak yine de özel bir Sanitizer iletebilirsiniz. Komut dosyalarının yeni içerikte yürütülmesine izin vermek için seçeneklerde { runScripts: true } değerini açıkça iletmeniz gerekir. ÖNEMLİ: Güvenli olmayan yöntemleri yalnızca güvenli yöntemlerin işe yaramayacağı güvenilir içeriklerle kullanın.
• Statik ve akış:
  • Statik yöntemler bir dize (veya TrustedHTML) alır ve hemen uygular.
  • Akış yöntemleri bir WritableStream döndürür. Bu sayede, içeriği (ör.bir fetch yanıtından) doğrudan DOM'a aktarabilirsiniz. Tarayıcı, içeriği parçalar halinde geldikçe kademeli olarak oluşturur.

Örnek: Getirme yanıtı akışı

Getirme yanıtlarını, parçaları manuel olarak işlemeden doğrudan DOM'a aktarabilirsiniz.

const main = document.querySelector('main');
const response = await fetch('/api/partial-update');

// Pipe the stream directly into the element
await response.body
  .pipeThrough(new TextDecoderStream())
  .pipeTo(main.streamHTMLUnsafe({ runScripts: true }));

// Or use the `textStream()` convenience method which streams directly without needing the intermediate `TextDecoderStream()` step
await response
  .textStream()
  .pipeTo(main.streamHTMLUnsafe({ runScripts: true }))

Kullanım Alanı Referans Matrisi

• Ada mimarisi: Tam bir çerçeve çalışma zamanı olmadan statik HTML'nin üzerinde bağımsız etkileşimli bileşenleri etkinleştirin.
• Ertelenen "Pahalı" Bloklar: Bir sayfanın kabuğunu hemen yayınlayın ve veritabanı açısından yoğun bileşenleri kullanılabilir hale geldikçe yayınlayın.
• Tek Sayfalık Uygulama (SPA) Güncellemeleri: Tam bir JSON yükü ve manuel DOM oluşturma işlemini beklemek yerine streamHTML() kullanarak SPA'larda büyük kullanıcı arayüzü geçişlerini aktarın.

Anti-Patterns & Warnings (DO NOT DO THIS)

• Her şey için OOO akışını kullanmayın. Bir sayfanın aşırı parçalanması, akışın karmaşıklığını artırabilir ve tarayıcı küçük düğümleri yamalamak için çok fazla zaman harcarsa içeriği geciktirebilir.
• Güvenilir Türler'i yoksaymayın. Güvenilir Türler'in zorunlu kılındığı ortamlarda *Unsafe yöntemlerini kullanırken gerekirse temizlenmiş bir politika nesnesi ilettiğinizden emin olun.
• Komut dosyası yürütme sırasını varsaymayın. <template for> içindeki komut dosyaları, dokümana eklenir eklenmez yürütülür. Bu şablonların, diğer ertelenen şablonlara göre belirli bir sırayla yürütüleceğini varsaymayın.
• Polyfill stratejisi olmadan kullanmayın. Bu özellik Baseline olana kadar, gerekli tarayıcılarınızı desteklemek için bir yedek planınız olduğundan emin olun veya polyfill (html-setters-polyfill ve template-for-polyfill) kullanın.

Yedek stratejiler

Desteklemeyen tarayıcılar için API yüzeyini taklit etmek üzere template-for-polyfill ve html-setters-polyfill gibi polyfill'leri kullanabilirsiniz.

html-processing-instructions desteği olmayan tarayıcılar <?marker>, <?start> ve <?end> öğelerini yorum olarak ayrıştırır. template-for-polyfill bu yorumları işaretleyici olarak tanımaya devam eder. Bu nedenle, tüm tarayıcılar için aynı işleme talimatı söz dizimini kullanın. İşaretçileri, desteklemeyen tarayıcılar için HTML yorumları veya öğeleri olarak yeniden yazmayın.