Կրիպտո կազինո
Torrent Gear
Ինչու HTML5 խաղերը ավելի արագ բեռնվում են
Մուտքագրում 'արագություն = փոխակերպում
Զննարկչի խաղերի համար «ավելի արագ բեռնվում է» նշանակում է, որ ավելի քիչ բայթ, ավելի քիչ հարցումներ, քան առաջին շրջանակի սպասումները։ HTML5-stek (HTML/CSS/JS/WindoGL/WASM) տալիս է ժամանակակից առաքում և փակցնում «տուփից», ինչը նշանակում է, որ կարճ TTFB, ցածր LCP և արագ Time-First-Interaction (teraction (TTTTTTTTTTTTTTTTFFFFFFFF FFF FF F V iMV iMV iMV V I)։
1) Ցանցը և տրանսպորտը. Ինչու է վեբ կայքը լռելյայն ավելի արագ
HTTP/2 и HTTP/3 (QUIC)
Բազմապատկումը 'տասնյակ ասացվածքներ (սպրեյտներ, կոդի չանկաներ) գնում են մեկ տերմինալ, ոչ էլ TCP «փոթորիկներ»։
0-RTT и TLS 1. 3. Արագ ձեռագիր, կարճ ճանապարհ դեպի առաջին բայթ։
Հոսքերի գերակայությունը 'կրիտիկական ազդանշանները (շարժիչի նախաձեռնումը, հիմնական ատլասը) ավելի մեծ գերակայություն են ստանում։
CDN եւ քեշը եզրին
POP-2019-ը ավելի մոտ է խաղացողին, քաշում են անփոփոխ ազդանշաններ (ծանր անուններ)։
«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-ի վրա ՝ «լոբբի», «tutorial», «1-3», «խանութ»։
Առաջին էկրանը ստանում է միայն նախաձեռնող չանկը (50-150 KB gz/2019)։ Մնացածը խնդրանքով է։
Tree-shaking և մինիֆիկացիա
Հեռացրեք API-ի չօգտագործված շարժիչը/գրադարանները։- Terser/LightningCSS + module soft Effects = false մահացած կոդի ագրեսիվ կտրման համար։
Դինամիկ բեռնման օրինակ
js
//Մենք բեռնում ենք մարտական ռենդերերը միայն BattleRenderer = await imics ("./chunks/battleRenderer. js');
new BattleRenderer(). mount(canvas);3) Ասետներ ՝ բայթերի հիմնական խնայողությունները
Պատկերներ
CorP/AVIF-ի համար UI/նկարազարդումների համար ՝ մինուս 25-50 տոկոսը PNG/JPEG-ի դեմ։
Սպրայթ թերթերը և ատլասները նվազեցնում են կոլը հարցումների և ծախսերը։- Device/Client Hinance: "Accept-CH: DPR, Width, Viewom-Width '108 սերվերը/edge տալիս է անհրաժեշտ չափը։
3D/Տեքստուրներ
Basis/UASTC (KTX2) 'GPU-տեքստուրի համընդհանուր սեղմումը (ETC1S/ASTC/BC) - մեկ ֆայլը, որը տարածվում է տեսահոլովակի ձևաչափով։
Միպ մակարդակները ծանրաբեռնված են առաջընթացով 'սկզբում ցածր որակը, այնուհետև' ապսեմպլը։
Աուդիո
Opus-ի փոխարեն MP3/AAC-ը ավելի լավ է ցածր բիթերում։ պահանջով (գոտու երաժշտությունը գոտի մտնելուց հետո)։
Տեսահոլովակ/քաթ տեսարաններ
DirectCodecs/Windows Source և LL-HMS կարճ տեսահոլովակների համար։ փոստ և առաջին սեգմենտը վերամշակումն է, մնացած մասը 'ծույլ։
4) Շարժիչի նախաձեռնումը 'սկզբում «կմախք», ապա «միս»։
Lazy scene graph
Մենք բեռնում ենք միայն կրիտիկական տեսարաններ (UI, տեսախցիկ, ֆոն)։ Մոդելներ/շեյդերներ, առաջին անհրաժեշտության դեպքում։
Ֆոնային asset jobs: բեռնիչը գերակայությունների հետ է պահում։
I. 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) DiGL և WASM: «ոչ» արագությունը զննարկիչում
WinGL/WinGPU 'շեյդերներ և ռենդեր GPU-ում; CPU-ն մնում է տրամաբանության վրա։- Direct Assembly (WASM) 'շարժիչի ծանր մասերը (ֆիզիկան, ճանապարհը, տեքստուրը) աշխատում են գրեթե որպես անձնական գրադարաններ։
- Հոսքերը (Web Workers) 'տեքստուրը/աուդիո, մակարդակների պարսինգը, զանգվածի պատրաստումը առանց հիմնական հոսքի արգելափակման։
Առաջին շրջանակի օպտիմիզացումը (FTF - First Time to Frame)
FTF-ի համար մենք զոհաբերում ենք «գեղեցկություն» 'բեռնված low-poly/low-res, մինչև strimim 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 ms (CDN-ից)։
LCP (լոբբի) <1։ 8–2. 5 հետ բջջային։
Time-to-First-Interaction (TTFI) < 2–3 с.
First Frame In-Game <1-2 բեմի մեկնարկից հետո։
Total Download (առաջին մեկնարկը): 351-3 MB լոբբիի վրա, 355-10 MB մինչև առաջին պայքարը/մակարդակը։
Կրկնվող արձակումը ՝ 240-200 KB շնորհիվ SW-kasha-ի։
Դիտարկումը 'RUM իրադարձություններ ցանցերի/գեո/սարքերի, Web Vitals-ի, բեռնման առաջընթացի, մի օր-աուտների մասին։
8) Հավաքումը 'ինչպես ստանալ «բարակ առաջին բայթ»
1. Բանդլի վերլուծությունը (source-map-inter, webpack-bundle-anenszer)։
2. Կոդ-համախմբում է բեմերի/վերջերի, «հաստ» պոլիֆիլների հեռացումը (ժամանակակից զննարկիչները)։
3. Minifation: Terser/ESBuild + CSS Minify, dev տրամաբանության հեռացում։
4. Պատկերները ՝ "sharp/sportosh 'www.AVIF/Windows P," www.cset "։
5. Տեքստուրներ ՝ ծրար KTX2 (Basis/UASTC), միպների ստեղծում։
6. Աուդիո 'Opus VBR 48-96 kbps, տեսահոլովակները կրճատված են։
7. Դիմադրության մանիֆեստը (արտեֆակտը) + hash-անուններ + «immutable»։
8. PWA/SW 'միջուկի նախադրյալը, runtime-cash ատլասները' «stale-while-revalidate»։
9. CDN: Preload-hints, «Surrogate-Corl», Soft-Purge թեստերով։
9) Ռանտայմի արտադրողականությունը 'որպեսզի խաղը «թռչի» բեռնումից հետո
Main-thread budget 'պահեք JS-tasks <50 ms; ծանր 'Workers-ում։
Batch-render: Խմբավորեք www.ru-calls, օգտագործեք instansing։
GC ճնշումը 'վարձեք զանգվածները/սուլֆերը, խուսափեք խաղաթղթերի «աղբից»։- Հարմարվողական FPS 'նվազեցրեք հետպատերազմյան էֆեկտների որակը FPS-ի անկման ժամանակ, առանց գայթակղության։
10) Anti-patterna (ինչ է անում խաղը դանդաղ)
Մեկ մոնոլիտ ավազակ 5-15 ՄԲ «սկսելու»։
PNG տեքստուրները առանց GPU-ի, KTX2/Basis-ի բացակայությունը։
«rng% N» -ը ասետների բեռնման մեջ (դետերմինացիան ավելի կարևոր է, բայց դա նաև PF-ի մասին է)։- Հարցումներ առանց քեշի վերնագրերի կամ առանց ծանր անունների, յուրաքանչյուր այցելություն «սառը» է։
- Պոլիֆիլները ամբողջ աշխարհի համար (IE, հին Safari) - ապշեցուցիչ մեգաբայթ։
- SW/նախնական բեռնման բացակայությունը կրկնվող այցերն են նույնքան ծանր, որքան առաջինը։
- «Ծանր» տառատեսակները (մի քանի գծագրություններ առանց «unicode-range» և «font-play: swap»)։
11) Արագ HTML5 խաղի չեկի ցուցակը
Ցանցը և CDN
- HTTP/3 ներառվում է, «preconnect» -ը CDN/պրովայդերներին։
- `Cache-Control: immutable` + hash-имена; `stale-while-revalidate`.
Կոդ և ավազակներ
- Code-Compute-ը բեմում; ES մոդուլներ; tree-shaking.
- Նախաձեռնող JS 24150 KB 71; կոդի քարտեզները առանձին։
Ասացվածքներ
- Pro P/AVIF UI-ի համար; KTX2 Basis/UASTC տեքստերի համար։
- Ատլասներ և առասպելներ; աուդիո Opus; ծույլ տեսահոլովակներ/տեսահոլովակներ։
PWA/kash
- WindoWorker: runtime-cash atlass։
- Կրկնվող այցը բեռնվում է «տաք» քեշից։
Առաջնահերթություններ
- «preload» կրիտիկական չանկեր/ատլասներ; «fetchpriority» կարևոր համար։
- Ցածր գերակայություն երկրորդական տեսարանների վրա։
Մետրիկները
- TTFB/LCP/TTFI/FTF/Download-budget դաշնամուրի վրա։
- Ալերտները քաշի աճի, hit-ratio CDN-ի անկման մասին։
12) Վերնագրերի մինի բաղադրատոմսերը
Ստատիկա (JS/CSS/ատլասներ)
Cache-Control: public, max-age=31536000, immutable
Content-Encoding: brJSON-մանիֆեստները (հաճախ փոխվում են)
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-originHTML5 խաղերը ավելի արագ են բեռնվում, քանի որ վեբ պլատֆորմը համատեղում է ռուսական տրանսպորտը (HTTP/2-3, TLS 1։ 3), խելացի առաքում (CDN, kash, probuck), թեթև ասացվածքներ (CorP/AVIF, KTX2, Opus) և ռուսական ռեալիզացիա (կոդ-սպիրտ, ծույլ տեսարաններ, SW-kash)։ Ավելացրեք WedGL/WASM-ը և չափիչի խիստ կարգապահությունը, և առաջին շրջանակը հայտնվում է վայրկյանում, իսկ կրկնվող կոմպոզիան դառնում է գրեթե ակնթարթ։