سازگاری متقابل مرورگر از بازی های HTML5: ماتریس آزمون

1) چرا بازی های HTML5 «صدمه دیده» مرور متقابل

بازی ها تقریبا تمام لایه های پلت فرم را تحت تاثیر قرار می دهند: گرافیک (Canvas/WebGL/WebGPU)، تایمر و جریان (RAF/Workers)، صدا (سیاست های WebAudio/Media)، ورودی (صفحه کلید/اشاره گر/لمسی/گیم پد)، شبکه و کش (SW/Cache/Indepad exedDB)، ادغام (تمام صفحه/جهت گیری/PWA). موتورهای مختلف - Chromium (Chrome/Edge/Opera/Android)، WebKit (Safari/macOS، iOS/iPadOS در تمام مرورگرها)، Gecko (Firefox). به علاوه تفاوت در صرفه جویی در قدرت، زبانه های پس زمینه، محدودیت حافظه و سیاست های پخش خودکار.

2) محیط های پشتیبانی شده: ماتریس هدف

مرورگرها/OS (حداقل نسخه ها یک مثال هستند، SLA های خود را جایگزین کنید):

دسکتاپ: کروم/Edge 116 +، فایرفاکس 115 +، Safari 16 + (macOS 12 +).
موبایل: Chrome Android 116 + (Android 9 +)، Samsung Internet 21 +، Safari iOS/iPadOS 16 +.
WebView: Android WebView 116 +، iOS - فقط WebKit (تمام مرورگرها در iOS از WebKit استفاده می کنند).
PWA (نصب): دسکتاپ کروم/تلفن همراه، Safari iOS 16. 4 + (اضافه کردن به صفحه اصلی با محدودیت).

کلاس های سخت افزاری:

کم (بودجه تلفن همراه، 2 گیگابایت رم)
متوسط (تلفن همراه/ultrabooks، 4-8 گیگابایت رم)
بالا (GPU دسکتاپ/مصرف کننده، 8-16 + گیگابایت)

3) ماتریس آزمون بزرگ (قالب)

یک جدول واقعی در ردیاب خود ایجاد کنید. در زیر بلوک های کلیدی و وضعیت (OK/Partial/N/A) است که باید اندازه گیری شود.

3. 1 گرافیک

زیر سیستم	صفحه نمایش کروم	سافاری (iOS/macOS)	فایرفاکس	یادداشت های تبلیغاتی
بوم 2D (HiDPI، آلفا)				DPI مقیاس پذیری، مصنوعات بیت
WebGL 1. 0				از دست دادن زمینه، حداکثر اندازه بافت
WebGL 2. 0				در iOS/قدیمی سافاری اغلب جزئی
WebGPU (در صورت استفاده)				مسیر پرچم/پلی پیل
بوم خارج از صفحه				iOS: تا حدی/نه در WebView
WebAssembly SIMD/موضوعات				محدودیت در iOS جریان دارد ؛ کوپ/کوپ

3. ۲ سیاستهای صوتی و رسانهای

زیر سیستم	صفحه نمایش کروم	سافاری	فایرفاکس	یادداشت های تبلیغاتی
API وب آدیو				محدودیت های پخش خودکار
پخش خودکار بدون حرکت				iOS: ممنوع, ژست کاربر مورد نیاز
تأخیر (زمینه صوتی)				تاخیر کم در تلفن های همراه متفاوت است

3. 3 ورودی و رابط

زیر سیستم	صفحه نمایش کروم	سافاری	فایرفاکس	یادداشت های تبلیغاتی
رویدادهای اشارهگر				سافاری iOS: ویژگی های ضبط
لمس کردن/ژست				شنوندگان منفعل, جلوگیری از پیش فرض
صفحه کلید (IME، کلید های ویژه)				تفاوت های keyCode/کد
API گیم پد				iOS WebKit بسیار محدود است
API تمام صفحه				iOS: حرکات/نوارها، منطقه امن
جهت قفل کردن				iOS نیاز به حرکت کاربر دارد

3. 4 عملکرد و صرفه جویی در انرژی

زیر سیستم	صفحه نمایش کروم	سافاری	فایرفاکس	یادداشت های تبلیغاتی
requestAnimationFrame (60/120 Гц)				مانیتورهای 120 هرتز، iOS 120 هرتز ProMotion
کاهش پسزمینه				تایمر گیره در تب پس زمینه
کلاه حافظه/OOM				برگه اضافه بار iOS در 500-800 MB

3. 5 صرفه جویی/آفلاین/شبکه

زیر سیستم	صفحه نمایش کروم	سافاری	فایرفاکس	یادداشت های تبلیغاتی
IndexedDB (سهمیه بندی)				iOS: سهمیه ها کوچک هستند/تمیز کردن توسط سیستم
محلی/جلسه ذخیره سازی				حالت های خصوصی تمیز/مسدود می شوند
کارگر خدمات/کش				iOS - محدودیت نرخ بیداری
Fetch/CORS/HTTP/2/3				تفاوت های قبل از پرواز/زنده نگه داشتن

4) حداقل مجموعه ای از اسکریپت های دستی (دود)

1. شروع اول: بارگذاری دارایی ها، چلپ چلوپ، شروع سطح <3 s در طبقه متوسط.

2. ورودی: لمس/ماوس/صفحه کلید/گیم پد، چند انگشت، نگه داشتن، کشیدن.

3. صفحه نمایش: تمام صفحه، قفل جهت گیری، منطقه امن (آیفون با انفجار).

4. صوتی: اولین یادداشت پس از ژست سفارشی، خاموش/بی صدا، مخلوط موسیقی/FX.

5. WebGL: از دست دادن/بازیابی زمینه (شبیه سازی)، سایه ها/سایه ها/مقیاس.

6. چرخه زندگی: سقوط/گسترش، تماس/اطلاع رسانی، تب در پس زمینه.

7. موجب صرفه جویی: پیشرفت/تنظیمات در IndexedDB/LocalStorage، بازیابی پس از راه اندازی مجدد/آفلاین.

8. شبکه: 3G دریچه گاز/RTT بالا، از دست دادن شبکه، retray، ذخیره از طریق SW.

9. PWA: نصب (Chromium/iOS)، آیکون ها، صفحه آفلاین، به روز رسانی نسخه.

10. جلسه طولانی: 20-30 دقیقه بدون نشت (FPS/heap پایدار).

5) اتوماسیون: چگونه و چگونه

نمایشنامه نویس (توصیه می شود): موتور متقابل، شبیه سازی تلفن همراه، راننده WebKit، ویدئو/آهنگ.

Cypress: حلقه توسعه سریع، اما WebKit/تلفن همراه محدود است.

WebDriver/سلنیوم: ادغام ابر.

ابرها: BrowserStack، آزمایشگاه سس - دستگاه های واقعی و سافاری iOS.

پروفایل: پروتکل Chrome DevTools، Safari Web Inspector (Remote)، Profiler فایرفاکس.

اسکریپت Perf: K6/مرورگر برای RUM مانند اسکریپت بارگذاری دارایی.

نکته: نگه داشتن یک «بسته» از autotests برای 3-5 دقیقه (دود) برای هر روابط عمومی: بارگیری، یک چرخه بازی، مکث، جهت گیری سوئیچینگ، چک کردن ذخیره کنید.

6) عملکرد: معیارهای هدف و تله متری

FPS: پایدار 60 فریم در ثانیه (یا 120 در ProMotion) - ضبط فریم، نه فقط به طور متوسط.

بودجه قاب: 16. 7 میلی ثانیه (یا 8. 3 ms) در به روز رسانی + رندر، GC <2-3 ms در هر قاب.

تاخیر ورودی: <80 میلی ثانیه تلفن همراه، 50 میلی ثانیه دسکتاپ

زمان اولین فریم (TTFF): <1. 5 ثانیه (پس از بارگیری دارایی).

رشد پشته: بیش از + 10٪ در هر 20 دقیقه جلسه ؛ عدم تخصیص بودجه.

تاخیر صوتی: <100ms رفت و برگشت.

قراردادن RUM: ارسال FPS، TTFF، هیپ، زمینه WebGL تله متری را از دست داد، خطاهای رندر توسط «مرورگر/os/دستگاه».

7) ناسازگاری های مکرر و نحوه درمان

7. 1 گرافیک/رندر

HiDPI اندازه منطقی Canvas-Set = CSS px, physical = 'css devicePixelRatio'.

زمینه WebGL از دست رفته: گوش دادن به 'webglcontextlost/webglcontextrestored'، منابع ذخیره برای راه اندازی مجدد.

Textures/shaders: اجتناب از پسوند غیر جهانی ؛ چک کردن OES _ texture _ float, EXT _ color _ buffer _ float, and fallback.

WebGPU: ویژگی پرچم رول ؛ راه WebGL2 به عنوان یک عقب نشینی نگه دارید.

7. 2 صوتی/پخش خودکار

AudioContext را با یک ژست سفارشی («ضربه بزنید/کلیک کنید») شروع کنید و پرچم «مجاز» را نگه دارید.

در iOS، آماده به حالت تعلیق زمانی که به حداقل رساندن/تعویض.

7. 3 ورودی/حرکات

شنوندگان رویدادها به طور پیش فرض منفعل هستند ؛ جایی که 'preventDefault ()' به صراحت غیرفعال کردن منفعل است.

رویدادهای اشاره گر + رویدادهای لمسی - اجتناب از پردازش دوگانه ؛ انتزاعی لایه ورودی.

گیم پد: بررسی "ناوبر. getGamepads () 'از طریق RAF، طرح دکمه ها را در نظر بگیرید.

7. 4 تمام صفحه/جهت/منطقه امن

برای iOS، env (safe-area-inset-) را در نظر بگیرید، padding را به بوم/رابط کاربری Overlay اضافه کنید.

قفل جهت فقط پس از ژست کاربر ؛ یک دکمه «چرخش صفحه» داشته باشید.

7. 5 Storigi/آفلاین

IndexedDB: عملیات بسته بندی در زمان بندی/بازپرداخت ؛ در iOS، سهمیه ها کوچک هستند - صرفه جویی در سبک وزن.

کارمند خدمات: استراتژی «Stale-While-Revalidate» برای دارایی ها ؛ صادقانه نسخه های غیر فعال (محتوا هش).

LocalStorage ممکن است در حالت خصوصی در دسترس نباشد - به حافظه هشدار دهنده کاهش می یابد.

7. 6 تایمر/پس زمینه

در پس زمینه، تایمرها تا 1 ثانیه یا بیشتر جمع می شوند. منطق سنگین را متوقف کنید، بازی را متوقف کنید.

به جای فواصل، به روز رسانی صفحه/« visibilitychange »و رویداد را فعال کنید.

8) مونتاژ خط لوله برای crossbrowser

Transpilation: TypeScript/Babel 'es2020' (یا پایین تر برای WebViews های قدیمی تر) را هدف قرار می دهد.

پولیپ ها: فقط تشخیص ویژگی، نه UA.

دارایی ها: ورق های اسپریت، بافت با فرمت های Fallback (WebP/PNG)، صوتی (AAC/OGG/Opus).

جداسازی کد: تکه های تنبل برای پانل های ویرایشگر/غیر بازی.

فشرده سازی: Brotli/Zstd ؛ HTTP/2/3 ؛ CDN با تغییر ناپذیر نسخه.

پرچم های ویژگی: WebGPU/OffscreenCanvas/Threads - فعال کردن توسط لیست سفید.

9) قالب چک لیست

9. 1 گوشی هوشمند (آندروید/کروم، آی فون/سافاری)

لمس + چند لمسی ؛ حرکات صفحه را «کشیدن» نمی کند
تمام صفحه و جهت گیری ؛ منطقه امن درست است
اولین صدا پس از شیر ؛ خاموش کار می کند
FPS ≥ 50 (کلاس پایین)، بدون قاب پاره شده
ذخیره/بازگرداندن پیشرفت پس از راه اندازی مجدد
صحنه آفلاین/راه اندازی مجدد SW
تماس با سیستم (تماس ورودی) → مکث صحیح

9. 2 دسکتاپ (ویندوز/macOS)

ماوس + چرخ + صفحه کلید، IME
گیم پد (XInput/عمومی)
مانیتور 60/120Hz: گام زدن قاب پایدار
Alt-Tab/چندین مانیتور/تمام صفحه/پنجره
حافظه <حد، بدون نشت (20 + دقیقه)

10) نمونه کد (قطعات)

بوم с HiDPI:

تابع js تغییر اندازه بوم (بوم) {
const dpr = ریاضی دقیقه (پنجره). دستگاه نسبت پیکسل         1, 2);
const {clientWidth: w، clientHeight: h} = بوم ؛
بوم نقاشی. عرض = ریاضی. طبقه (dpr) ؛
بوم نقاشی. ارتفاع = ریاضی. طبقه (hdpr) ؛
const ctx = بوم. getContext ('2d');
CTX. setTransform (dpr, 0, 0, 0, 0);
}

WebGL: مدیریت از دست دادن زمینه:

js const gl = بوم نقاشی getContext ('webgl', {preserveDrawingBuffer: false});
بوم نقاشی. addEventListener ('webglcontextlost', e => {e. preventDefault (); مکث = درست است;});
بوم نقاشی. addEventListener ('webglcontextrestored', () => {بارگذاری مجدد منابع (); مکث = غلط;});

صوتی «باز کردن»:

js let audioUnlocked = غلط ؛
پنجره. addEventListener ('pointerdown', () => {
اگر (! audioUnlocked) {
const ctx = جدید AudioContext ();
کانست b = ctx. createBuffer (1, 1, 22050);
const s = ctx. createBufferSource ();
. بافر = b ؛ . اتصال (ctx. مقصد) ؛ . شروع (0) ؛
audioUnlocked = درست است ؛
}
}، {یک بار: درست، منفعل: درست}) ؛

نمایش صفحه:

سند JS addEventListener ('visibilitychange', () => {
اگر (سند. مخفی) pauseGame ();
else resumeGame () را انتخاب کنید.
});

11) مدیریت ریسک و اولویت بندی

قانون مورفی برای iOS: هر نسخه جزئی از iOS را از ماتریس خود تست کنید - رگرسیون ها مکرر هستند.

WebView OEM: دستگاه های اندرویدی با WebView قدیمی یک لایه خطر جداگانه هستند (دستگاه های «greylist» را وارد کنید).

پرچم های کاربردی: شامل ویژگی های مشکل توسط نام تجاری/خلبانان بازار است.

Rollout: 1% → 10% → 50% → 100% با گیت های RUM (FPS, crash, TTFF).

12) قابل مشاهده و گزارش اشکال

شامل در هر گزارش اشکال: 'ua'، 'نسخه مرورگر'، 'os'، 'دستگاه'، 'gpu/renderer'، 'حافظه'، 'fps'، 'سیاهههای مربوط (خطاهای WebGL/WebAudio)'، 'مراحل'، 'repro video'.

ارسال خودکار سقوط سقوط (JS خطاها/منابع)، «زمینه از دست رفته»، «باز کردن قفل صوتی شکست خورده» رویدادها.

داشبورد: FPS توسط مرورگر/دستگاه، میانگین TTFF، سهم از دست رفته زمینه، خطاهای IndexedDB، بازدیدهای آفلاین SW.

13) ماتریس قالب نهایی (ماهی CSV)


پلت فرم، مرورگر، نسخه، ویژگی، سناریو، انتظار می رود، وضعیت، یادداشت ها
آندروید, کروم, 116 +, WebGL2, زمینه از دست رفته/بازگرداندن, دولت ترمیم, OK, iOS,Safari,16. 6,Audio,First صدا در شیر، نمایشنامه، جزئی، سوئیچ خاموش تاثیر می گذارد
دسکتاپ، فایرفاکس، 115 +، تمام صفحه، ورود/خروج، بدون پرش طرح، OK، آندروید، WebView، 116 +، ذخیره سازی، سهمیه IndexedDB، صرفه جویی در 5MB,PARTIAL,Quota پایین تر در دستگاه X iOS,Safari,16. 4 +، PWA، نصب و راه اندازی مجدد، دولت ادامه داد، OK "، '

---

14) چک لیست آمادگی تولید

[] ثابت مرورگر/نسخه/ماتریس دستگاه و به روز رسانی SLA.
[] دود مجموعه ای از autotests (نمایشنامه نویس) در روابط عمومی و شبانه راه اندازی شد ؛ گزارش با ویدئو/آهنگ.
[] RUM تله متری FPS/TTFF/هیپ/خطاهای WebGL با بخش مرورگر/دستگاه.
[] Folbeki:    WebGPU ؛ باز کردن قفل صوتی ؛ اشاره گر/انتزاع لمسی.
[] چرخه عمر پردازش/دید، مکث/رزومه، آفلاین، زمینه از دست رفته.
[] پایداری پایدار است (تخریب IndexedDB +)، نسخه دارایی از طریق SW/CDN تغییر ناپذیر است.
[] پروفایل ها در دستگاه های واقعی (iOS/Android) و دسکتاپ 60/120 هرتز.
[] مستندات محدودیت های شناخته شده (پخش خودکار iOS، سهمیه IDB، جهت گیری).
[] برنامه های بازگشت/ویژگی های پرچم برای ویژگی های مشکل ساز (WebGPU/موضوعات).
[] کانال بازخورد در بازی (بازخورد + ورود به سیستم تخلیه).

---

خلاصه رزومه

سازگاری متقابل مرورگر بازی های HTML5 یک جعبه چک نیست «در Safari کار می کند»، اما یک نظم و انضباط: یک ماتریس پلت فرم سفت و سخت، معیارهای قابل اندازه گیری (FPS/TTFF/heap)، autotests در دستگاه های واقعی، folkbacks گرافیک/صوتی/ورودی و کار دقیق با آفلاین و موجب صرفه جویی می شود. یک خط لوله تست پایدار را وارد کنید، RUM را جمع آوری کنید و ویژگی های پشت پرچم ها را حفظ کنید - به این ترتیب بازی به همان اندازه صاف و قابل پیش بینی در Chrome، Safari و Firefox، بر روی تلفن و دسکتاپ شما خواهد بود.