Niyə HTML5 oyunları daha sürətli yüklənir

Giriş: sürət = dönüşüm

Brauzerdə oyunlar üçün «daha sürətli yüklənir» deməkdir: daha az bayt, daha az sorğu, daha az ilk kadr gözləmək. HTML5-yığını (HTML/CSS/JS/WebGL/WASM) qısa TTFB, aşağı LCP və sürətli Time-to-First-Interaction (TTFI) deməkdir.

1) Şəbəkə və nəqliyyat: niyə veb default daha sürətli

HTTP/2 и HTTP/3 (QUIC)

Multiplexing: onlarca asset (sprayt, kod çantaları) bir əlaqə ilə gedir - heç bir «fırtına» TCP.

0-RTT и TLS 1. 3: sürətli əl sıxma, ilk bayta qısa yol.

Axınların prioritetləşdirilməsi: kritik assetlər (mühərrikin başlanğıcı, əsas atlas) daha çox üstünlük əldə edir.

Kənarda CDN və cache

POP düyünləri oyunçuya daha yaxındır, dəyişməz assetləri (hash adları) keşləşdirir.

'stale-while-revalidate' köhnə versiyasını göstərməyə və eyni zamanda yenisini çəkməyə imkan verir.

Başlıqlar (resept):


Cache-Control: public, max-age=31536000, immutable
Content-Encoding: br   // для JS/CSS (Brotli)
Cross-Origin-Resource-Policy: cross-origin
Timing-Allow-Origin:

2) Bandling və split kodu: «tam olaraq lazım olduğu qədər» çatdırmaq

ES modulları və dinamik idxal

Kodu level packs-ə bölürük: «lobbi», «tutorial», «səviyyələr 1-3», «mağaza».

İlk ekran yalnız başlanğıc çank alır (50-150 KB gz/br). Qalanları tələb olunur.

Tree-shaking və minifikasiya

İstifadə olunmayan API mühərriklərini/kitabxanalarını silirik.

Terser/LightningCSS + module sideEffects = ölü kodun aqressiv kəsilməsi üçün false.

Dinamik yükləmə nümunəsi:

js
//Döyüş renderini yalnız const {BattleRenderer} = await import ('./chunks/battleRenderer. js');
new BattleRenderer(). mount(canvas);

3) Assetlər: baytların əsas qənaəti

Şəkillər

UI/illüstrasiyalar üçün WebP/AVIF: PNG/JPEG qarşı ölçüsü mənfi 25-50%.

Sprite siyahıları və atlaslar sorğuların sayını və əlavə xərcləri azaldır.

Device/Client Hints: 'Accept-CH: DPR, Width, Viewport-Width' → server/edge istədiyiniz ölçünü verir.

3D/Teksturalar

Basis/UASTC (KTX2): universal GPU tekstur sıxılması (ETC1S/ASTC/BC) - bir fayl yükləyin, video kart formatında açın.

MIP səviyyələri mütərəqqi yüklənir: əvvəlcə aşağı keyfiyyət → sonra apsemple.

Audio

MP3/AAC əvəzinə Opus - aşağı bitreytlərdə daha yaxşıdır; Tələb olunduqda izlərin axını (zonanın musiqisi - zonaya daxil olduqdan sonra).

Video/katat səhnələri

WebCodecs/MediaSource və LL-HLS qısa videolar üçün; poster və birinci seqment - əvvəlcədən yükləmə, qalanları - tənbəllik.

4) Mühərrikin başlanğıcı: əvvəlcə «skelet», sonra «ət»

Lazy scene graph

Yalnız kritik səhnə qovşaqlarını (UI, kamera, fon) yükləyirik. Modellər/shaders - zəruri hallarda.

Fon asset jobs: downloader prioritetlər ilə növbə saxlayır.

Service Worker (SW) «isti cache» kimi

İlk ziyarətdə quraşdırılır və müştərinin nüvəsini, atlasların manifestini, şeyderləri keşləşdirir.

Təkrar girişdə - oflayn hazırlıq və TTFI dərhal ~.

SW strategiyasının nümunəsi (sadələşdirilmiş):

js self. addEventListener('fetch', e => {
e. respondWith(caches. open('game-v12'). then(async c => {
const cached = await c. match(e. request);
const fresh = fetch(e. request). then(r => { c. put(e. request, r. clone()); return r; });
return cached          fresh;
}));
});

5) WebGL və WASM: «yerli» brauzer sürəti

WebGL/WebGPU: shaders və render - GPU-da; CPU məntiqlə qalır.

WebAssembly (WASM): Mühərrikin ağır hissələri (fizika, yol, teksturanın açılması) demək olar ki, yerli kitabxanalar kimi işləyir.

Axınlar (Web Workers): doku/audio dekodu, səviyyələrin parsinqi, çanta hazırlanması - əsas axını bloklamadan.

İlk çərçivənin optimallaşdırılması (FTF - Çərçivəyə ilk vaxt):

FTF üçün «gözəlliyi» qurban veririk: low-poly/low-res yükləyirik, sonra high-res axınına qədər.

6) Download prioritetləşdirilməsi: vacib ilk keçmək üçün veririk

HTML ipuçları:

html
<link rel="preconnect" href="https://cdn. example. 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">

Fetch prioritetləri və 'fetchpriority'

' fetchpriority =» high»' - başlanğıc JS və atlaslar UI.

Qalan assetlər kritik yola müdaxilə etməmək üçün 'low'.

7) Metrik və SLO «sürətli» HTML5 oyun

Hədəf göstəriciləri:

TTFB <200-300 ms (CDN ilə).
LCP (lobbi) <1. 8–2. 5 mobil ilə.
Time-to-First-Interaction (TTFI) < 2–3 с.
İlk Frame In-Game <1-2 səhnə başladıqdan sonra.
Total Download (ilk başlanğıc): lobbidə 1-3 MB ≤, ilk döyüş/səviyyəyə 5-10 MB ≤.
SW cache sayəsində 0-200 KB ~.

Müşahidə: Şəbəkə/Geo/Cihazlar, Web Vitals, Downloader Tərəqqi, Time-out uğursuzluqları.

8) Paypline montaj: «nazik ilk bayt» almaq üçün necə

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

2. Səhnələr/fiçalar üzrə split kod, «qalın» polifillərin çıxarılması (müasir brauzerləri hədəfləyirik).

3. Minifikasiya: Terser/ESBuild + CSS Minify, nəhəng məntiqin aradan qaldırılması.

4. Şəkillər: 'sharp/squoosh' → AVIF/WebP, generation 'srcset'.

5. Teksturalar: KTX2 zərf (Basis/UASTC), mip yaradılması.

6. Audio: Opus VBR 48-96 kbps, kliplər - qabaqcadan qısaldılmış.

7. Asset manifesti (artefakt) + hash-adlar + 'immutable'.

8. PWA/SW: ilkin, runtime-cache atlas ilə 'stale-while-revalidate'.

9. CDN: Preload-hintlər, 'Surrogate-Control', tagged Soft-Purge.

9) Açılış performansı: oyun yüklədikdən sonra «uçmaq» üçün

Main-thread budget: JS daşları saxlayın <50ms; ağır - Workers.

Batch render: draw-calls qruplaşdırın, instansing istifadə edin.

GC-təzyiq: massivləri/buferləri icarəyə götürün, oyun tiklərində "zibil 'dən çəkinin.

Adaptiv FPS: oyun toxunmadan FPS düşdükdə post-effektlərin keyfiyyətini azaltın.

10) Anti-nümunələr (oyun yavaş edir)

Bir monolit bandl 5-15 MB «başlanğıc üçün».

GPU sıxılması olmadan PNG doku, KTX2/Basis yoxdur.

'rng% N' asset yükləyicisində (determinasiya daha vacibdir - lakin bu həm də PF haqqında).

Cash başlıqları və ya hash adları olmadan sorğular → Hər ziyarət «soyuq».

Bütün dünya üçün polifillər (IE, köhnə Safari) - meqabaytları boş yerə çəkirik.

SW/ön yükləmələrin olmaması - təkrar səfərlər birinci kimi ağırdır.

«Ağır» şriftlər ('unicode-range' və 'font-display: swap' olmadan bir neçə yazı).

11) Sürətli HTML5 oyun çek siyahısı

Şəbəkə və CDN

HTTP/3 daxil edilmişdir; 'preconnect' CDN/provayderlərə.
`Cache-Control: immutable` + hash-имена; `stale-while-revalidate`.

Kod və bandlalar

Səhnələrdə split kodu; ES modulları; tree-shaking.
Başlanğıc JS ≤ 150 KB br; kart kodu ayrıca.

Assetlər

UI üçün WebP/AVIF; Tekstura üçün KTX2 Basis/UASTC.
Atlaslar və miplər; Opus audio; tənbəl video/kliplər.

PWA/cache

Service Worker: core ön, atlas runtime cache.
Yenidən ziyarət «isti» keşdən yüklənir.

Prioritetlər

'preload' kritik çanaq/atlas; 'fetchpriority' vacib üçün.
Kiçik səhnələr üçün aşağı prioritet.

Metrika

TTFB/LCP/TTFI/FTF/Download-budget dashboard.
Çəki artımı, hit-ratio CDN düşməsi ilə Alerts.

12) Başlıqların mini reseptləri

Statika (JS/CSS/atlaslar):


Cache-Control: public, max-age=31536000, immutable
Content-Encoding: br

Səhnələrin JSON manifestləri (tez-tez dəyişir):


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

Şriftlər:


Cache-Control: public, max-age=31536000, immutable
Cross-Origin-Resource-Policy: cross-origin

HTML5 oyunları daha sürətli yüklənir, çünki veb platforma effektiv nəqliyyatı birləşdirir (HTTP/2-3, TLS 1. 3), ağıllı çatdırılma (CDN, cache, ön yükləmə), yüngül assetlər (WebP/AVIF, KTX2, Opus) və inkremental başlanğıc (kod-split, tənbəl səhnələr, SW-cache). WebGL/WASM və ciddi metrik intizam əlavə edin - və ilk çərçivə saniyələrdə görünür və təkrar giriş demək olar ki, ani olur.