Näme üçin HTML5 oýunlary has çalt ýüklenýär?

Giriş: tizlik = öwrülişik

Brauzerdäki oýunlar üçin "has çalt ýüklenýär" diýmekdir: az baýt, az haýyş, ilkinji çarçuwanyň garaşyşyndan az. HTML5-stek (HTML/CSS/JS/WebGL/WASM) häzirki zaman eltip bermäge we "gutudan" kesip almaga mümkinçilik berýär, bu bolsa gysga TTFB, pes LCP we çalt Wagt-to-First-Interaction (TTFI) diýmekdir.

1) Tor we ulag: näme üçin web has çalt

HTTP/2 и HTTP/3 (QUIC)

Multiplexirlemek: onlarça asset (spraytlar, kod çantalary) bir baglanyşyk bilen gidýär - TCP "tupany" ýok.

0-RTT и TLS 1. 3: Çalt el çarpmak, ilkinji baýta çenli gysga ýol.

Akymlaryň ileri tutulmagy: kritiki assetler (hereketlendirijiniň başlangyjy, esasy atlas) has ileri tutulýar.

CDN we gyrada kesiş

POP düwünleri oýunçylara has ýakyndyr, üýtgemeýän assetleri keshe edýär (hash atlary).

'stale-while-revalidate' köne wersiýany görkezmäge we şol bir wagtyň özünde täzesini çekmäge mümkinçilik berýär.

Başlyklar (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 we kod-split: "Zerur mukdarda" eltýäris

ES modullary we dinamiki import

Kody level packs-a bölýäris: "lobbi", "tutorial", "1-3 derejeler", "dükan".

Birinji ekran diňe başlangyç çankany alýar (50-150 KB gz/br). Galanlary - talap boýunça.

Tree-shaking we minifikasiýa

Ulanylmaýan hereketlendiriji/kitaphananyň API-lerini aýyrýarys.

Terser/LightningCSS + module sideEffects = false öli kody agressiw kesmek üçin.

Dinamiki ýüklemegiň mysaly:

js
//Diňe const {BattleRenderer} = await import ('./chunks/battleRenderer. js');
new BattleRenderer(). mount(canvas);

3) Assetler: baýtlaryň esasy tygşytlamasy

Şekiller

UI/suratlar üçin WebP/AVIF: PNG/JPEG-e garşy 25-50%.

Spraýt-listler we atlaslar haýyşlaryň sanyny we goşmaça çykdajylary azaldar.

Device/Client Hints: 'Accept-CH: DPR, Width, Viewport-Width' → serwer/edge islenýän ululygy berýär.

3D/Dokumalar

Basis/UASTC (KTX2): GPU-dokumalaryň ähliumumy gysylmagy (ETC1S/ASTC/BC) - bir faýly ýükleýäris, wideo kartoçka görnüşinde gaplamaýarys.

Mip derejeleri progressiw ýüklenýär: ilki pes hilli → soň apsempl.

Ses

MP3/AAC ýerine Opus - pes bitreýtlerde has gowudyr; talap boýunça ýollaryň akymy (zonanyň sazy - zona girenden soň).

Wideo/kat sahnalary

Gysga wideolar üçin WebCodecs/MediaSource we LL-HLS; afişa we birinji segment - öňünden ýüklemek, galanlary - ýalta.

4) Hereketlendirijiniň başlangyjy: ilki "skelet", soň "et"

Lazy scene graph

Diňe sahnanyň möhüm düwünlerini (UI, kamera, fon) ýükleýäris. Modeller/şeýderler - ilkinji zerurlyk boýunça.

Fon asset jobs: downloader birinji orunda durýar.

Service Worker (SW)

Ilkinji saparda gurnalýar we müşderiniň özenini, atlaslaryň, şeýderleriň manifestini kesýär.

Gaýtadan gireniňizde - awtonom taýýarlyk we TTFI derrew ~.

SW strategiýasynyň mysaly (ýönekeýleşdirilen):

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 we WASM: brauzerde "ýerli" tizlik

WebGL/WebGPU: şeýderler we render - GPU-da; CPU logika galýar.

WebAssembly (WASM): hereketlendirijiniň agyr bölekleri (fizika, ýol, teksturany açmak) ýerli kitaphanalar ýaly işleýär.

Akymlar (Web Workers): dokma/ses dekody, derejeleriň parsingi, halta taýýarlygy - esasy akymy petiklemezden.

Birinji çarçuwany optimizirlemek (FTF - Frame üçin ilkinji wagt):

FTF üçin "gözelligi" gurban edýäris: low-poly/low-res ýükleýäris, ýokary-res akymyna çenli.

6) Ýüklemegiň ileri tutulmagy: möhüm birine birinji geçmäge rugsat berýäris

HTML maslahatlary:

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-ileri tutulýan ugurlar we 'fetchpriority'

' fetchpriority =" high"' - JS we UI atlaslary.

Galan assets, möhüm ýoluň öňüni almak üçin 'low'.

7) "Çalt" HTML5 oýunlarynyň metrikleri we SLO

Maksat görkezmeleri:

TTFB <200-300 ms (CDN bilen).
LCP (lobbi) <1. 8–2. 5 jübi telefonynda.
Time-to-First-Interaction (TTFI) < 2–3 с.
Birinji Frame In-Game <1-2 s sahna başlanandan soň.
"Total Download" (ilkinji uçuş): lobbide 1-3 MB ≤, ilkinji söweş/derejä 5-10 MB ≤.
Täzeden başlamak: SW kesşiniň kömegi bilen 0-200 KB ~.

Syn edilişi: Tor/geo/enjam, Web Witals, ýükleýjiniň ösüşi, wagt-aut şowsuzlyklary boýunça RUM wakalary.

8) Pipline gurnama: "inçe birinji baýt" nädip almaly

1. Bandlyň derňewi (source-map-explorer, webpack-bundle-analyzer).

2. Sahnalar/şekiller boýunça kod-split, "galyň" polifilleri aýyrmak (häzirki zaman brauzerlerini nyşana alýarys).

3. Minifikasiýa: Terser/ESBuild + CSS Minify, dev-logikany aýyrmak.

4. Suratlar: 'sharp/squoosh' → AVIF/WebP, 'srcset' nesli.

5. Teksturalar: KTX2 konwert (Basis/UASTC), mip döretmek.

6. Audio: Opus VBR 48-96 kbps, klipler - öňünden gysgaldyldy.

7. Assetleriň manifesti (artefakt) + hash-atlar + 'immutable'.

8. PWA/SW: ýadro deslapky, 'stale-while-revalidate' bilen atlaslaryň runtime-keş.

9. CDN: Preload-hintler, 'Surrogate-Control', taglar boýunça Soft-Purge.

9) Kärendäniň öndürijiligi: ýüklenenden soň oýun "uçýar"

Main-thread budget: JS-daşlary saklaň <50 ms; agyr - Workers.

Batch-render: draw-calls toparlanyň, instansing ulanyň.

GC basyşy: massivleri/buferleri kärendesine alyň, oýun tiklerinde "hapalardan" gaça duruň.

Uýgunlaşdyrylan FPS: FPS güýzünde oýnuň hilini peseldiň.

10) Anti-nagyşlar (oýny haýal edýär)

Bir monolit bandl 5-15 MB "başlamak üçin".

GPU gysyşsyz PNG teksturasy, KTX2/Basis ýoklugy.

Assets ýükleýjisinde 'rng% N' (kesgitleýiş has möhümdir, ýöne bu PF hakda-da).

Kesh sözbaşysyz ýa-da kesh atsyz soraglar → Her sapar "sowuk".

Bütin dünýä üçin polifiller (IE, köne Safari) - megabaýtlary biderek çekýäris.

SW/deslapky ýükleriň ýoklugy - gaýtalanýan saparlar birinjisi ýaly agyr.

"Agyr" şriftler ('unicode-range' we 'font-display: swap').

11) Çalt HTML5 oýunlarynyň çek sanawy

Tor we CDN

HTTP/3 CDN/üpjün edijilere 'preconnect' goşuldy.
`Cache-Control: immutable` + hash-имена; `stale-while-revalidate`.

Kod we bandla

Sahnalara bölünen kod; ES modullary; tree-shaking.
Başlangyç JS ≤ 150 KB br; kod kartoçkalary aýratyn.

Assetalar

UI üçin WebP/AVIF; Tekstura üçin KTX2 Basis/UASTC.
Atlaslar we mipler; Opus audio; ýalta wideolar/wideolar.

PWA/Keş

Service Worker: Ýadro deslapky, atlaslaryň runtime-keşi.
Gaýtalanýan sapar "ýyly" keşden ýüklenýär.

Ileri tutulýan ugurlar

'preload' kritiki çanaklar/atlaslar; 'fetchpriority' üçin möhüm.
Ikinji derejeli sahnalara pes ileri tutulýan ugur.

Metrikler

TTFB/LCP/TTFI/FTF/Download-budget dashbordda.
Agramyň ýokarlanmagy, düşmegi hit-ratio CDN.

12) Sözbaşylaryň kiçi reseptleri

Statika (JS/CSS/atlaslar):


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

Sahnalaryň JSON manifestleri (köplenç üýtgeýär):


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

Şriftleri:


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

HTML5 oýunlary has çalt ýüklenýär, sebäbi web platformasy täsirli transporty birleşdirýär (HTTP/2-3, TLS 1. 3), akylly eltip bermek (CDN, keş, öňünden ýüklemek), ýeňil assetler (WebP/AVIF, KTX2, Opus) we inkremental başlangyç (kod-split, ýalta sahnalar, SW-keş). WebGL/WASM we berk metrik tertip-düzgüni goşuň - birinji çarçuwa sekuntda peýda bolýar we ikinji giriş derrew diýen ýaly bolýar.