Мутобиқати кросс-браузери бозиҳои HTML5: матритсаи санҷишӣ

1) Чаро бозиҳои HTML5 салибро "зарар" медиҳанд

Бозиҳо қариб ба ҳама қабатҳои платформа таъсир мерасонанд: графика (Canvas/Web Индепад экседед DB), ҳамгироӣ (экрани пурра/самтгирӣ/PWA). Муҳаррикҳои гуногун - Chromium (Chrome/Edge/Opera/Android), Web Илова бар ин, фарқиятҳо дар сарфаи қудрат, ҷобаҷогузории ҷадвалҳои пасзамина, маҳдудиятҳои хотира ва сиёсати худкори.

2) Муҳитҳои дастгирӣ: матритсаи мақсаднок

Браузерҳо/ОС (версияҳои ҳадди аққал намуна мебошанд, SLA-ҳои худро иваз кунед):

Мизи корӣ: Chrome/Edge 116 +, Firefox 115 +, Safari 16 + (mac-OS 12 +).
Мобилӣ: Chrome Android 116 + (Android 9 +), Samsung Internet 21 +, Safari i
Web-View: Android Web-View 116 +, IOS - танҳо Web-Kit (ҳамаи браузерҳо дар IOS Web-Kit-ро истифода мебаранд).
PWA (насб): Мизи кории Chromium/мобилӣ, Safari IOS 16. 4 + (Илова ба экрани хонагӣ бо маҳдудиятҳо).

Синфҳои сахтафзор:

Паст (буҷети мобилӣ, 2 ГБ RAM)
Миёна (мобилӣ/ултрабунафш, 4-8 ГБ RAM)
Баланд (мизи корӣ/истеъмолкунандаи GPU, 8-16 + GB)

3) Матритсаи калони санҷишӣ (қолаб)

Дар трекери худ мизи воқеӣ ташкил кунед. Дар зер блокҳои асосӣ ва статусҳо (OK/Partial/N/A) ҳастанд, ки бояд чен карда шаванд.

3. 1 Графика

Зерсистема	Хром	Сафари (IOS/mac-OS)	Firefox	Ad notata
Canvas 2D (HIDPI, алфа)				DPI-миқёси, артефактҳои blit
ВебГЛ 1. 0				Аз даст додани контекст, андозаи максималии матн
ВебГЛ 2. 0				Дар IOS/Сафари кӯҳна аксар вақт қисман
ВебГПУ (агар истифода шавад)				Роҳи хусусият-парчам/полипилл
Экрани берунӣ				IOS: қисман/на дар Веб-View
Вебмасса SIMD/риштаҳо				маҳдудияти IOS. ҷараёнҳо; COOP/COEP

3. 2 Сиёсати аудио ва ВАО

Зерсистема	Хром	Сафари	Firefox	Ad notata
АПИ веб-аудио				Маҳдудиятҳои худкор
Автоплай бе ишорат				IOS: манъ карда шудааст, ишораи корбар талаб карда мешавад
Пинҳонӣ (Матни аудио)				таъхири кам дар телефонҳои мобилӣ фарқ мекунад

3. 3 Вуруд ва интерфейс

Зерсистема	Хром	Сафари	Firefox	Ad notata
Рӯйдодҳои ишорашуда				IOS Safari: хусусиятҳои сабт
Ламс/ишорат				шунавандагони ғайрифаъол, пешпардохт
Клавиатура (IME, калидҳои махсус)				Фарқиятҳои калидӣ/рамзӣ
Gamepad API				Интернети IOS хеле маҳдуд аст
Экрани пурраи API				IOS: имову ишора/рахҳо, минтақаи бехатар
Қулфи самтгирӣ				IOS ишораи корбарро талаб мекунад

3. 4 Фаъолият ва сарфаи энергия

Зерсистема	Хром	Сафари	Firefox	Ad notata
Дархости Animation- Frame (60/120 Гц)				Мониторҳои 120 Гц, IOS 120 Гц Pro
Заминаи Throttling				Вақтсанҷи фишурда дар ҷадвали замина
Сарпӯши хотира/OOM				Ҷадвали изофабори IOS дар 500-800 МБ

3. 5 Сарфа/офлайн/шабака

Зерсистема	Хром	Сафари	Firefox	Ad notata
Индексатсия (квотаҳо)				IOS: квотаҳо аз рӯи система хурд/тоза мебошанд
Захираи маҳаллӣ/сеанс				Усулҳои хусусӣ тоза карда мешаванд/баста мешаванд
Корманди хидматрасонӣ/кэш				IOS - маҳдудиятҳои сатҳи бедорӣ
Fetch/CORS/HTTP/2/3				Фарқиятҳои пеш аз парвоз/нигоҳ доштан

4) Маҷмӯи ҳадди ақали скриптҳои дастӣ (Дуд)

1. Оғози аввал: боркунии дороиҳо, лаппиш, сатҳи оғоз <3 s дар синфи миёна.

2. Вуруд: touch/муш/клавиатура/gamepad, ангуштони сершумор, нигоҳ доштан, swipes.

3. Экран: экрани пурра, қулфи самтгирӣ, минтақаи бехатар (IPhone бо таркиш).

4. Аудио: ёддошти аввал пас аз ишораи фармоишӣ, гунг/хомӯш, омехтаи мусиқӣ/FX.

5. ВебГЛ: гум кардан/барқарор кардани контекст (тақлид кардан), сояҳо/сояҳо/миқёс.

6. Давраи зиндагӣ: пошхӯрӣ/тавсеа, занг/огоҳӣ, ҷадвал дар замина.

7. Нигоҳ доштан: пешравӣ/танзимот дар индексатсия/нигоҳдории маҳаллӣ, барқароршавӣ пас аз бозоғозӣ/офлайн.

8. Шабака: 3G дроссель/RTT-и баланд, аз даст додани шабака, бозгашт, кэш тавассути SW.

9. PWA: насб (Chromium/IOS), нишонаҳо, саҳифаи офлайнӣ, навсозии версия.

10. Ҷаласаи тӯлонӣ: 20-30 дақиқа бидуни ихроҷ (FPS/heap устувор).

5) Автоматика: чӣ тавр ва чӣ тавр

Драматург (тавсия дода мешавад): кросс-муҳаррик, эмулятсияҳои мобилӣ, драйвери WebKit, видео/трекҳо.

Cypress: ҳалқаи тези dev, аммо Web-Kit/mobile маҳдуд аст.

Вебдрайвер/Селениум: ҳамгироии абр.

Абрҳо: Браузери Stack, Sauce Labs - дастгоҳҳои воқеӣ ва IOS Safari.

Профил: Протоколи Chrome Dev

Скриптҳои Perf: k6/браузер барои скриптҳои боркунии дороиҳо ба монанди RUM.

Маслиҳат: "бастаи" автотестҳоро барои ҳар як PR 3-5 дақиқа (дуд) нигоҳ доред: боркунӣ, як давраи бозӣ, таваққуф, самти гузариш, сарфаи санҷиш.

6) Иҷро: ченакҳои мақсаднок ва телеметрия

FPS: 60 fps устувор (ё 120 дар Pro

Буҷаи чорчӯба: 16. 7 мс (ё 8). 3 мс) оид ба навсозӣ + рендер, GC <2-3 мс дар як чорчӯба.

Таъхири вуруд: <80 ms мобилӣ, 50 ms мизи корӣ

Вақт ба-аввал-чорчӯба (TTFF): <1. 5 с (баъди боркунии дороиҳо).

Афзоиши тӯда: на бештар аз + 10% дар 20 дақиқаи сессия; набудани тақсимоти гурезаҳо.

Таъхири аудио: <100ms мудаввар.

Embed RUM: фиристодани FPS, TTFF, тӯда, контексти Web

7) Номутобиқатии зуд-зуд ва чӣ гуна муносибат кардан

7. 1 Графика/намоиш

Андозаи мантиқии Hi

Контексти гумшудаи Webglcontextlost/webglcontextrestrestored гӯш кунед, захираҳоро барои бозоғоз нигоҳ доред.

Матнҳо/shaders: аз васеъшавии универсалӣ дурӣ ҷӯед; OES _ texture _ float, EXT _ color _ buffer _ float ва афтишро санҷед.

ВебГПУ: рол-хусусият-парчам; роҳи WebGL2 ҳамчун таназзул нигоҳ доред.

7. 2 Аудио/автоплей

Бо ишораи фармоишӣ ('клик/клик') оғоз кунед ва парчами "иҷозатдодашуда" -ро нигоҳ доред.

Дар IOS, ҳангоми кам кардани/гузариш таваққуфро омода кунед.

7. 3 Вуруд/имову ишора

Шунавандагони рӯйдодҳо бо нобаёнӣ ғайрифаъол мешаванд; дар куҷо 'пешфарз ()' бояд ба таври возеҳ ғайрифаъол карда шавад.

Рӯйдодҳои нишондиҳанда + Рӯйдодҳои ламс - аз коркарди дукарата худдорӣ кунед; қабати вурудро абстракт кунед.

Gamepad: санҷед 'навигатор. ба даст овардани геймпадҳо () 'тавассути RAF, тарҳбандии тугмаҳоро ба назар гиред.

7. 4 Экрани пурра/Самтгирӣ/Минтақаи бехатар

Барои IOS, ба назар гиред 'env (минтақаи бехатар-inset-)', ба рони/Overlay UI илова кунед.

Роҳнамо танҳо пас аз ишораи корбар қулф карда мешавад; тугмаи "экрани гардиш" дошта бошанд.

7. 5 Storigi/Offline

Индексатсияи DB: амалиёти печондан дар вақтхушӣ/бозсозӣ; дар IOS, квотаҳо хурданд - сарфаҳои сабукро нигоҳ доред.

Корманди хидматрасонӣ: Стратегияи дороиҳои "Кӯҳна дар ҳоле ки-таҷдиди назар"; версияҳои софдилона (мундариҷа-ҳаш).

Анборҳои маҳаллӣ метавонанд дар режими хусусӣ мавҷуд набошанд - ба хотираи огоҳкунанда таназзул ёбанд.

7. 6 Вақтсанҷ/замина

Дар замина таймерҳо то 1 с ё бештар аз он ҷамъ мешаванд. Мантиқи вазнинро бас кунед, бозиро таваққуф кунед.

Намоиши саҳифа/' visibilitychange 'ва навсозиҳои рӯйдодҳоро ба ҷои фосила фаъол созед.

8) Маҷмаи қубур барои кроссворд

Транспилятсия: Type-Script/Babel ҳадафи 'es2020' (ё камтар барои Web-Views-и кӯҳна).

Полифиллҳо: танҳо муайянкунии хусусиятҳо, на UA.

Дороиҳо: варақаҳои sprite, матнҳо бо форматҳои бознишаста (Webp/PNG), аудио (AAC/OGG/Opus).

Ҷудосозии код: танбалӣ барои панелҳои муҳаррир/ғайри бозӣ.

Фишурдасозӣ: Brotli/Zstd; HTTP/2/3; CDN бо тағирёбанда-версия.

Парчамҳои хусусият: Web

9) Қолибҳои рӯйхат

9. 1 Смартфон (Android/Chrome, IPhone/Safari)

Ламс + ламс; имову ишора саҳифаро "кашида" намешавад
Экрани пурра ва самт; минтақаи бехатар дуруст аст
Овози аввал пас аз ламс; кори хомӯшӣ
FPS ≥ 50 (синфи паст), чаҳорчӯбаи каҷ нест
Нигоҳ доштан/барқарор кардани пешрафт пас аз бозоғозӣ
Саҳнаи офлайн/бозоғозии SW
Занги такрории система (занги воридотӣ) → таваққуфи дуруст

9. 2 Мизи корӣ (Windows/macOS)

Муш + чарх + клавиатура, IME
Gamepad (XI 'nput/Generic)
мониторҳои 60/120Hz: қадамҳои чаҳорчӯбаи устувор
Alt-Tab/мониторҳои сершумор/экрани пурра/тиреза
Маҳдудияти хотира <, ихроҷ нест (20 + дақиқа)

10) Намунаҳои рамзӣ (пораҳо)

Canvas s HIDPI:

js функсияи renizE Canvas (рони) {
const dpr = Мат. мин (тиреза. Таносуби дастгоҳ         1, 2);
const {client Width: w, clientcent. Height: h} = рони;
рони. паҳнои = Мат. фарш (w dpr);
рони. баландӣ = Мат. фарш (h dpr);
const ctx = рони. Матн гиред ('2d');
ctx. sEt Transform (dpr, 0, 0, dpr, 0, 0);
}

ВебГЛ: Коркарди талафоти контекст:

js const gl = рони. ба даст оред контекст ('webgl', {converve
рони. иловаи Eventure .Listener ('webglcontextlost', e => {. Prevence) (); таваққуф = ҳақиқат;});
рони. Илова бар ин, шунаванда ('webglcontextrestrestored', () => {resources (); таваққуф = дурӯғ;});

Аудио "қулф кардан":

js бигзор аудиои қулфшуда = бардурӯғ;
тиреза. Илова бар ин шунаванда ('ишора', () => {
агар (! аудиои қулфшуда) {
const ctx = нави аудио контекст ();
const b = ctx. созед (1, 1, 22050);
const s = ctx. эҷод кардани буфер ();
с. буфер = б; с. пайваст (ctx. таъинот); с. оғоз меёбад (0);
аудио қулфи = ҳақиқат;
}
}, {як маротиба: рост, ғайрифаъол: ҳақиқӣ});

Намоиши саҳифа:

js ҳуҷҷат. Илова бар ин ('visibilitychange', () => {
агар (ҳуҷҷат. пинҳон) таваққуф ();
else дубора бозсозӣ ();
});

11) Идоракунии хатар ва афзалият

Қонуни Мерфи барои IOS: Ҳар як версияи ночизи IOS-ро аз матритсаи худ санҷед - регрессия зуд-зуд рух медиҳад.

OEM WeB: Дастгоҳҳои Android бо Web-View-и кӯҳна қабати алоҳидаи хатар мебошанд (ба дастгоҳҳои "грейлист" ворид шавед).

Парчамҳои функсионалӣ: хусусиятҳои проблемаро аз ҷониби бренд/бозор-пилотҳо дар бар мегиранд.

Иҷроиш: 1% → 10% → 50% → 100% бо дарвозаҳои RUM (FPS, суқут, TTFF).

12) Ҳисоботҳо дар бораи мушоҳида ва хатогиҳо

Ба ҳар як гузориши хатогӣ дохил кунед: 'ua', 'версияи браузер', 'os', 'дастгоҳ', 'gpu/renderer', 'хотира', 'fps', 'гузоришҳо (хатогиҳои Web

Фиристодани худкори партовҳои садама (хатогиҳо/захираҳои JS), ҳодисаҳои 'матни гумшуда', 'кушодани аудио' ноком шуданд.

Панели панелҳо: FPS аз ҷониби браузер/дастгоҳ, TTFF-и миёна, ҳиссаи гумшудаи контекст, хатогиҳои Indexed-DB, хитҳои офлайнии SW.

13) Матритсаи ниҳоии қолаб (моҳии CSV)


Платформа, браузер, версия, хусусият, сенария, интизорӣ, вазъ, ёддоштҳо
Android, Chrome, 116 +, WebGL2, Контексти гумшуда/барқароркунӣ, давлат барқарор карда шуд, Хуб, iOS,Safari,16. 6,Audio,First садо дар ламс, Бозӣ, PARTIAL, Калиди хомӯш таъсир мерасонад
Мизи корӣ, Firefox, 115 +, экрани пурра, вуруд/баромад, ҷаҳиши тарҳ нест, OK, Android, Web- View, 116 +, нигаҳдорӣ, квотаи индексатсия, захира кардани 5MB,PARTIAL,Quota дар дастгоҳи X iOS,Safari,16. 4 +, PWA, Насб ва аз нав оғоз кардан, Давлат боқӣ монд, Хуб, "'

---

14) Рӯйхати санҷиши омодагии истеҳсолӣ

[] Матритсаи собит/версия/дастгоҳ ва навсозии SLA.
[] Маҷмӯи дуди автотестҳо (Драматург) дар PR ва шабона оғоз мешавад; гузоришҳо бо видео/роҳҳо.
[] Хатоҳои телеметрии RUM FPS/TTFF/heap/Web-GL бо бахши браузер/дастгоҳ.
[] Folbeki: WebGL1 ← WebGL2 Web ← GPU; Кушодани аудио; Нишондиҳанда/Абстраксияи ламс.
[] Давраи коркардшуда/намоён, таваққуф/дубора, офлайн, контексти гумшуда.
[] Истодагарӣ мӯътадил аст (Индексатсияи DB + таназзул), версияи дороиҳо тавассути SW/CDN тағйирнопазир аст.
[] Профилҳо дар дастгоҳҳои воқеӣ (IOS/Android) ва мизи кории 60/120 Гц.
[] Ҳуҷҷатгузории маҳдудиятҳои маълум (автоплейҳои IOS, квотаҳои IDB, самтгирӣ).
[] Нақшаҳои баргардонидан/хусусиятҳои парчамҳо барои хусусиятҳои мушкилот (Web-GPU/Threads).
[] Канали бозгашт дар бозӣ (фикру мулоҳиза + партовгоҳ).

---

Хулосаи дубора

Мутобиқати кросс-браузери бозиҳои HTML5 ин як қуттии санҷишӣ нест "дар Сафари кор мекунад", балки интизом: матритсаи платформаи қатъӣ, ченакҳои ченшаванда (FPS/TTFF/heap), автотестҳо дар дастгоҳҳои воқеӣ, халтаҳои графикӣ/аудио/вуруд ва бодиққат кор бо офлайн ва сарфа. Лӯлаи озмоишии устуворро ворид кунед, RUM-ро ҷамъ кунед ва хусусиятҳои паси парчамҳоро нигоҳ доред - бо ин роҳ бозӣ дар Chrome, Safari ва Firefox дар телефон ва мизи кории шумо баробар ҳамвор ва пешгӯишаванда хоҳад буд.