Συμβατότητα cross-browser των παιχνιδιών HTML5: πίνακας δοκιμής

1) Γιατί τα παιχνίδια HTML5 «πονάνε» cross-browsing

Τα παιχνίδια επηρεάζουν σχεδόν όλα τα στρώματα της πλατφόρμας: γραφικά (Canvas/WebGL/WebGPU), χρονοδιακόπτες και ροές (RAF/Εργαζόμενοι), ήχος (πολιτικές WebAudio/Media), είσοδος (πληκτρολόγιο/δείκτης/αφή/gamepad), δίκτυο και κρύπτες (SW/Cache/Indepad exedDB), ολοκλήρωση (πλήρης οθόνη/προσανατολισμός/PWA). Διαφορετικοί κινητήρες - χρώμιο (Chrome/Edge/Opera/Android), WebKit (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 - μόνο WebKit (όλοι οι φυλλομετρητές στο iOS χρησιμοποιούν WebKit).
PWA (εγκατάσταση): Επιφάνεια εργασίας/κινητό χρώμιο, Safari iOS 16. 4 + (προσθήκη στην αρχική οθόνη με περιορισμούς).

Κατηγορίες υλικού:

Χαμηλός (κινητός προϋπολογισμός, 2 GB RAM)
Μέσο (κινητά/υπεράριθμα βιβλία, 4-8 GB RAM)
Υψηλή (επιτραπέζια/καταναλωτική GPU, 8-16 + GB)

3) Μεγάλος πίνακας δοκιμών (πρότυπο)

Σχηματίστε έναν πραγματικό πίνακα στον ανιχνευτή σας. Παρακάτω είναι οι δέσμες κλειδιών και οι καταστάσεις (OK/Partial/N/A) που πρέπει να μετρηθούν.

3. 1 Γραφικά

Υποσύστημα	Χρώμιο	Σαφάρι (iOS/macOS)	Firefox	Ad notata
Καμβάς 2D (HiDPI, άλφα)				Κλιμάκωση DPI, blit articacts
WebGL 1. 0				Απώλεια πλαισίου, μέγιστο μέγεθος υφής
WebGL 2. 0				Στο iOS/παλιό σαφάρι συχνά Μερικό
WebGPU (εάν χρησιμοποιείται)				Διαδρομή σημαίας/πολυπόλου
OffscreenCanvas				iOS: εν μέρει/όχι στο WebView
Συναρμολόγηση ιστού SIMD/Νήματα				όριο iOS. ροές· COP/COEP

3. 2 Πολιτικές για τον ήχο και τα μέσα επικοινωνίας

Υποσύστημα	Χρώμιο	Σαφάρι	Firefox	Ad notata
WebAudio API				Περιορισμοί αυτόματων πλακών
Αυτόματη λειτουργία χωρίς χειρονομία				iOS: απαγορευμένη, απαιτείται χειρονομία χρήστη
Καθυστέρηση (Audio Context)				η χαμηλή καθυστέρηση στα κινητά τηλέφωνα ποικίλλει

3. 3 Είσοδος και διεπαφή

Υποσύστημα	Χρώμιο	Σαφάρι	Firefox	Ad notata
Δείκτες γεγονότων				iOS Safari: Χαρακτηριστικά σύλληψης
Αφή/χειρονομία				παθητικοί ακροατές, Εξ ορισμού
Πληκτρολόγιο (IME, ειδικά κλειδιά)				koodCode/Διαφορές κωδικών
Gamepad API				Το iOS WebKit είναι εξαιρετικά περιορισμένο
API πλήρους οθόνης				iOS: χειρονομίες/ρίγες, ασφαλής χώρος
Κλειδαριά προσανατολισμού				Το iOS απαιτεί χειρονομία χρήστη

3. 4 Επιδόσεις και εξοικονόμηση ενέργειας

Υποσύστημα	Χρώμιο	Σαφάρι	Firefox	Ad notata
Πλαίσιο animationFrame (60/120 Гц)				Οθόνες 120Hz, iOS 120 Hz ProMotion
Φόντο στραγγαλισμού				χρονοδιακόπτες σφιγκτήρων στην καρτέλα φόντου
Κάλυμμα μνήμης/OOM				Καρτέλα υπερφόρτωσης iOS σε 500-800 MB

3. 5 Αποταμιεύσεις/εκτός δικτύου/δίκτυο

Υποσύστημα	Χρώμιο	Σαφάρι	Firefox	Ad notata
Δείκτης DB (ποσοστώσεις)				iOS: οι ποσοστώσεις είναι μικρές/καθαρίζονται από το σύστημα
Αποθήκευση σε τοπική/συνεδρία				Οι ιδιωτικοί τρόποι καθαρίζονται/μπλοκάρονται
Εργαζόμενος/κρυφή μνήμη				iOS - όρια ποσοστού αφύπνισης
Fetch/CORS/HTTP/2/3				Διαφορές πριν/κατά τη διάρκεια της ζωής

4) Ελάχιστο σύνολο χειροκίνητων σεναρίων (Smoke)

1. Πρώτη έναρξη: φόρτωση περιουσιακών στοιχείων, splash, level start <3 s στη μεσαία τάξη.

2. Εισαγωγή: αφή/ποντίκι/πληκτρολόγιο/gamepad, πολλαπλά δάχτυλα, λαβή, swips.

3. Οθόνη: πλήρης οθόνη, κλειδαριά προσανατολισμού, ασφαλής χώρος (iPhone with bangs).

4. Ήχος: πρώτη σημείωση μετά από προσαρμοσμένη χειρονομία, μουγκή/μη μουγκή, μίξη μουσικής/FX.

5. WebGL: απώλεια/ανάκτηση του πλαισίου (προσομοίωση), σκιές/σκιέρες/κλίμακα.

6. Κύκλος ζωής: κατάρρευση/επέκταση, κλήση/ειδοποίηση, καρτέλα στο παρασκήνιο.

7. Αποταμιεύει: πρόοδος/ρυθμίσεις στο IndexedDB/LocalStorage, ανάκτηση μετά την επανεκκίνηση/offline.

8. Δίκτυο: γκάζι 3G/υψηλή RTT, απώλεια δικτύου, επανασυσκευασία, αποθήκευση μέσω SW.

9. PWA: εγκατάσταση (χρώμιο/iOS), εικονίδια, σελίδα εκτός σύνδεσης, ενημέρωση έκδοσης.

10. Μακρά συνεδρία: 20-30 λεπτά χωρίς διαρροές (FPS/σωρός σταθερός).

5) Αυτοματοποίηση: πώς και πώς

Ο θεατρικός συγγραφέας (συνιστάται): cross-engine, mobile emulations, WebKit driver, video/tracks.

Cypress: fast dev loop, αλλά το WebKit/mobile είναι περιορισμένο.

WebDriver/Σελήνιο: ενσωμάτωση νέφους.

Σύννεφα: BrowserStack, Εργαστήρια σάλτσας - πραγματικές συσκευές και iOS Safari.

Προφίλ: Chrome DevTools Protocol, Safari Web Inspector (Απομακρυσμένο), Firefox Profiler.

Σενάρια Perf: k6/φυλλομετρητής για σενάρια φόρτωσης περιουσιακών στοιχείων τύπου RUM.

Συμβουλή: κρατήστε ένα «πακέτο» αυτοτεστιών για 3-5 λεπτά (καπνός) για κάθε PR: φόρτωση, ένας κύκλος παιχνιδιού, παύση, προσανατολισμός αλλαγής, αποθήκευση ελέγχου.

6) Επιδόσεις: μετρήσεις-στόχοι και τηλεμετρία

FPS: σταθερή 60 fps (ή 120 on ProMotion) - σύλληψη βηματισμού πλαισίου, όχι μόνο του μέσου όρου.

Προϋπολογισμός πλαισίου: 16. 7 ms (ή 8. 3 ms) για την ενημέρωση + απόδοση, GC <2-3 ms ανά πλαίσιο.

Καθυστέρηση εισόδου: <80 ms κινητό, 50 ms επιτραπέζιος υπολογιστής

Time-to-First-Frame (TTFF): <1. 5 s (μετά τη φόρτωση των περιουσιακών στοιχείων).

Αύξηση σωρού: όχι περισσότερο από + 10% ανά 20 λεπτά συνεδρίας· έλλειψη μη διαθέσιμων πιστώσεων.

Καθυστέρηση ήχου: <100ms roundtrip.

Embed RUM: αποστολή FPS, TTFF, σωρός, το πλαίσιο WebGL έχασε την τηλεμετρία, αποδίδοντας σφάλματα από 'φυλλομετρητή/os/συσκευή'.

7) Συχνές ασυμβατότητες και τρόπος θεραπείας

7. 1 Γραφικά/απόδοση

HiDPI Canvas-Set λογικό μέγεθος = CSS px, φυσικό = 'css development PixelRatio'.

Το πλαίσιο WebGL έχασε: ακούστε το 'webglcontextlost/webglcontextrestored', αποθηκεύστε πόρους για επανεκκίνηση.

Υφές/σκιέρ: αποφυγή μη καθολικών επεκτάσεων. check OES _ texture _ float, EXT _ color _ buffer _ float, and fallback.

WebGPU: roll feature-flag. να διατηρεί WebGL2 διαδρομή ως οπισθοδρόμηση.

7. 2 Audio/autoplay

Εκκίνηση του Audio Control με μια προσαρμοσμένη χειρονομία ('tap/click') και διατήρηση της «επιτρεπόμενης» σημαίας.

Στο iOS, ετοιμαστείτε για αναστολή κατά την ελαχιστοποίηση/αλλαγή.

7. 3 Είσοδος/χειρονομίες

Ακροατές γεγονότων κάνουν παθητική εξ ορισμού? όπου «προεπιλογή ()» είναι η ρητή απενεργοποίηση του παθητικού.

Pointer Events + Touch Events - αποφυγή διπλής επεξεργασίας; αφηρημένο το στρώμα εισόδου.

Gamepad: check 'navigator. getGamepads () 'μέσω RAF, λαμβάνοντας υπόψη τη διάταξη των κουμπιών.

7. 4 Πλήρης οθόνη/προσανατολισμός/ασφαλής περιοχή

Για το iOS, εξετάστε το «env (safe-area-inset-)», προσθέστε padding στον καμβά/Overlay UI.

Κλειδαριά προσανατολισμού μόνο μετά από χειρονομία χρήστη. να έχει κουμπί «περιστρεφόμενης οθόνης».

7. 5 Storigi/Offline

IndexedDB: λειτουργίες περιτύλιξης σε χρονοδιαγράμματα/retrays. όσον αφορά το iOS, οι ποσοστώσεις είναι μικρές - διατηρήστε ελαφριά εξοικονόμηση.

Εργαζόμενος στον τομέα των υπηρεσιών: στρατηγική «Stale-While-Revalidate» για τα περιουσιακά στοιχεία. τίμια απενεργοποιημένες εκδόσεις (περιεχόμενο-hash).

Το LocalStorage μπορεί να μην είναι διαθέσιμο σε ιδιωτικές καταστάσεις - να υποβαθμιστεί σε προειδοποιητική μνήμη.

7. 6 Χρονοδιακόπτες/φόντο

Στο παρασκήνιο, οι χρονοδιακόπτες συσσωρεύονται μέχρι 1 s ή περισσότερο. Σταματήστε τη βαριά λογική, σταματήστε το παιχνίδι.

Ενεργοποιήστε την ορατότητα σελίδας/' ορατότητα 'και ενημερώσεις με γνώμονα γεγονότα αντί για διαστήματα.

8) Συγκρότημα αγωγών για διασταυρωτή

Μεταφορά: TypeScript/Babel στοχεύει 'es2020' (ή χαμηλότερο για παλαιότερες WebViews).

Πολυφύλλες: μόνο ανίχνευση χαρακτηριστικών, όχι UA.

Περιουσιακά στοιχεία: φύλλα ψεκασμού, υφές με μορφή οπισθοπορείας (WebP/PNG), ήχου (AAC/OGG/Opus).

Διαχωρισμός κωδικών: τεμπέλικα κομμάτια για επεξεργαστές/πίνακες εκτός παιχνιδιού.

Συμπίεση: Brotli/Zstd; · CDN με αμετάβλητη έκδοση.

Σημαίες χαρακτηριστικών: WebGPU/OffscreenCanvas/Threads - ενεργοποιήστε με whitelist.

9) Υποδείγματα καταλόγων ελέγχου

9. 1 Smartphone (Android/Chrome, iPhone/Safari)

Touch + multi-touch· οι χειρονομίες δεν «τραβούν» τη σελίδα
Πλήρης οθόνη και προσανατολισμός· ορθή περιοχή ασφαλείας
Πρώτος ήχος μετά τη βρύση. εργασίες μουγγής
FPS ≥ 50 (χαμηλής τάξης), χωρίς κουρελιασμένο πλαίσιο
Αποθήκευση/αποκατάσταση της προόδου μετά την επανεκκίνηση
Offline σκηνή/SW επανεκκίνηση
Κλήση επικάλυψης συστήματος (εισερχόμενη κλήση) → σωστή παύση

9. 2 Επιφάνεια εργασίας (Windows/macOS)

Ποντίκι + τροχός + πληκτρολόγιο, IME
Gamepad (XInput/Generic)
οθόνες παρακολούθησης: σταθερό βηματισμό πλαισίου
Alt-Tab/πολλαπλές οθόνες/πλήρης οθόνη/παράθυρο
Μνήμη <ορίου, χωρίς διαρροές (20 + λεπτά)

10) Παραδείγματα κωδικών (θραύσματα)

Καμβάς-HiDPI:

js λειτουργία resizeCanvas (καμβάς) {
const dpr = Math. min (παράθυρο. due PixelRatio         1, 2);
const {clientWidth: w, clientHight: h} = καμβάς;
καμβάς. πλάτος = Math. δάπεδο (w dpr),
καμβάς. ύψος = Math. δάπεδο (h dpr),
const ctx = καμβάς. getContext ('2d'),
ctx. Settransform (dpr, 0, 0, dpr, 0, 0),
}

WebGL: χειρισμός ζημιών πλαισίου:

js const gl = καμβάς. getContext ('webgl', {presusted  buffer: false}),
καμβάς. AddEventListener ('webglcontextlos , e => {e.  Εξ ορισμού (); παύση = αληθής;}),
καμβάς. AddEventListener ('webglcontextrestored', () => {reloadResources (); παύση = ψευδής·}),

Ήχος «ξεκλείδωμα»:

js let audio Unlocked = false?
παράθυρο. AddEnlistener ('pointerdow , () => {
αν (! ακουστικό ξεκλείδωμα) {
const ctx = νέο AudackContext ()·
const = ctx. CreedBuffer (1, 1, 22050),
cont = ctx. CreedBufferSource ()·
s. ρυθμιστικό διάλυμα = b· s. σύνδεση (ctx. προορισμός)· s. έναρξη (0),
ακουστικό ξεκλείδωμα = αληθές·
}
}, {μία φορά: αληθινή, παθητική: αληθινή};

Προβολή σελίδας:

js έγγραφο. AddEnlistener ('ovisibilitychange', () => {
εάν (έγγραφο. κρυφό) p  Game ();
άλλο resordGame ()·
});

11) Διαχείριση κινδύνων και ιεράρχηση προτεραιοτήτων

Murphy 's Law for iOS: Δοκιμάστε κάθε μικρή έκδοση του iOS από τον πίνακα σας - οι παλινδρόμηση είναι συχνές.

WebView OEM: Οι συσκευές Android με ξεπερασμένο WebView είναι ένα ξεχωριστό στρώμα κινδύνου (εισάγετε συσκευές "greylis ).

Λειτουργικές σημαίες: να συμπεριληφθούν τα προβληματικά χαρακτηριστικά των πιλότων εμπορικών σημάτων/αγορών.

1% → 10% → 50% → 100% με πύλες RUM (FPS, crash, TTFF).

12) Αναφορές παρατήρησης και σφαλμάτων

Συμπεριλάβετε σε κάθε αναφορά σφαλμάτων: 'ua', 'browser version', 'os', 'device', 'gpu/renderer', 'memory', 'fp ,' logs (WebGL/WebAudio λάθη) ',' states ',' repro video '.

Αυτόματη αποστολή χωματερών (σφάλματα/πόροι JS), «χαμένο πλαίσιο», «αποτυχημένο ξεκλείδωμα ήχου».

Dashboards: FPS by browser/device, μέσος όρος TTFF, μερίδιο απώλειας συμφραζομένων, σφάλματα IndexedDB, SW offline hits.

13) Τελικός πίνακας υποδείγματος (CSV fish)


Πλατφόρμα, περιηγητής, έκδοση, χαρακτηριστικό, σενάριο, αναμενόμενο, κατάσταση, σημειώσεις
Android, Chrome, 116 +, WebGL2, Context lost/restore, State restored, OK, iOS,Safari,16. ήχος στη βρύση, Παίζει, ΜΕΡΙΚΟ, Σιωπηλός διακόπτης επηρεάζει
Επιφάνεια εργασίας, Firefox, 115 +, Fullscreen, Enter/Exit, No layout jump, OK, Android, WebView, 116 +, Storage, IndexedDB ποσόστωση, Αποθήκευση 5MB,PARTIAL,Quota χαμηλότερη στη συσκευή X iOS,Safari,16. 4 +, PWA, Εγκατάσταση & επανεκκίνηση, State παρέμεινε, OK ",

---

14) Κατάλογος ετοιμότητας παραγωγής

[] Σταθερός περιηγητής/έκδοση/πίνακας συσκευής και ενημέρωση SLA.
Το Smoke-set of autotests (Playwright) εκτοξεύεται σε δημόσιες σχέσεις και νυχτερινά. αναφορές με βίντεο/κομμάτια.
[] Σφάλματα τηλεμετρίας RUM FPS/TTFF/σωρού/WebGL με τμήμα περιηγητή/συσκευής.
[] Φολμπέκι: WebGL1 ← WebGL2 ← WebGPU; ξεκλείδωμα ήχου, Δείκτης/Αφαίρεση αφής.
[] Επεξεργασμένος κύκλος ζωής/ορατότητα, παύση/επανάληψη, εκτός σύνδεσης, απώλεια πλαισίου.
[] Η εμμονή είναι σταθερή (IndexedDB + υποβάθμιση), έκδοση περιουσιακών στοιχείων αμετάβλητη μέσω SW/CDN.
[] Προφίλ πραγματικών συσκευών (iOS/Android) και επιτραπέζιων υπολογιστών 60/120 Hz.
[] Τεκμηρίωση γνωστών περιορισμών (αυτοπλακέτες iOS, ποσοστώσεις IDB, προσανατολισμός).
[] Σχέδια ανατροπής/σημαίες χαρακτηριστικών για προβληματικά χαρακτηριστικά (WebGPU/Threads).
[] Κανάλι ανατροφοδότησης στο παιχνίδι (ανατροφοδότηση + χωματερή καταγραφής).

---

Επανάληψη σύνοψης

Η συμβατότητα cross-browser των παιχνιδιών HTML5 δεν είναι ένα πλαίσιο ελέγχου «δουλεύει στο Σαφάρι», αλλά μια πειθαρχία: ένας άκαμπτος πίνακας πλατφόρμας, μετρήσιμες μετρήσεις (FPS/TTFF/σωρός), αυτόματες δοκιμές σε πραγματικές συσκευές, λαϊκές πλάτες γραφικών/ήχου/εισόδου και προσεκτική εργασία με offline και σώζει. Εισάγετε έναν σταθερό αγωγό δοκιμής, συλλέξτε RUM και κρατήστε τα χαρακτηριστικά πίσω από τις σημαίες - με αυτόν τον τρόπο το παιχνίδι θα είναι εξίσου λείο και προβλέψιμο σε Chrome, Safari και Firefox, στο τηλέφωνό σας και στην επιφάνεια εργασίας.