De ce jocurile HTML5 se încarcă mai repede

Introducere: Viteză = Conversie

Pentru jocurile din browser, „se încarcă mai repede” înseamnă: mai puțini octeți, mai puține cereri, mai puțină așteptare pentru primul cadru. Stiva HTML5 (HTML/CSS/JS/WebGL/WASM) oferă livrare modernă și cache-ul din cutie, ceea ce înseamnă TTFB scurt, LCP scăzut și interacțiune rapidă Time-to-First FI).

1) Rețea și transport: de ce web-ul este mai rapid în mod implicit

HTTP/2 и HTTP/3 (QUIC)

Multiplexare: zeci de active (sprite, bucăți de cod) vin într-o singură conexiune - nu există „furtuni” TCP.

0-RTT и TLS 1. 3: strângere rapidă de mână, drum mai scurt la primul octet.

Prioritizarea firului: activele critice (inițializarea motorului, atlasul principal) primesc prioritate mai mare.

CDN și memoria cache de margine

Noduri POP mai aproape de player cache active imuabile (nume hash).

'stale-while-revalidate' allows you to show the old version and simultan trage-l pe cel nou.

Titluri (rețetă):


Cache-Control: public, max-age = 31536000, imuabil
Codare conţinut: br// для JS/CSS (Brotli)
Cross-Origin-Resource-Policy: origine încrucișată
Sincronizare-permite-origine:

2) Gruparea și împărțirea codului: livrarea „la fel de mult cum aveți nevoie”

Module ES și import dinamic

Împărțiți codul în pachete de nivel: „lobby”, „tutorial”, „niveluri 1-3”, „magazin”.

Ecranul inițial primește doar bucata de inițializare (50-150 KB gz/br). Restul este la cerere.

Tremuratul și minificarea copacilor

Eliminați API-urile neutilizate ale motorului/bibliotecii.

Terser/LightningCSS + modul sideEffects = fals pentru a tăiat agresiv cod mort.

Exemplu de încărcare dinamică:

js
//Încărcați redatorul de luptă numai la începutul bătăliei const {BattleRenderer} = așteptați importul ('./bucăți/battleRenderer. js ");
new BattleRenderer (). montare (pânză);

3) Active: Economii pe octeți principali

Imagini

WebP/AVIF pentru UI/ilustrații: minus 25-50% la dimensiune vs. PNG/JPEG.

Listele de sprite și atlase reduc interogările și deasupra capului.

Sugestii dispozitiv/client: „Acceptați-CH: DPR, lățime, vizualizare-lățime” → server/margine dă dimensiunea dorită.

3D/Textures

Bază/UASTC (KTX2): compresie universală a texturilor GPU (ETC1S/ASTC/BC) - încărcați un fișier, despachetați-l în format de placă video.

Nivelurile Meep sunt încărcate progresiv: mai întâi calitatea scăzută → apoi proba.

Audio

Opus în loc de MP3/AAC - mai bine la bitrate mici; streaming piese la cerere (muzică zonă - după intrarea în zonă).

Video/cutscenes

WebCodecs/MediaSource și LL-HLS pentru videoclipuri scurte; poster și primul segment - preîncărcare, restul - leneș.

4) Inițializarea motorului: mai întâi „schelet”, apoi „carne”

Graficul scenei leneșe

Încărcăm numai noduri critice de scenă (UI, aparat de fotografiat, fundal). Modele/umbre - după cum este necesar.

Activele de fundal: Bootloader-ul deține o coadă de prioritate.

Service Worker (SW) ca „memorie cache caldă”

Instalat la prima vizită și cache kernel client, atlas manifest, shaders.

La re-conectare - disponibilitate offline și TTFI ~ instantaneu.

Exemplu de strategie SW (simplificată):

js sine. addEventListener ('adu', e => {
e. ResponseWith (cache. deschis („game-v12”). apoi (async => {
const cached = așteaptă c. meci (e. cerere);
const fresh = adu (e. cerere). apoi (r => {c. put (e. cerere, r. clona ()); retur r;});
retur cache        proaspete;
}));
});

5) WebGL și WASM: viteza „nativă” în browser

WebGL/WebGPU: shadere și randare - pe GPU; Procesorul rămâne logic.

WebAssembly (WASM): părțile grele ale motorului (fizică, cale, despachetare texturi) funcționează aproape ca biblioteci native.

Lucrători Web: textură/decodare audio, parsare la nivel, pregătirea ochiurilor de plasă - fără încuietori de masă.

Prima optimizare pentru Frame (FTF):

De dragul FTF, sacrificăm „frumusețea”: încărcați low-poli/low-res, transmiteți mai târziu high-res.

6) Prioritizarea încărcării: lăsați mai întâi trecerea importantă

Sugestii HTML:

html
<link rel = "preconnect" href = "https ://cdn. exemplu. com">
<link rel = „preîncărcare” as = „script' href = ”/app. a1b2c3. js' crossorigin>
<link rel = "preload" as = "imagine" href = "/atlases/ui @ 1x. avif” imagesrcset = ”/ui @ 2x. avif 2x">

Adu priorități și „fetchpriority”

' fetchpriority =” high”' - inițializare atlase JS și UI.

Restul activelor sunt „mici” pentru a nu interfera cu calea critică.

7) Metrics și SLO de jocuri „rapide” HTML5

Obiective:

TTFB <200-300 ms (cu CDN).
LCP (lobby) <1. 8–2. 5 s pe mobil.
Time-to-First-Interaction (TTFI) <2-3 с.
First Frame In-Game <1-2 s după începerea scenei.
Descărcare totală (prima rulare): ≤ 1-3 MB pe lobby, ≤ 5-10 MB până la primul nivel/luptă.
Restart: ~ 0-200 KB datorită memoriei cache SW.

Observabilitate: Evenimente RUM pe rețele/geo/dispozitive, vitale Web, progresul bootloader, eșecuri timeout.

8) asamblarea conductelor: cum să obțineți un „primul octet subțire”

1. Analiza pachetului (source-map-explorer, webpack-bundle-analyzer).

2. Cod-împărțit de scene/caracteristici, eliminarea polifilelor „groase” (vizăm browserele moderne).

3. Minificare: Terser/ESBuild + CSS Minify, eliminarea logicii dev.

4. Imagini: 'sharp/squoosh' → AVIF/WebP, generarea de 'srcset'.

5. Texturi: plic în KTX2 (Bază/UASTC), crearea de mips.

6. Audio: Opus VBR 48-96 kbps, clipuri - previzualizări scurtate.

7. Active manifeste (artefact) + nume hash + „imuabile”.

8. PWA/SW: kernel pre-cache, runtime cache de atlase cu 'stale-în timp ce-revalidate'.

9. CDN: Preîncărcați-sugestii, 'Surogate-Control', Soft-Purge după tag.

9) Runtime performanță: pentru a face jocul „zbura” după încărcare

Bugetul filetului principal: țineți JS-taski <50 ms; heavy - in Workers.

Randare lot: apeluri de tragere în grup, utilizați instanțierea.

Presiunea GC: închiriați array-uri/tampoane, evitați „gunoiul” în ticuri de joc.

FPS adaptiv: Reduceți efectele post-atunci când FPS scade fără a atinge gameplay-ul.

10) Anti-modele (ceea ce face jocul lent)

Un pachet monolit 5-15 MB „pentru început”.

Texturi PNG fără compresie GPU, fără KTX2/Basis.

'rng% N' în încărcătorul de active (determinarea este mai importantă - dar este vorba și despre PF).

Cereri fără anteturi cache sau fără nume hash → fiecare vizită „rece”.

Polifilii pentru întreaga lume (IE, vechi Safari) - trăgând megabytes în zadar.

Lipsa SW/preîncărcări - vizitele repetate sunt la fel de dificile ca prima.

Fonturi „grele” (mai multe stiluri fără „unicode-range” și „font-display: swap”).

11) Lista de verificare rapidă a jocului HTML5

Rețea și CDN

HTTP/3 activat; „reconectați” la CDN/furnizori.
'Cache-Control: imuabil' + hash- имена; 'stale-în timp ce-revalidate'.

Cod și pachete

Cod împărțit în funcție de scenă; Module ES; tremurând copaci.
Initializare JS ≤ 150KB br; cartele de cod separat.

Active

WebP/AVIF pentru UI; KTX2 Bază/UASTC pentru texturi.
Atlase și mips; Opus audio; videoclipuri leneș/cutscenes.

PWA/memorie cache

Service Worker: kernel pre-cache, runtime cache de atlase.
O a doua vizită este încărcată „din memoria cache caldă”.

Priorități

„preîncărcarea” bucăților/atlaselor critice; „fetchpriority” pentru important.
Prioritate scăzută la scenele secundare.

Măsurători

TTFB/LCP/TTFI/FTF/Download-buget pe tabloul de bord.
Alerte privind creșterea în greutate, căderea CDN cu raport de succes.

12) Mini rețete titlu

Static (JS/CSS/Atlases):


Cache-Control: public, max-age = 31536000, imuabil
Codare conţinut: br

Manifestele scenei JSON (adesea schimbate):


Cache-Control: public, max-age = 60, stale-în timp ce-revalidat = 120
Surogat-Control: max-age = 60, stale-if-error = 600

Fonturi:


Cache-Control: public, max-age = 31536000, imuabil
Cross-Origin-Resource-Policy: origine încrucișată

Jocurile HTML5 se încarcă mai repede, deoarece platforma web combină transportul eficient (HTTP/2-3 TLS 1. 3), livrare inteligentă (CDN, cache, preload), active ușoare (WebP/AVIF, KTX2, Opus) și inițializare incrementală (split cod, scene leneșe, cache SW). Adăugați WebGL/WASM și disciplina metrică strictă - iar primul cadru apare în câteva secunde, iar reintrarea devine aproape instantanee.