Эмне үчүн HTML5 оюндары тезирээк жүктөлөт

Кирүү: ылдамдыгы = өзгөртүү

Browser оюндар үчүн "тез жүктөп" дегенди билдирет: аз байт, аз суроо-талап, аз биринчи кадр күтүү. HTML5-стек (HTML/CSS/JS/WebGL/WASM) заманбап жеткирүүнү жана "кутудан" кэштоону берет, демек - кыска TTFB, төмөн LCP жана тез Убакыт-биринчи аралашуу (TTFI).

1) Network & Транспорт: эмне үчүн Web тез демейки

HTTP/2 и HTTP/3 (QUIC)

Мультиплексирлөө: ондогон assets (спрайттар, код чанктары) бир байланыш менен барат - эч кандай "бороон" TCP.

0-RTT и TLS 1. 3: тез кол алышуу, кыска жол биринчи байт.

Агымдардын артыкчылыктуулугу: критикалык ассеттер (кыймылдаткычтын инициализациясы, башкы атлас) көбүрөөк артыкчылыкка ээ болот.

CDN жана четинде кэш

POP түйүндөрү оюнчуга жакын, өзгөрүлбөс assets кэш (хэш аттары).

'stale-while-revalidate' эски версиясын көрсөтүүгө жана жаңы версиясын параллелдүү тартууга мүмкүндүк берет.

Аталыштары (рецепт):


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

2) Bandling жана Code-Split: жеткирүү "так канча керек"

ES модулдары жана динамикалык импорт

Кодду level packs деп бөлөбүз: "лобби", "туториал", "деңгээлдер 1-3", "дүкөн".

Биринчи экран гана баштоо чанк алат (50-150 KB gz/br). Калганы - талап боюнча.

Tree-shaking жана Minification

Колдонулбаган API кыймылдаткычын/китепканаларды алып салабыз.

Terser/LightningCSS + module sideEffects = өлүк кодду агрессивдүү өчүрүү үчүн жалган.

Динамикалык жүктөө мисал:

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

3) Assets: байттардын негизги үнөмдөө

Сүрөттөр

UI/сүрөттөр үчүн WebP/AVIF: PNG/JPEG каршы көлөмү минус 25-50%.

Спрайт баракчалары жана атластар суроо-талаптардын санын жана кошумча чыгымдарды азайтат.

Device/Client Hints: 'Accept-CH: DPR, Width, Viewport-Width' → Server/edge керектүү өлчөмүн берет.

3D/Текстуралар

Basis/UASTC (KTX2): универсалдуу GPU текстураларын кысуу (ETC1S/ASTC/BC) - бир файлды жүктөп, видеокарта форматында чечип алабыз.

MIP деңгээл прогрессивдүү жүктөлөт: биринчи сапаты төмөн → андан кийин апсемпл.

Аудио

Opus ордуна MP3/AAC - төмөн битрейттерде жакшы; талап боюнча жолдорду агымы (зонанын музыкасы - зонага киргенден кийин).

Видео/кат-сценалар

WebCodecs/MediaSource жана LL-HLS кыска роликтер үчүн; плакат жана биринчи сегмент - алдын ала жүктөө, калганы - жалкоо.

4) кыймылдаткыч баштоо: биринчи "скелет", андан кийин "эт"

Lazy scene graph

Биз гана маанилүү сахнанын түйүндөрүн жүктөп (UI, камера, фон). Моделдер/шейдер - биринчи кезекте.

Фон asset jobs: жүктөгүч артыкчылыктары менен кезек кармап турат.

Service Worker (SW) катары "жылуу кэш"

Биринчи сапарда орнотулган жана кардардын өзөгүн, атластардын манифестин, шейдерлерди кэш.

Кайра киргенде - оффлайн даярдыгы жана TTFI дароо ~.

SW стратегиясынын мисалы (жөнөкөйлөштүрүлгөн):

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 жана WASM: браузерде "жергиликтүү" ылдамдыгы

WebGL/WebGPU: шейдер жана рендер - GPU боюнча; CPU логикага калат.

WebAssembly (WASM): кыймылдаткычтын оор бөлүктөрү (физика, жол, текстураларды ачуу) дээрлик жергиликтүү китепканалар сыяктуу иштейт.

Агымдар (Web Workers): текстура/аудио декодду, парсинг деңгээл, даярдоо баштык - негизги агымын бөгөт жок.

Биринчи кадрды оптималдаштыруу (FTF - Frame биринчи жолу):

FTF үчүн биз "сулуулукту" курмандыкка чалабыз: биз low-poly/low-res жүктөйбүз, кийин жогорку-res агымына чейин.

6) Жүктөө артыкчылыгы: маанилүү биринчи өтүп берет

HTML кеңештери:

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 артыкчылыктары жана 'fetchpriority'

' fetchpriority =" high"' - инициализациялоочу JS жана UI атластары.

Калган assets - 'low' оор жолго тоскоолдук кылбоо үчүн.

7) Метрика жана SLO "тез" HTML5 оюндар

Максаттуу багыттары:

TTFB <200-300 ms (CDN менен).
LCP (лобби) <1. 8–2. 5 мобилдик менен.
Time-to-First-Interaction (TTFI) < 2–3 с.
Биринчи Frame In-Game <1-2 этап башталгандан кийин.
Total Download (биринчи учуруу): ≤ 1-3 MB биринчи согуш/деңгээл чейин 5-10 MB ≤.
Кайра баштоо: ~ SW кэш аркылуу 0-200 KB.

Байкоо: тармактар/гео/түзмөктөр боюнча RUM-окуялар, Web Vitals, жүктөгүч прогресс, тайм-ауттар боюнча мүчүлүштүктөр.

8) Pipline Ассамблея: кантип алуу үчүн "жука биринчи байт"

1. Bandla талдоо (source-map-explorer, webpack-bundle-analyzer).

2. Screen/Fich боюнча Code-split, "калың" полифилдерди алып салуу (заманбап браузерлерди максаттуу).

3. Минифицирлөө: Terser/ESBuild + CSS Minify, гигант логиканы алып салуу.

4. Сүрөттөр: 'sharp/squoosh' → AVIF/WebP, 'srcset' генерациясы.

5. Текстуралар: KTX2 конверт (Basis/UASTC), мип түзүү.

6. Аудио: Opus VBR 48-96 kbps, клиптер - алдын ала кыскартылган.

7. Манифест assets (артефакт) + hash-аттары + 'immutable'.

8. PWA/SW: негизги, runtime-кэш атластар менен 'stale-while-revalidate'.

9. CDN: Preload-хинт, 'Surrogate-Control', тег боюнча Soft-Purge.

9) Ranteim аткаруу: оюн "учуп" жүктөп кийин

Main-thread budget: JS-жип <50ms; оор - Workers.

Батч-рендер: топтоо draw-calls, колдонуңуз.

GC-басым: катар/буферлерди ижарага алуу, оюн тиктеринде "таштандыдан" качуу.

Адаптивдүү FPS: FPS кулаганда оюнду тийбестен пост-эффекттердин сапатын төмөндөтүңүз.

10) Анти-үлгүлөрү (оюн жай кылат)

Бир монолиттүү бандл 5-15 MB "баштоо үчүн".

GPU кысуу жок PNG текстура, KTX2/Basis жок.

assets жүктөгүчтө 'rng% N' (детерминация маанилүү - бирок бул PF жөнүндө да).

Кэш аталыштары же хэш аттары жок суроо → ар бир сапар "муздак".

Polyphills бүткүл дүйнө үчүн (IE, эски Safari) - бекер мегабайт тартуу.

SW/алдын ала жүктөөлөрдүн жоктугу - кайталанган сапарлар биринчи сыяктуу эле оор.

"Оор" ариптер ('unicode-range' жана 'font-display: swap' жок бир нече жазуулар).

11) Чек тизме тез HTML5 оюндар

Тармак жана CDN

HTTP/3 киргизилген; 'preconnect' CDN/провайдерлерге.
`Cache-Control: immutable` + hash-имена; `stale-while-revalidate`.

Код жана бандла

Code-split сахнада; ES модулдары; tree-shaking.
Инициализация JS ≤ 150 KB br; коддун карталары өзүнчө.

Ассеталар

UI үчүн WebP/AVIF; текстура үчүн KTX2 Basis/UASTC.
Атластар жана миптер; аудио Opus; жалкоо видео/видеолор.

PWA/кэш

Service Worker: Core, runtime-кэш атластар алдын ала.
Кайра иш сапары "жылуу" кэш жүктөлгөн.

Артыкчылыктар

'preload' критикалык чанактар/атластар; 'fetchpriority' маанилүү үчүн.
Экинчи этап боюнча төмөн артыкчылык.

Метрика

TTFB/LCP/TTFI/FTF/Download-dashboard боюнча бюджет.
Салмактын өсүшү, hit-ratio CDN.

12) Mini Recipes аталыштары

Статика (JS/CSS/атластар):


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

JSON-манифесттер (көп өзгөрөт):


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

Шрифттер:


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

HTML5 оюндары тез жүктөлөт, анткени веб-платформа натыйжалуу транспортту айкалыштырат (HTTP/2-3, TLS 1. 3), акылдуу жеткирүү (CDN, кэш, алдын ала жүктөө), жеңил ассеттер (WebP/AVIF, KTX2, Opus) жана инкременталдык инициализация (код-сплит, жалкоо көрүнүштөр, SW-кэш). WebGL/WASM жана катуу метрикалык тартип кошуу - жана биринчи кадр секунданын ичинде пайда болот, ал эми кайра кирүү дээрлик заматта болуп калат.