Კრიპტო კაზინო
Torrent Gear
Რატომ HTML5 თამაშები უფრო სწრაფად იტვირთება
შესავალი: სიჩქარე = კონვერტაცია
ბრაუზერში თამაშებისთვის, „სწრაფად ჩამოტვირთვა“ ნიშნავს: ნაკლები ბაიტი, ნაკლები მოთხოვნა, პირველი ჩარჩოს ნაკლები მოლოდინი. HTML5 დასტის (HTML/CSS/JS/WebGL/WASM) იძლევა თანამედროვე მიწოდებას და ყუთს „ყუთიდან“, რაც ნიშნავს მოკლე TTFB, დაბალი LCP და სწრაფი დრო First-Interaction (tion I).
1) ქსელი და ტრანსპორტი: რატომ არის ვებ - გვერდი უფრო სწრაფი, ვიდრე ნაგულისხმევი
HTTP/2 и HTTP/3 (QUIC)
მულტიპლექსირება: ათობით ასეტი (სპრიტი, კოდის მონეტები) მიდის ერთ კავშირში - არ არსებობს TCP „ქარიშხალი“.
0-RTT и TLS 1. 3: სწრაფი ხელი, მოკლე გზა პირველი ბაიტისკენ.
ნაკადების პრიორიტეტი: კრიტიკული ასეტები (ძრავის ინიციალიზაცია, მთავარი ატლასი) უფრო მეტ პრიორიტეტს იძენს.
CDN და ქეში ზღვარზე
POP კვანძები უფრო ახლოს არის მოთამაშესთან, ხდება უცვლელი ასეტების (hash სახელები).
'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 და კოდი-split: ჩვენ მივცემთ „ზუსტად იმდენი, რამდენიც საჭიროა“
ES მოდულები და დინამიური იმპორტი
დაყოფილია კოდი ზედა პაკეტებზე: „ლობი“, „ტუტორიალი“, „დონე 1-3“, „მაღაზია“.
პირველი ეკრანი იღებს მხოლოდ ინიციალიზაციის ჩანკს (50-150 KB gz/br). დანარჩენი მოთხოვნაა.
Tree shaking და minification
ჩვენ ამოიღეთ გამოუყენებელი API ძრავა/ბიბლიოთეკები.
Terser/LightningCSS + module sideEffects = false მკვდარი კოდის აგრესიული ჭრისთვის.
დინამიური ჩატვირთვის მაგალითი:js
//ჩვენ ატვირთავთ საბრძოლო გამყიდველს მხოლოდ ბრძოლის დაწყებისას const {BattleRenderer} = await import ('./chunks/battleRenderer). js');
new BattleRenderer(). mount(canvas);3) ასეტები: ბაიტის ძირითადი დანაზოგი
სურათები
WebP/AVIF UI/ილუსტრაციებისთვის: ზომების მინუს 25-50% PNG/JPEG წინააღმდეგ.
Sprite ფურცლები და ატლასები ამცირებენ მოთხოვნის და გადასახადის ხარჯებს.
Device/Client Hints: 'Accept-CH: DPR, Width, Viewport-Width' სერვერი/edge იძლევა საჭირო ზომას.
3D/ტექსტურა
Basis/UASTC (KTX2): GPU ტექსტურის უნივერსალური შეკუმშვა (ETC1S/ASTC/BC) - დატვირთული ერთი ფაილი, გადახურულია ვიდეო ბარათების ფორმატით.
Mip დონის დატვირთვა პროგრესულად ხდება: ჯერ დაბალი ხარისხი, შემდეგ apsampl.
აუდიო
Opus ნაცვლად MP3/AAC - უკეთესია დაბალი ბიტრატებით; მოთხოვნის ბილიკების ნაკადი (ზონის მუსიკა ზონაში შესვლის შემდეგ).
ვიდეო/კატის სცენა
WebCodecs/MediaSource და LL-HLS მოკლე ვიდეორგოლებისთვის; პლაკატი და პირველი სეგმენტი წინასწარ დატვირთვაა, დანარჩენი ზარმაცი.
4) ძრავის ინიციალიზაცია: ჯერ „ჩონჩხი“, შემდეგ „ხორცი“
Lazy scene graph
ატვირთეთ მხოლოდ კრიტიკული სცენის კვანძები (UI, კამერა, ფონი). მოდელები/შეიდერები - საჭიროების შემთხვევაში.
Fone 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: shaders და Render - GPU- ზე; CPU რჩება ლოგიკაზე.
WebAssembly (WASM): ძრავის მძიმე ნაწილები (ფიზიკა, გზა, ტექსტურის გადახრა) მუშაობს თითქმის როგორც მშობლიური ბიბლიოთეკები.
ნაკადები (Web Workers): ტექსტურა/აუდიო დეკოდი, დონის პარსინგი, ხმლების მომზადება - ძირითადი ნაკადის დაბლოკვის გარეშე.
პირველი ჩარჩოს ოპტიმიზაცია (FTF - პირველი დრო Frame):- FTF- ის გულისთვის, ჩვენ მსხვერპლს „სილამაზეს“ ვწირავთ: ჩვენ ვატარებთ ძვირადღირებულ პოლიტიკას/დაბალი სიჩქარით, შემდეგ კი ნაკადს.
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“' - UI ინიციალიზაციის JS და ატლასი.
დანარჩენი ასეტები არის 'დაბალი' ისე, რომ არ ჩაერიოს კრიტიკულ გზაზე.
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 ევრო პირველი ბრძოლა/დონეზე.
- ხელახალი გაშვება: ~ 0-200 KB SW ქეშის წყალობით.
დაკვირვება: RUM მოვლენები ქსელებში/გეო/მოწყობილობებში, Web Vitals, მტვირთავის პროგრესი, დროის უკმარისობა.
8) Pipline ასამბლეა: როგორ მივიღოთ „თხელი პირველი ბაიტი“
1. Bandle- ის ანალიზი (source-map-explorer, webpack-bundle-analyzer).
2. Split კოდი სცენაზე/fiich- ში, „სქელი“ პოლიფილების მოცილება (თანამედროვე ბრაუზერების მიზნობრივი).
3. მინიფიგურა: Terser/ESBuild + CSS Minify, dev ლოგიკის წაშლა.
4. სურათები: 'sharp/síosh' AVIF/WebP, წარმოება 'srcset'.
5. ტექსტურები: კონვერტი KTX2- ში (Basis/UASTC), მილების შექმნა.
6. აუდიო: Opus VBR 48-96 kbps, კლიპები შემცირებულია.
7. ასეტების მანიფესტი (არტეფაქტი) + hash სახელები + 'immutable'.
8. PWA/SW: ბირთვის წინამორბედი, ატლასის runtime ქეში 'stale-while-revalidate'.
9. CDN: Preload-hints, 'Surrogate-Control', Soft-Purge ტეგებით.
9) Rantaim- ის შესრულება: ისე, რომ თამაში „დაფრინავს“ დატვირთვის შემდეგ
Main-thread budget: გამართეთ JS ტასკები <50 ms; მძიმე - Workers- ში.
Butch Render: დაჯგუფება draw-calls, გამოიყენეთ ინსტალაცია.
GC წნევა: ქირავდება მასივები/ბუფერები, თავიდან აიცილეთ „ნაგავი“ თამაშის ტიკებში.
ადაპტირებული FPS: შეამცირეთ პოსტ-ეფექტების ხარისხი FPS- ის დაცემის დროს, გეიმპლეის შეხების გარეშე.
10) ანტი-ნიმუშები (რაც თამაშს ნელი ხდის)
ერთი მონოლითური ბანდლი 5-15 MB „დასაწყისისთვის“.
PNG ტექსტურა GPU კომპრესიის გარეშე, KTX2/Basis- ის არარსებობა.
'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; კოდის ბარათები ცალკე.
ასეტები
- WebP/AVIF UI- სთვის; KTX2 Basis/UASTC ტექსტურისთვის.
- ატლასი და მითები; აუდიო ოპუსი; ზარმაცი ვიდეო/ვიდეო.
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
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, ქეში, წინასწარი დატვირთვა), მსუბუქი ასეტები (WebP/AVIF, KTX2, Opus) და სავარაუდო ინიციალიზაცია (კოდი სპლიტი, ზარმაცი სცენები, SW ქეში). დაამატეთ WebGL/WASM და მკაცრი მეტრიკის დისციპლინა - და პირველი ჩარჩო ჩნდება წამში, ხოლო მეორე შესასვლელი თითქმის მყისიერი ხდება.