Неге HTML5 ойындары тез жүктеледі

Кіріспе: жылдамдық = конверсия

Браузердегі ойындар үшін «тез қотарылады» дегеніміз: байттар аз, сұраулар аз, бірінші кадрды күту аз. HTML5-стек (HTML/CSS/JS/WebGL/WASM) қазіргі заманғы жеткізуді және «қораптан» кэштеуді береді, яғни - қысқа TTFB, төмен LCP және жылдам Уақыт-to-First-Interaction (TTFI).

1) Желі және көлік: неліктен веб әдепкі жылдам

HTTP/2 и HTTP/3 (QUIC)

Мультиплексиялау: ондаған ассеттер (спрайттар, код күбілері) бір қосылыспен жүреді - TCP «дауылы» жоқ.

0-RTT и TLS 1. 3: жылдам қол алысу, бірінші байтқа дейінгі қысқа жол.

Ағындардың басымдығы: сыни ассеттер (қозғалтқыштың бастамашылығы, бас атлас) үлкен басымдыққа ие болады.

CDN және шетіндегі кэш

POP тораптары ойыншыға жақын, өзгермейтін ассеттерді кэштейді (хэш аттары).

'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) Бандлинг және код-сплит: «қажетті мөлшерде» жеткіземіз

ES модульдері және динамикалық импорт

Кодты level packs-ке бөлеміз: «лобби», «туториал», «1-3 деңгейлер», «дүкен».

Бірінші экран тек бастамашыл күбіні алады (50-150 КБ gz/br). Қалғаны - талап бойынша.

Tree-shaking және минификациялау

Пайдаланылмайтын қозғалтқыш/кітапхана API-лерін жойамыз.

Terser/LightningCSS + module sideEffects = өлі кодты кесу үшін false.

Динамикалық жүктеу мысалы:

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

3) Ассеттер: байттарды негізгі үнемдеу

Суреттер

UI/иллюстрациялар үшін WebP/AVIF: PNG/JPEG-ге қарсы мөлшерге минус 25-50%.

Спрайт-парақтар мен атластар сұрау салулардың санын және үстеме шығыстарды азайтады.

Device/Client Hints: 'Accept-CH: DPR, Width, Viewport-Width' → сервер/edge қажетті өлшемді береді.

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

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

Мип-деңгейлер прогрессивті түрде жүктеледі: алдымен сапасы төмен → содан кейін апсемпл.

Аудио

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

Бейне/қатпар көріністері

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 - First Time to Frame):

FTF үшін «сұлулықты» құрбандық етеміз: low-poly/low-res жүктейміз, do-streimim high-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 атластары.

Сыни жолға кедергі келтірмеу үшін қалған ассеттер 'low'.

7) Метрика және SLO «жылдам» HTML5 ойындар

Нысаналы бағдарлар:

TTFB <200-300 мс (CDN-мен).
LCP (лобби) <1. 8–2. 5 ұялы телефонмен.
Time-to-First-Interaction (TTFI) < 2–3 с.
First Frame In-Game <1-2 сахна басталғаннан кейін.
Total Download (бірінші іске қосу): лоббилерде 1-3 МБ ≤, бірінші ұрысқа/деңгейге дейін 5-10 МБ ≤.
Қайта іске қосу: SW кэшінің арқасында 0-200 КБ ~.

Бақылануы: желілер/гео/құрылғылар бойынша RUM-оқиғалар, Web Vitals, жүктеушінің ілгерілеуі, тайм-ауттар бойынша істен шығулар.

8) Пайплайн құрастыру: қалай алуға болады «жұқа бірінші байт»

1. Бандлды талдау (source-map-explorer, webpack-bundle-analyzer).

2. Сахна/фич бойынша код-сплит, «қалың» полифилдерді алып тастау (заманауи браузерлерді таргеттейміз).

3. Minify: Terser/ESBuild + CSS Minify, dev-логиканы жою.

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

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

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

7. Ассеттер манифесі (артефакт) + hash-аттары + 'immutable'.

8. PWA/SW: ядроның алдын ала қадамы, 'stale-while-revalidate' бар атластардың runtime-кэші.

9. CDN: Preload-хинта, 'Surrogate-Control', тегтер бойынша Soft-Purge.

9) Рантайм өнімділігі: ойын жүктелгеннен кейін «ұшу» үшін

Main-thread budget: JS таспаларын ұстаңыз <50 мс; ауыр - Workers.

Батч-рендер: draw-calls тобын жасаңыз, инстансингті пайдаланыңыз.

GC-қысым: массивтерді/буферлерді жалға алыңыз, ойын тиктерінде «қоқыстан» аулақ болыңыз.

Бейімделген FPS: FPS құлаған кезде ойынға тиіспей, пост-әсерлердің сапасын төмендетіңіз.

10) Анти-үлгілер (бұл ойынды баяу етеді)

Бір монолитті бандл 5-15 МБ «старт».

GPU компрессиясыз PNG текстурасы, KTX2/Basis болмауы.

assets жүктегішіндегі 'rng% N' (детерминация маңызды, бірақ бұл PF туралы да).

Кэш тақырыптары жоқ немесе хэш аттары жоқ сұраулар → әрбір келу «салқын».

Бүкіл әлем үшін полифиллдер (IE, ескі Safari) - мегабайтты бекер тартамыз.

SW/алдын ала жүктеудің жоқтығы - қайталап келу бірінші сияқты ауыр.

«Ауыр» қаріптер (бірнеше 'unicode-range' және 'font-display: swap').

11) Жылдам HTML5 ойынның чек парағы

Желі және CDN

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

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

Сахналар бойынша код-сплит; ES модульдері; tree-shaking.
Инициализациялық JS ≤ 150 KB br; жеке код карталары.

Ассеттер

UI үшін WebP/AVIF; Текстуралар үшін Basis/UASTC KTX2.
Атластар мен миптер; Opus аудио; жалқау бейнелер/роликтер.

PWA/кэш

Service Worker: ядроның алдындағы, атластардың runtime-кэші.
Қайтадан келу «жылы» кэштен жүктеледі.

Артықшылықтар

'preload' сыни күбілер/атластар; 'fetchpriority' маңызды үшін.
Екінші дәрежелі көріністерге төмен басымдық.

Өлшемдер

TTFB/LCP/TTFI/FTF/Download-budget дашбордта.
Салмақтың өсуі, hit-ratio CDN түсуі бойынша алерталар.

12) Тақырыптардың шағын рецептілері

Статика (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 және қатаң метрика тәртібін қосыңыз - және бірінші кадр секундтарда пайда болады, ал қайта кіру жылдам болады.