Dlaczego gry HTML5 ładują się szybciej

Wprowadzenie: Prędkość = konwersja

W przypadku gier w przeglądarce „ładuje się szybciej” oznacza: mniej bajtów, mniej żądań, mniej czeka na pierwszą ramkę. Stos HTML5 (HTML/CSS/JS/WebGL/WASM) zapewnia nowoczesną dostawę i buforowanie poza pudełkiem, co oznacza krótki TTFB, niski poziom LCP i szybki czas do pierwszej interakcji (TTFI).

1) Sieć i transport: dlaczego internet jest szybszy domyślnie

HTTP/2 HTTP/3 (QUIC)

Multipleksowanie: dziesiątki aktywów (sprites, kawałki kodu) pochodzą z jednego połączenia - nie ma TCP „burze”.

0-RTT - TLS 1. 3: szybki uścisk dłoni, krótszy sposób na pierwszy bajt.

Priorytet wątku: aktywa krytyczne (inicjalizacja silnika, atlas główny) otrzymują wyższy priorytet.

CDN i pamięć podręczna krawędzi

Węzły POP bliżej pamięci podręcznej gracza immutable assets (hash names).

'stale-while-revalidate' allows ci pokazać starą wersję i jednocześnie wyciągnąć nową.

Tytuły (przepis):


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

2) Pakiet i kod-podział: dostarczanie „tyle, ile potrzebujesz”

Moduły ES i import dynamiczny

Podziel kod na pakiety poziome: „lobby”, „tutorial”, „levels 1-3”, „store”.

Ekran początkowy otrzymuje tylko kawałek inicjalizacji (50-150 KB gz/br). Reszta jest na żądanie.

Potrząsanie i minifikacja drzew

Usuń niewykorzystane interfejsy API silnika/biblioteki.

Moduł Terser/Light CSS + Effects = fałszywy do agresywnego cięcia martwego kodu.

Przykład obciążenia dynamicznego:

js
//Załaduj renderer bitwy tylko na początku bitwy const {BatاRenderer} = czekają na import ('./kawałki/bat, Renderer. js');
nowy BatلRenderer (). montaż (płótno);

3) Aktywa: główne oszczędności bajtowe

Obrazy

WebP/AVIF dla interfejsu użytkownika/ilustracji: minus 25-50% do rozmiaru kontra PNG/JPEG.

Sprite listy i atlasy zmniejszyć zapytania i koszty ogólne.

Wskazówki urządzenia/klienta: 'Accept-CH: DPR, Width, Viewport-Width' → serwer/krawędź daje żądany rozmiar.

3D/Textures

Podstawa/UASTC (KTX2): uniwersalna kompresja tekstur GPU (ETC1S/ASTC/BC) - załaduj jeden plik, rozpakuj go w formacie karty wideo.

Poziomy Meep są ładowane stopniowo: najpierw niska jakość → następnie próbka.

Audio

Opus zamiast MP3/AAC - lepiej przy niskich bitratach; streaming utworów na żądanie (strefa muzyki - po wejściu do strefy).

Filmy/cutsceny

WebCodecs/BlackSource i LL-HLS do krótkich filmów; plakat i pierwszy segment - preload, reszta - leniwy.

4) Inicjalizacja silnika: najpierw „szkielet”, potem „mięso”

Leniwy wykres sceny

Ładujemy tylko krytyczne węzły sceny (interfejs użytkownika, kamera, tło). Modele/cienie - w razie potrzeby.

Zadania związane z aktywami w tle: bootloader posiada kolejkę priorytetową.

Pracownik serwisowy (SW) jako „ciepła pamięć podręczna”

Zainstalowany podczas pierwszej wizyty i buforuje jądro klienta, atlas manifest, cienie.

Po ponownym zalogowaniu - gotowość offline i TTFI ~ natychmiast.

Przykład strategii SW (uproszczony):

js self. addΑ Listener ('fetch', e => {
e.  Z (caches. otwarte („gra-v12”). następnie (async c => {
const cached = wait c. match (e. wniosek);
const fresh = fetch (e. żądanie). następnie (r => {c. put (e. żądanie, r. klon (); zwrot r;});
pamięci podręcznej powrotnej        świeże;
}));
});

5) WebGL i WASM: „natywna” prędkość w przeglądarce

WebGL/WebGPU: shadery i render - na GPU; Procesor pozostaje w logice.

WebAssembly (WASM): ciężkie części silnika (fizyka, ścieżka, rozpakowywanie tekstur) działają prawie jak rodzime biblioteki.

Web Workers: tekstura/dekoder audio, parsing poziomu, przygotowanie oczek - brak zamków głównego nurtu.

Pierwszy raz do oprawy (FTF) optymalizacja:

Dla dobra FTF poświęcamy „piękno”: ładunek low-poli/low-res, strumień high-res później.

6) Priorytetowe obciążenie: niech ważny przejdzie pierwszy

Podpowiedzi HTML:

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

Pobieranie priorytetów i „fetchpriority”

"fetchpriority =" high "- inicjalizacja atlasów JS i UI.

Pozostałe aktywa są „niskie”, aby nie zakłócać ścieżki krytycznej.

7) Metryki i SLO „szybkich” gier HTML5

Cele:

TTFB <200-300 ms (z CDN).
LCP (lobby) <1. 8–2. 5 s na telefonie komórkowym.
Czas do pierwszej interakcji (TTFI) <2-3 μ.
Pierwszy Frame In-Game <1-2 s po rozpoczęciu sceny.
Całkowite pobranie (pierwsze uruchomienie): ≤ 1-3 MB na lobby, ≤ 5-10 MB do pierwszej bitwy/poziomu.
Uruchom ponownie: ~ 0-200 KB dzięki pamięci podręcznej SW.

Obserwowalność: zdarzenia RUM w sieciach/geo/urządzeniach, Web Vitals, progress bootloader, awarie timeout.

8) Montaż rurociągu: jak uzyskać "cienki pierwszy bajt'

1. Analiza wiązki (source-map-explorer, webpack-bundle-analyzer).

2. Kod podzielony według scen/funkcji, usuwanie „grubych” polifili (kierujemy nowoczesne przeglądarki).

3. Minification: Terser/ESBuild + CSS Minify, dev usuwanie logiki.

4. Zdjęcia: 'sharp/squoosh' → AVIF/WebP, generacja 'srcset'.

5. Tekstury: koperta w KTX2 (Base/UASTC), tworzenie mips.

6. Audio: Opus VBR 48-96 kbps, klipy - skrócone podglądy.

7. Aktywa manifestowane (artefakt) + nazwy hash + „niezmienne”.

8. PWA/SW: przedwzmacniacz jądra, pamięć podręczna atlasów z „stale-while-revalidate”.

9. CDN: Podpowiedzi wstępne, „Surogate-Control”, Soft-Purge według tagu.

9) Wydajność runtime: aby gra „latać” po załadunku

Główny budżet nici: trzymaj JS-taski <50 ms; ciężkie - w Robotnicy.

Render partii: grupowe wywołanie, użyj instancji.

Ciśnienie GC: wynajem tablic/buforów, unikać „śmieci” w tiki gry.

Adaptacyjny FPS: Zmniejszyć efekty po spadku FPS bez dotykania rozgrywki.

10) Anty-wzory (co sprawia, że gra powoli)

Jeden monolityczny pakiet 5-15 MB „na początek”.

Tekstury PNG bez kompresji GPU, bez KTX2/Basis.

'rng% N' w ładowarce aktywów (ważniejsze jest określenie - ale dotyczy to również PF).

Żądania bez nagłówków pamięci podręcznej lub bez nazw hash → każda wizyta „zimno”.

Polifile dla całego świata (IE, stary Safari) - ciągnięcie megabajtów na próżno.

Brak SW/preload - wielokrotne wizyty są równie trudne jak pierwsze.

„Ciężkie” czcionki (kilka stylów bez 'unicode-range' i 'font-display: swap').

11) Szybka lista kontrolna gry HTML5

Sieć i CDN

HTTP/3 włączone; „preconnect” do CDN/dostawców.
„Cache-Control: immutable” + hash-имена; „stale-while-revalidate”.

Kod i pakiety

Kod podzielony według scen; moduły ES; trzęsące się drzewa.
Inicjalizacja JS ≤ 150KB br; karty kodowe oddzielnie.

Aktywa

WebP/AVIF dla UI; Podstawa KTX2/UASTC dla tekstur.
Atlasy i mips; Opus audio; leniwe filmy/cutsceny.

PWA/pamięć podręczna

Worker Service: kernel pre-cache, runtime cache atlasów.
Druga wizyta jest załadowana „z ciepłej” pamięci podręcznej.

Priorytety

„wstępne obciążenie” kawałków krytycznych/atlasów; „fetchpriority” dla ważnych.
Niski priorytet dla scen drugorzędnych.

Mierniki

TTFB/LCP/TTFI/FTF/Pobierz-budżet na desce rozdzielczej.
Wpisy dotyczące przyrostu masy ciała, współczynnik trafienia spadek CDN.

12) Mini przepisy tytułowe

Statyczne (JS/CSS/atlasy):


Cache-Control: public, max-age = 31536000, immutable
Kodowanie treści: br

Manifesty sceny JSON (często zmieniane):


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

Czcionki:


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

Gry HTML5 ładują się szybciej, ponieważ platforma internetowa łączy wydajny transport (HTTP/2-3 TLS 1. 3), inteligentna dostawa (CDN, pamięć podręczna, preload), aktywa lekkie (WebP/AVIF, KTX2, Opus) i inicjalizacja przyrostowa (podział kodu, leniwe sceny, SW cache). Dodaj WebGL/WASM i ścisłą dyscyplinę metryczną - a pierwsza ramka pojawia się w sekundach, a ponowne wejście staje się niemal natychmiastowe.