HTML5 oyunları neden daha hızlı yüklenir

Giriş: Hız = Dönüşüm

Tarayıcıdaki oyunlar için'daha hızlı yükler ", daha az bayt, daha az istek, ilk kareyi daha az bekleme anlamına gelir. HTML5 yığını (HTML/CSS/JS/WebGL/WASM), modern teslimat ve kutudan önbelleğe alma sağlar; bu, kısa TTFB, düşük LCP ve hızlı İlk Etkileşim Süresi (TTFI) anlamına gelir.

1) Ağ ve ulaşım: web neden varsayılan olarak daha hızlı?

HTTP/2 и HTTP/3 (QUIC)

Çoğullama: Düzinelerce varlık (sprite, kod parçaları) tek bir bağlantıda gelir - TCP "fırtınaları" yoktur.

0-RTT и TLS 1. 3: hızlı el sıkışma, ilk bayta daha kısa yol.

İş parçacığı önceliklendirme: kritik varlıklar (motor başlatma, ana atlas) daha yüksek öncelik alır.

CDN ve kenar önbelleği

POP düğümleri, oynatıcı önbelleğine daha yakın değişmez varlıklar (karma adları).

'bayat-while-revalidate', eski versiyonu göstermenize ve aynı anda yenisini çekmenize izin verir.

Başlıklar (reçete):


Önbellek Kontrolü: genel, maksimum yaş = 31536000, değişmez
İçerik Kodlaması: br// для JS/CSS (Brotli)
Çapraz Köken-Kaynak-Politikası: çapraz köken
Zamanlama-İzin Ver-Kökeni:

2) Paketleme ve kod bölme: "ihtiyacınız kadar" teslim etme

ES modülleri ve dinamik içe aktarma

Kodu seviye paketlerine ayırın: "lobi", "öğretici", "seviye 1-3", "mağaza".

İlk ekran yalnızca başlatma yığınını alır (50-150 KB gz/br). Gerisi talep üzerine.

Ağaç sallama ve küçültme

Kullanılmayan motor/kütüphane API'lerini kaldırın.

Terser/LightningCSS + modülü sideEffects = ölü kodu agresif bir şekilde kesmek için false.

Dinamik yükleme örneği:

js
//BattleRenderer'ı yalnızca battle const {BattleRenderer} = başlangıcında yükleyin ve import ('./chunks/battleRenderer'ı bekleyin. js ');
Yeni BattleRenderer (). mount (tuval);

3) Varlıklar: Ana bayt tasarrufu

Görüntüler

UI/illüstrasyonlar için WebP/AVIF: PNG/JPEG'e karşı boyut olarak % eksi 25-50.

Sprite listeleri ve atlaslar sorguları ve ek yükü azaltır.

Cihaz/İstemci İpuçları: 'Accept-CH: DPR, Width, Viewport-Width' - sunucu/kenar istenen boyutu verir.

3D/Textures

Temel/UASTC (KTX2): GPU dokularının evrensel sıkıştırması (ETC1S/ASTC/BC) - bir dosya yükleyin, video kartı formatında açın.

Meep seviyeleri aşamalı olarak yüklenir: önce düşük kalite - sonra örnek.

Ses

MP3/AAC yerine Opus - düşük bitratlarda daha iyi; Talep üzerine akış parçaları (bölge müziği - bölgeye girdikten sonra).

Video/cutscenes

Kısa videolar için WebCodecs/MediaSource ve LL-HLS; Poster ve ilk bölüm - ön yükleme, gerisi - tembel.

4) Motor başlatma: önce "iskelet", sonra'et "

Tembel sahne grafiği

Sadece kritik sahne düğümlerini (UI, kamera, arka plan) yüklüyoruz. Modeller/gölgelendiriciler - gerektiği gibi.

Arka plan varlık işleri: Önyükleyici bir öncelik kuyruğu tutar.

"Sıcak önbellek'olarak Servis Elemanı (SW)

İlk ziyarette yüklenir ve istemci çekirdeğini, atlas manifestosunu, gölgelendiricileri önbelleğe alır.

Yeniden giriş yaptıktan sonra - çevrimdışı hazırlık ve TTFI anında ~.

SW stratejisi örneği (basitleştirilmiş):

Js kendini. AddEventListener ('getir', e => {
e. responseIle (önbellekler. aç ('oyun-v12'). Sonra (async c => {
const cached = await c. match (e. Talep);
const fresh = fetch (e. Talep). Sonra (r => {c. put (e. Talep, r. klon ()); Dönüş r;});
return önbelleğe alındı        Taze;
}));
});

5) WebGL ve WASM: Tarayıcıda'yerli "hız

WebGL/WebGPU: gölgelendiriciler ve oluşturma - GPU'da; CPU mantık üzerinde kalır.

WebAssembly (WASM): Motorun ağır parçaları (fizik, yol, açma dokuları) neredeyse yerel kütüphaneler gibi çalışır.

Web Workers: doku/ses kod çözme, seviye ayrıştırma, kafesler hazırlama - ana akım kilitleri yok.

İlk Çerçeve Zamanı (FTF) optimizasyonu:

FTF uğruna, "güzelliği" feda ediyoruz: düşük poli/düşük res yükleyin, daha sonra yüksek res akışı yapın.

6) Yüklemeye öncelik verilmesi: önce önemli olanın geçmesine izin verin

HTML ipuçları:

html
<link rel = "preconnect" href = "https ://cdn. örnek. com">
<link rel = "preload" as = "script" href = "/app. a1b2c3. js" crossorigin>
<link rel = "preload" as = "image" href = "/atlases/ui @ 1x. avif" imagesrcset = "/ui @ 2x. avif 2x">

Getir öncelikleri ve 'fetchpriority'

' fetchpriority =" high"' - JS ve UI atlaslarını başlatma.

Varlıkların geri kalanı kritik yola müdahale etmeyecek şekilde 'düşük'.

7) "Hızlı" HTML5 oyunlarının metrikleri ve SLO'su

Hedefler:

TTFB <200-300 ms (CDN ile).
LCP (lobi) <1. 8–2. Mobilde 5 saniye.
Zaman-İlk-Etkileşim (TTFI) <2-3 с.
İlk Frame Oyun İçi <1-2 s sahnenin başlangıcından sonra.
Toplam İndirme (ilk çalıştırma): Lobi başına ≤ 1-3 MB ≤ ilk savaş/seviyeye kadar 5-10 MB.
Yeniden başlatma: SW önbellek sayesinde 0-200 KB ~.

Gözlenebilirlik: Ağlarda/geo/cihazlarda RUM olayları, Web Vitals, bootloader ilerlemesi, zaman aşımı hataları.

8) Boru hattı montajı: 'ince bir ilk bayt "nasıl elde edilir

1. Paket analizi (source-map-explorer, webpack-bundle-analyzer).

2. Sahneler/özellikler tarafından kod bölünmesi, "kalın" polifillerin kaldırılması (modern tarayıcıları hedefliyoruz).

3. Küçültme: Terser/ESBuild + CSS Küçültme, dev mantık kaldırma.

4. Görüntüler: 'keskin/squoosh' AVIF/WebP, 'srcset' üretimi.

5. Dokular: KTX2 içinde zarf (Basis/UASTC), mips oluşturma.

6. Ses: Opus VBR 48-96 kbps, klipler - kısaltılmış önizlemeler.

7. Manifest assets (artifact) + hash names + 'immutable'.

8. PWA/SW: kernel ön önbellek, 'stale-while-revalidate'ile atlasların çalışma zamanı önbelleği.

9. CDN: Ön yükleme-ipuçları, 'Vekil-Kontrol', Etiketle Yumuşak Temizleme.

9) Çalışma zamanı performansı: oyunu yükledikten sonra "uçmak" için

Ana iş parçacığı bütçesi: JS-taski <50 ms tutun; ağır - İşçilerde.

Toplu oluşturma: grup çizim çağrıları, instancing kullanın.

GC basıncı: dizileri/tamponları kiralayın, oyun tiklerinde "çöp'ten kaçının.

Uyarlanabilir FPS: Oyuna dokunmadan FPS düştüğünde post-efektleri azaltın.

10) Anti-desenler (oyunu yavaşlatır)

Bir monolitik paket 5-15 MB "başlamak için".

GPU sıkıştırması olmadan PNG dokuları, KTX2/Basis yok.

Varlık yükleyicide 'rng % N' (belirleme daha önemlidir - ancak bu aynı zamanda PF ile ilgilidir).

Önbellek başlığı olmayan veya karma adı olmayan istekler - her ziyaret "soğuk".

Tüm dünya için polifiller (IE, eski Safari) - megabaytları boşuna çekiyor.

SW/ön yükleme eksikliği - tekrarlanan ziyaretler ilki kadar zordur.

"Ağır" fontlar ('unicode-range've' font-display: swap 'içermeyen çeşitli stiller).

11) Hızlı HTML5 oyun kontrol listesi

Ağ ve CDN

HTTP/3 etkin; CDN/sağlayıcılarına 'preconnect'.
'Cache-Control: immutable' + hash- имена; 'stale-while-revalidate'.

Kod ve paketler

Sahneye göre bölünmüş kod; ES modülleri; ağaç sallama.
Başlatma JS ≤ 150KB br; Ayrı ayrı kod kartları.

Varlıklar

UI için WebP/AVIF; Dokular için KTX2 Basis/UASTC.
Atlaslar ve mips; Opus ses; tembel videolar/cutscenes.

PWA/Önbellek

Service Worker: çekirdek önbellek, atlasların çalışma zamanı önbelleği.
İkinci bir ziyaret "sıcak" önbellekten yüklenir.

Öncelikler

kritik parçalar/atlaslar 'ön yükleme'; 'fetchpriority' önemli için.
İkincil sahnelere düşük öncelik.

Metrikler

Kontrol panelinde TTFB/LCP/TTFI/FTF/İndirme bütçesi.
Kilo alımı, isabet oranı CDN düşüşü ile ilgili uyarılar.

12) Mini başlık tarifleri

Statik (JS/CSS/Atlaslar):


Önbellek Kontrolü: genel, maksimum yaş = 31536000, değişmez
İçerik-Kodlama: br

JSON sahne manifestoları (sıklıkla değiştirildi):


Cache-Control: public, max-age = 60, stale-while-revalidate = 120
Vekil-Kontrol: max-age = 60, bayat-if-error = 600

Fontlar:


Önbellek Kontrolü: genel, maksimum yaş = 31536000, değişmez
Çapraz Köken-Kaynak-Politikası: çapraz köken

HTML5 oyunları daha hızlı yüklenir, çünkü web platformu verimli aktarımı birleştirir (HTTP/2-3 TLS 1. 3), akıllı dağıtım (CDN, önbellek, ön yükleme), ışık varlıkları (WebP/AVIF, KTX2, Opus) ve artımlı başlatma (kod bölme, tembel sahneler, SW önbellek). WebGL/WASM ve sıkı metrik disiplini ekleyin - ve ilk kare saniyeler içinde görünür ve yeniden giriş neredeyse anında olur.