چرا بازی های HTML5 سریعتر بارگذاری می شوند

مقدمه: سرعت = تبدیل

برای بازی ها در مرورگر، «بارگیری سریعتر» به معنای: بایت کمتر، درخواست کمتر، انتظار کمتر برای فریم اول است. پشته HTML5 (HTML/CSS/JS/WebGL/WASM) تحویل مدرن و ذخیره سازی را از جعبه، که به معنی TTFB کوتاه، LCP کم و سریع زمان به اولین تعامل (TTFI).

1) شبکه و حمل و نقل: چرا وب به طور پیش فرض سریعتر است

HTTP/2 и HTTP/3 (QUIC)

چندگانه سازی: ده ها تن از دارایی ها (sprites، تکه های کد) در یک اتصال قرار می گیرند - هیچ «طوفان» TCP وجود ندارد.

0-RTT и TLS 1 3: دست دادن سریع، راه کوتاه تر به اولین بایت.

اولویت بندی موضوع: دارایی های مهم (راه اندازی موتور، اطلس اصلی) اولویت بالاتری دریافت می کنند.

CDN و کش لبه

POP گره نزدیک به بازیکن کش دارایی های غیر قابل تغییر (نام هش).

«stale-while-revalidate» به شما امکان می دهد نسخه قدیمی را نشان دهید و همزمان نسخه جدید را بکشید.

عناوین (دستور العمل):


کش کنترل: عمومی، حداکثر سن = 31536000، تغییر ناپذیر
محتوا رمزگذاری: BR// для JS/CSS (بروتلی)
Cross-origin-resource-policy: خط مشی منابع متقابل
زمانبندی اجازه می دهد منبع:

2) بسته بندی و تقسیم کد: ارائه «به همان اندازه که شما نیاز دارید»

ماژول های ES و واردات پویا

کد را به بسته های سطح تقسیم کنید: «لابی»، «آموزش»، «سطح 1-3»، «فروشگاه».

صفحه اولیه تنها مقدار اولیه (50-150 KB gz/br) را دریافت می کند. بقیه در تقاضا است.

درخت تکان دادن و minification

حذف API های استفاده نشده موتور/کتابخانه.

Terser/LightningCSS + module sideEffects = false به شدت کد مرده را کاهش می دهد.

مثال بارگذاری پویا:

جی اس
//بارگذاری رندرر نبرد تنها در آغاز نبرد const {BattleRenderer} = در انتظار واردات ('./chunks/battleRenderer. ج) ؛
جدید BattleRenderer (). کوه (بوم) ؛

3) دارایی: پس انداز بایت اصلی

تصاویر و تصاویر

WebP/AVIF برای UI/تصاویر: منهای 25-50٪ به اندازه در مقابل PNG/JPEG.

لیست ها و اطلسهای Sprite پرس و جوها و سربار را کاهش می دهند.

نکات دستگاه/مشتری: «Accept-CH: DPR، Width، Viewport-Width» → سرور/لبه اندازه مورد نظر را می دهد.

3D/Textures

Basis/UASTC (KTX2): فشرده سازی جهانی بافت GPU (ETC1S/ASTC/BC) - بارگذاری یک فایل، باز کردن آن در فرمت کارت گرافیک.

سطح Meep به تدریج بارگذاری می شود: ابتدا کیفیت پایین → سپس نمونه.

صوتی و تصویری

اپوس به جای MP3/AAC - بهتر در bitrates پایین ؛ آهنگ های جریان در تقاضا (موسیقی منطقه - پس از ورود به منطقه).

ویدئو/برش

WebCodecs/MediaSource و LL-HLS برای فیلم های کوتاه ؛ پوستر و بخش اول - پیش بارگذاری، بقیه - تنبل.

4) راه اندازی موتور: ابتدا «اسکلت»، سپس «گوشت»

نمودار صحنه تنبل

ما فقط گره های صحنه بحرانی (UI، دوربین، پس زمینه) را بارگذاری می کنیم. مدل ها/شیدرها - در صورت نیاز.

Background asset jobs: بوت لودر یک صف اولویت دارد.

کارگر خدمات (SW) به عنوان یک «کش گرم»

در اولین بازدید نصب شده و هسته مشتری، آشکار اطلس، شیدرها را ذخیره می کند.

پس از ورود مجدد - آمادگی آفلاین و ~ TTFI بلافاصله.

نمونه ای از استراتژی SW (ساده شده):

خود جی. addEventListener ('fetch', e => {
e.With (انبارها. باز کردن ('game-v12') سپس (async c => {
const ذخیره شده = انتظار. بازی (e. درخواست) ؛
const تازه = واکشی (e. درخواست) سپس (r => {c. put (e. درخواست، ر. کلون ()) ؛ بازگشت r ؛}) ؛
بازگشت ذخیره شده        تازه ؛
}));
});

5) WebGL و WASM: سرعت «بومی» در مرورگر

WebGL/WebGPU: شیدرها و رندر - بر روی GPU ؛ CPU در منطق باقی می ماند.

WebAssembly (WASM): بخش های سنگین موتور (فیزیک، مسیر، باز کردن بافت) تقریبا مانند کتابخانه های بومی کار می کنند.

Web Workers: رمزگشایی بافت/صوتی، تجزیه سطح، تهیه مش - بدون قفل جریان اصلی.

اولین بار به قاب (FTF) بهینه سازی:

به خاطر FTF، ما «زیبایی» را قربانی می کنیم: بار کم پلی/کم رزولوشن، جریان بالا بعد.

6) اولویت بندی بارگیری: اجازه دهید مهم اول عبور کند

نکات HTML:

HTML
<link rel = "preconnect" href = "https ://cdn. به عنوان مثال. کام">
<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">

واکشی اولویتها و «واکشی اولویت»

' fetchpriority =» high»' - شروع JS و UI اطلس.

بقیه دارایی ها «کم» هستند تا در مسیر بحرانی دخالت نکنند.

7) معیارها و SLO بازی های سریع HTML5

اهداف:

TTFB <200-300 ms (با CDN).
LCP (لابی) <1. 8–2. 5 ثانیه در موبایل
زمان تعامل اول (TTFI) <2-3 с.
اولین فریم در بازی <1-2 ثانیه پس از شروع صحنه.
مجموع دانلود (اجرای اول): ≤ 1-3 MB در هر لابی, ≤ 5-10 MB تا نبرد اول/سطح.
راه اندازی مجدد: ~ 0-200 کیلوبایت به لطف کش SW.

قابلیت مشاهده: رویدادهای RUM در شبکه ها/geo/devices، Web Vitals، پیشرفت بوت لودر، خرابی های زمان.

8) مونتاژ خط لوله: چگونه می توان یک «بایت اول نازک» دریافت کرد

1. تجزیه و تحلیل بسته نرم افزاری (source-map-explorer، webpack-bundle-analyzer).

2. کد تقسیم شده توسط صحنه ها/ویژگی ها، حذف پلیفیلهای «ضخیم» (ما مرورگرهای مدرن را هدف قرار می دهیم).

3. Minification: Terser/ESBuild + CSS Minify، حذف منطق dev.

4. تصاویر: «sharp/squoosh» → AVIF/WebP، تولید «srcset».

5. بافت: پاکت در KTX2 (Basis/UASTC)، ایجاد میپس.

6. صوتی: Opus VBR 48-96 kbps، کلیپ ها - پیش نمایش کوتاه.

7. دارایی های آشکار (مصنوع) + نام هش + 'تغییر ناپذیر'.

8. PWA/SW: هسته پیش کش، کش زمان اجرا اطلسها با 'stale-while-revalidate'.

9. CDN: پیش بارگذاری نکات، 'کنترل جانشین'، نرم پاکسازی توسط برچسب.

9) عملکرد زمان اجرا: برای ایجاد بازی «پرواز» پس از بارگذاری

بودجه اصلی موضوع: JS-taski را نگه دارید <50 ms ؛ سنگین - در کارگران.

رندر دسته ای: گروه قرعه کشی تماس، استفاده از instancing.

فشار GC: اجاره آرایه/بافر، اجتناب از «زباله» در تیک بازی.

FPS تطبیقی: کاهش اثرات پس از FPS قطره بدون دست زدن به گیم پلی.

10) ضد الگوهای (که باعث می شود بازی آهسته)

یک بسته نرم افزاری یکپارچه 5-15 مگابایت «برای شروع».

بافت PNG بدون فشرده سازی GPU، بدون KTX2/Basis.

'rng٪ N' در لودر دارایی (تعیین مهم تر است - اما این نیز در مورد PF).

درخواست بدون هدر کش و یا بدون نام هش → هر بازدید «سرد».

Polyphylls برای تمام جهان (IE، Safari قدیمی) - کشیدن مگابایت بیهوده است.

کمبود SW/preloads - بازدید مکرر به عنوان اولین مشکل است.

فونت های «سنگین» (چندین سبک بدون «unicode-range» و «font-display: swap»).

11) چک لیست بازی سریع HTML5

شبکه و CDN

HTTP/3 فعال شود ؛ «انتخاب» به CDN/ارائه دهندگان.
'Cache-Control: غیر قابل تغییر' + hash- имена; 'stale-while-revalidate'.

کد و بسته نرم افزاری

کد تقسیم بر صحنه ؛ ماژول های ES ؛ درخت تکان دادن.
راه اندازی JS ≤ 150KB br ؛ کد های جداگانه

دارایی ها

WebP/AVIF برای UI ؛ پایه KTX2/UASTC برای بافت.
اطلس و میپس ؛ اپوس صوتی ؛ فیلم ها/برش های تنبل.

PWA/کش

سرویس کارگر: هسته قبل از کش، کش زمان اجرا اطلس.
بازدید دوم لود شده است «از گرم» کش.

اولویت ها

'پیش بارگذاری' تکه های بحرانی/اطلس ؛ «حق تقدم» برای مهم.
اولویت پایین به صحنه های ثانویه.

معیارهای اندازه گیری

TTFB/LCP/TTFI/FTF/دانلود بودجه در داشبورد.
هشدارها در مورد افزایش وزن، نسبت ضربه CDN سقوط.

12) دستور العمل های عنوان کوچک

استاتیک (JS/CSS/اطلس):


کش کنترل: عمومی، حداکثر سن = 31536000، تغییر ناپذیر
رمزگذاری محتوا: br

بیانیه صحنه JSON (اغلب تغییر):


Cache-Control: عمومی، حداکثر سن = 60، stale-while-revalidate = 120
جانشین کنترل: حداکثر سن = 60، stale-if-error = 600

فونت ها:


کش کنترل: عمومی، حداکثر سن = 31536000، تغییر ناپذیر
Cross-origin-resource-policy: خط مشی منابع متقابل

بازی های HTML5 سریعتر بارگذاری می شوند، زیرا پلت فرم وب ترکیبی از حمل و نقل کارآمد (HTTP/2-3 TLS 1 است. 3)، تحویل هوشمند (CDN، cache، preload)، دارایی های سبک (WebP/AVIF، KTX2، Opus) و مقدار اولیه افزایشی (تقسیم کد، صحنه های تنبل، حافظه پنهان SW). WebGL/WASM و نظم متریک دقیق را اضافه کنید - و اولین فریم در عرض چند ثانیه ظاهر می شود و ورود مجدد تقریبا لحظه ای می شود.