HTML5 게임의 브라우저 간 호환성: 테스트 매트릭스

1) HTML5 게임이 "다친" 크로스 브라우징

게임은 그래픽 (Canvas/WebGL/WebGPU), 타이머 및 스트림 (RAF/작업자), 사운드 (WebAudio/Media 정책), 입력 (키보드/포인터/터치/게임 패드), 네트워크 및 캐시 (SW/Cache/Indepad exedDB), 통합 (전체/방향/PWA). 다른 엔진-Chromium (Chrome/Edge/Opera/Android), Key (Safari/macOS, 모든 브라우저의 iOS/iPadOS), Gecko (Firefox). 또한 전력 절약, 스로틀 링 배경 탭, 메모리 제한 및 자동 재생 정책의 차이점.

2) 지원되는 환경: 대상 행렬

브라우저/OS (최소 버전은 SLA를 대체합니다):

데스크톱: Chrome/Edge 116 +, Firefox 115 +, Safari 16 + (macOS 12 +).
모바일: Chrome Android 116 + (Android 9 +), Samsung Internet 21 +, Safari iOS/iPadOS 16 +.
WebView: Android WebView 116 +, iOS-만 (iOS의 모든 브라우저는 KIT를 사용합니다).
PWA (설치): Chromium 데스크탑/모바일, Safari iOS 16. 4 + (제한이있는 홈 화면에 추가).

하드웨어 클래스:

낮음 (모바일 예산, 2GB RAM)
미디어 (모바일/울트라 북, 4-8GB RAM)
높음 (데스크톱/소비자 GPU, 8-16 + GB)

3) 큰 테스트 행렬 (템플릿)

추적기에 실제 테이블을 구성합니다. 다음은 측정해야하는 주요 블록 및 상태 (OK/Partial/N/A) 입니다.

3. 1 그래픽

서브 시스템	크롬	사파리 (iOS/macOS)	파이어 폭스	광고 노타
캔버스 2D (HiDPI, 알파)				DPI 스케일링, 블릿 아티팩트
웹 GL 1. 0				컨텍스트 손실, 최대 텍스처 크기
WebGL 2. 0				iOS/old Safari에서 종종 부분
WebGPU (사용하는 경우)				기능 플래그/폴리 필 경로
오프 스크린 캔버스				iOS: WebView에서 부분적으로/아님
웹 어셈블리 SIMD/스레드				iOS 제한. 흐름; COOP/COEP

3. 오디오 및 미디어 정책 2 개

서브 시스템	크롬	사파리	파이어 폭스	광고 노타
웹 오디오 API				자동 플레이 제한
제스처없이 자동 플레이				iOS: 금지, 사용자 제스처 필요
대기 시간 (AudioContex)				휴대 전화의 대기 시간이 짧습니다

3. 3 입력 및 인터페이스

서브 시스템	크롬	사파리	파이어 폭스	광고 노타
포인터 이벤트				iOS Safari: 캡처 기능
터치/제스처				수동 청취자, 예방 기본값
키보드 (IME, 특수 키)				키 코드/코드 차이
게임 패드 API				iOS Webit은 매우 제한적입니다
전체적으로 A				iOS: 제스처/줄무늬, 안전 영역
오리엔테이션				iOS는 사용자 제스처가 필요합

3. 4 성능 및 에너지 절약

서브 시스템	크롬	사파리	파이어 폭스	광고 노타
요청 애니메이션 프레임 (60/120				120Hz 모니터, iOS 120Hz 프로모션
스로틀 링 배경				배경 탭에서 타이머 클램프
메모리 캡/OOM				iOS는 500-800 MB에서 탭을 과부하

3. 5 저장/오프라인/네트워크

서브 시스템	크롬	사파리	파이어 폭스	광고 노타
IndexedDB (할당량)				iOS: 할당량은 시스템에 의해 작고 청소됩니다
로컬/세션 스토리지				개인 모드가 청소/차단됩니다
서비스 작업자/캐시				iOS-모닝율 제한
% 1을 (를) 가져오는 중 오류가 발생했습니다				전조등/유지 차이

4) 최소 수동 스크립트 세트 (연기)

1. 첫 번째 시작: 중산층에서 자산, 스플래시, 레벨 시작 <3 초로로드.

2. 입력: 터치/마우스/키보드/게임 패드, 여러 손가락, 고정, 스 와이프.

3. 화면: 전체 화면, 방향 잠금, 안전 영역 (강타가있는 iPhone).

4. 오디오: 맞춤형 제스처, 음소거/음소거, 음악 믹스/FX 후 첫 음표.

5. WebGL: 컨텍스트 손실/복구 (시뮬레이션), 그림자/쉐이더/스케일.

6. 수명주기: 백그라운드에서 붕괴/확장, 통화/알림, 탭.

7. 저장: IndexedDB/LocalStorage의 진행 상황/설정, 재시작/오프라인 후 복구.

8. 네트워크: 3G 스로틀/높은 RTT, 네트워크 손실, 재 트레이, SW를 통한 캐싱.

9. PWA: 설치 (Chromium/iOS), 아이콘, 오프라인 페이지, 버전 업데이트.

10. 긴 세션: 누출없이 20-30 분 (FPS/heap stable).

5) 자동화: 방법과 방법

극작가 (추천): 크로스 엔진, 모바일 에뮬레이션, 웨이트 드라이버, 비디오/트랙.

사이프러스: 빠른 개발자 루프이지만 모바일은 제한되어 있습니다.

웹 드라이버/셀레늄: 클라우드 통합.

구름: BrowserStack, Sauce Labs-실제 장치 및 iOS Safari.

프로파일 링: Chrome DevTools 프로토콜, Safari Web Inspector (원격), Firefox 프로파일 러.

Perf 스크립트: RUM과 유사한 자산 로딩 스크립트를위한 k6/브라우저.

팁: 로딩, 하나의 게임주기, 일시 정지, 방향 전환, 저장 확인 등 각 PR에 대해 3-5 분 (연기) 동안 "패키지" 를 유지하십시오.

6) 성능: 대상 측정 및 원격 측정

FPS: 안정적인 60fps (또는 ProMotion의 경우 120) -평균뿐만 아니라 프레임 간격을 캡처합니다.

프레임 예산: 16. 7ms (또는 8. 업데이트 + 렌더링시 3 ms), 프레임 당 GC <2-3 ms.

입력 대기 시간: <80ms mobile, 50ms 데스크탑

TTFF (Time-to-First-Frame): <1. 5 초 (자산을로드 한 후).

난방 성장: 세션 20 분당 + 10% 이하; 런 어웨이 할당 부족.

오디오 대기 시간: <100ms 왕복.

RUM 포함: FPS, TTFF, heap, WebGL 컨텍스트에서 원격 측정이 손실되어 '브라우저/os/장치' 로 오류가 발생합니다.

7) 빈번한 비 호환성 및 치료 방법

7. 1 그래픽/렌더링

HiDPI Canvas-Set 논리 크기 = CSS px, 물리적 = 'css devicePixelRatio'.

잃어버린 WebGL 컨텍스트: 'webglcontextlost/webglcontextrexited' 를 듣고 재부팅을 위해 리소스를 저장하십시오.

텍스처/셰이더: 보편적이지 않은 확장을 피하십시오. (PHP 3 = 3.0.6, PHP 4)

WebGPU: 롤 피처 플래그; WebGL2 경로를 폴백으로 유지하십시오.

7. 2 오디오/자동 재생

사용자 정의 제스처 ('탭/클릭') 로 AudioConext를 시작하고 "허용 된" 플래그를 유지하십시오.

iOS에서는 최소화/전환시 일시 중지를 준비하십시오.

7. 3 입력/제스처

이벤트 청취자는 기본적으로 수동적으로 만듭니다. (PHP 3 = 3.0.6, PHP 4)

포인터 이벤트 + 터치 이벤트-이중 처리를 피하십시 입력 레이어를 추상화하십시오.

게임 패드: 네비게이터를 확인하십시오. RAF를 통한 getGamepads () '는 버튼의 레이아웃을 고려하십시오.

7. 4 전체/오리엔테이션/안전 영역

iOS의 경우 'env (safe-area-inset-)' 를 고려하고 캔버스/오버레이 UI에 패딩을 추가하십시오.

사용자 제스처 후에 만 오리엔테이션 잠금; "회전 화면" 버튼이 있습니다.

7. 5 Storigi/오프라인

IndexedDB: 타임 아웃/리트레이의 랩 작업; iOS에서 할당량은 적습니다. 가벼운 절약 효과를 유지하십시오

서비스 담당자: 자산에 대한 'Stale-While-Revalidate' 전략; 정직하게 비활성화 된 버전 (컨텐츠 해시).

로컬 스토리지는 개인 모드에서 사용할 수 없습니다. 경고 메모리로 저하됩니다.

7. 6 타이머/배경

백그라운드에서 타이머는 최대 1 초 이상 덩어리입니다. 무거운 논리를 멈추고 게임을 일시 중지하십시오.

간격 대신 페이지 가시성/' 시각적 변경 '및 이벤트 중심 업데이트를 사용하십시오.

8) 크로스 브라우저 용 파이프 라인 어셈블리

증산: TypeScript/Babel은 'es2020' 을 목표로합니다 (또는 이전 WebViews의 경우 더 낮음).

폴리 필: UA가 아닌 기능 탐지 만 가능합니다.

자산: 스프라이트 시트, 대체 형식의 질감 (WebP/PNG), 오디오 (AAC/OGG/Opus).

코드 분리: 편집기/게임이 아닌 패널을위한 게으른 덩어리.

압축: Brotli/Zstd; HTT/2/3; 불변의 버전으로 CDN을 사용합니다.

기능 플래그: WebGPU/OffscreenCanvas/Threads-화이트리스트가 활성화합니다.

9) 점검표 템플릿

9. 1 스마트 폰 (Android/Chrome, iPhone/Safari)

터치 + 멀티 터치; 제스처는 페이지를 "당기지" 않습니다
전체 및 방향; 안전 지역 올바른
탭 후 첫 소리; 음소거 작품
FPS 소 50 (낮은 클래스), 울퉁불퉁 한 프레임 없음
재시작 후 진행 상황 저장/복원
오프라인 장면/SW 재시작
시스템 오버레이 호출 (들어오는 호출) → 정확한 일시 정지

9. 2 데스크톱 (Windows/macOS)

마우스 + 휠 + 키보드, IME
게임 패드 (XInpit/Generic)
60/120Hz 모니터: 안정적인 프레임 페이싱
Alt- 탭/다중 모니터/전체 화면/윈도우
메모리 <한계, 누출 없음 (20 분 이상)

10) 코드 예 (조각)

HiDPI 캔버스:

js 함수 resizeCanvas (캔버스) {
const dpr = Math. min (창. devicePixelRatio         1, 2);
const {clientwid: w, clientHeight: h} = 캔버스;
캔버스. 너비 = Math. 바닥 (w dpr);
캔버스. 높이 = Math. 바닥 (h dpr);
const ctx = 캔버스. getContex ('2d');
ctx. 세트 형태 (dpr, 0, 0, dpr, 0, 0);
}

WebGL: 컨텍스트 손실 처리:

js const gl = 캔버스. getContex ('webgl', {preserveDrawingBuffer: 잘못된});
캔버스. AddEventListener ('webglcontextlost', e => {예방 기본 (); 일시 정지 = 참;});
캔버스. addEventListener ('webglcontextreded', () => {reloadResources (); 일시 정지 = 거짓;});

오디오 "잠금 해제":

js는 오디오 잠금 = 거짓을 허용합니다.
창. AddEventListener ('pointerdown', () => {
if (! audioUnlocked) {
const ctx = 새로운 AudioContex ();
const b = ctx. 버퍼 (1, 1, 22050);
const s = ctx. 버퍼 소스 이동 ();
. 버퍼 = b; s. 연결 (ctx. 목적지); . 시작 (0);
오디오 잠금 = 참;
}
}, {once: 참, 수동적: 참});

페이지 가시성:

js 문서. AddEventListener ('visibilitychange', () => {
만약 (문서) 숨겨진) 일시 정지 게임 ();
다른 reasmeGame ();
});

11) 위험 관리 및 우선 순위

Murphy's Law for iOS: 매트릭스에서 모든 마이너 버전의 iOS를 테스트하십시오. 회귀가 빈번합니다.

WebView OEM: 구식 WebView가있는 Android 장치는 별도의 위험 계층입니다 ("greylist" 장치 입력).

기능적 플래그: 브랜드/시장 조종사의 문제 기능이 포함됩니다.

출시: RUM 게이트 (FPS, 충돌, TTFF) 를 사용한 1% → 10% → 50% → 100%.

12) 관찰 및 버그 보고서

각 버그 보고서: 'ua', '브라우저 버전', 'os', '장치', 'gpu/renderer', 'memory', 'fps', 'logs (WebGL/WebAudio 오류)', '단계', 'repro 동영상'.

충돌 덤프 (JS 오류/리소스), '컨텍스트 손실', '오디오 잠금 해제 실패' 이벤트의 자동 전송.

대시 보드: 브라우저/장치 별 FPS, 평균 TTFF, 컨텍스트 손실 점유율, IndexedDB 오류, SW 오프라인 적중.

13) 최종 템플릿 매트릭스


플랫폼, 브라우저, 버전, 기능, 시나리오, 예상, 상태, 메모
Android, Chrome, 116 +, WebGL2, 컨텍스트 손실/복원, 상태 복원, OK, iOS, Safari, 16. 6, 오디오, 탭의 첫 번째 사운드, 재생, PARTIAL, 사일런트 스위치에 영향
데스크톱, Firefox, 115 +, 전체적으로, 입력/종료, 레이아웃 점프 없음, OK, Android, WebView, 116 +, 스토리지, IndexedDB 할당량, 5MB 저장, PARTIAL, 장치 X iOS, Safari, 16의 쿼터 낮음. 4 +, PWA, 설치 및 다시 시작, 상태 지속, OK, "'

---

14) 생산 준비 점검 목록

[] 고정 브라우저/버전/장치 매트릭스 및 SLA 업데이트.
[] PR과 야간에 연기 세트 (Playwright) 가 시작됩니다. 비디오/트랙이있는 보고서.
[] 브라우저/장치 섹션의 RUM 원격 측정 FPS/TTFF/heap/WebGL 오류.
[] Folbeki: WebGL1 대 웹GL2 WebGPU; 오디오 잠금 해제; 포인터/터치 추상화.
[] 가공 된 수명주기/가시성, 일시 정지/재개, 오프라인, 컨텍스트 손실.
[] 지속성은 안정적이며 (IndexedDB + 저하) 자산 버전은 SW/CDN을 통해 불변화 할 수 있습니다.
[] 실제 장치 (iOS/Android) 및 60/120Hz 데스크톱의 프로필.
[] 알려진 제한 문서 (iOS 자동 레이, IDB 할당량, 방향).
[] 문제가있는 기능에 대한 롤백 계획/기능 플래그 (WebGPU/Threads).
[] 게임의 피드백 채널 (피드백 + 로그 덤프).

---

요약 다시 시작

HTML5 게임의 교차 브라우저 호환성은 하나의 체크 박스 "Safari에서 작동합니다" 가 아니라 엄격한 플랫폼 매트릭스, 측정 가능한 측정 항목 (FPS/TTFF/heap), 실제 장치의 자동 테스트, 그래픽/오디오/입력 오프라인 및 저장. 안정적인 테스트 파이프 라인을 입력하고 RUM을 수집하며 플래그 뒤에 기능을 유지하십시오. 이러한 방식으로 휴대 전화 및 데스크톱의 Chrome, Safari 및 Firefox에서 게임이 매끄럽고 예측 가능합니다.