מדוע משחקי HTML5 יטענו מהר יותר

מבוא: מהירות = המרה

עבור משחקים בדפדפן, ”עומס מהר יותר” פירושו: פחות בייטים, פחות בקשות, פחות המתנה למסגרת הראשונה. הערימה של HTML5 (HTML/CSS/JS/WebGL/WASM) נותנת משלוח מודרני ומצטברת מחוץ לתיבה, כלומר TTFB קצר, low LCP ו-Fast-to-First-Interaction אני).

1) רשת ותחבורה: מדוע הרשת מהירה יותר כברירת מחדל

HTTP/2 HTTP/3 (QUIC)

ריבוי: עשרות נכסים (ספריטים, חתיכות קוד) באים בחיבור אחד - אין סופות TCP.

0-RTT TLS 1. 3: לחיצת יד מהירה, דרך קצרה יותר לביט הראשון.

עדיפות: נכסים קריטיים (אתחול מנוע, מאסטר אטלס) מקבלים עדיפות גבוהה יותר.

CDN ומטמון קצה

קשרי פופ קרובים יותר לנגן מטמון נכסים בלתי ניתנים לשינוי (שמות חשיש).

"מעופש בזמן-לבטל 'מרבה לך להראות את הגרסה הישנה ובו זמנית למשוך את החדש.

כותרים (מתכון):


מטמון בקרה: ציבורי, גיל מקסימלי = 31536000, ללא שינוי
קידוד תוכן: br//JS/CSS (ברוטלי)
מדיניות Cross-Origin-Resource-Policy: cross-resource
תזמון-הרשה-מקור:

2) חבטות ופיצול קוד: משלוח ”בדיוק כמו שאתה צריך”

מודולים של ES וייבוא דינמי

לחלק את הקוד לחבילות רמה: ”לובי”, ”הדרכה”, ”רמות 1-3”, ”חנות”.

המסך הראשוני מקבל רק את נתח האתחול (50-150 KB gz/br). השאר על פי דרישה.

טלטול עצים והשגת מינוי

הסר API מנוע/ספרייה לא בשימוש.

Terser/LockCSS + Module Effects = כוזב כדי לחתוך קוד מת באגרסיביות.

דוגמה לטעינה דינמית:

js
העמיסו את מפעיל הקרב רק בתחילת הקרב, על מנת להמתין ליבוא ('./נתחים/CattRenderer. js');
רנדרר הקטלני החדש (באנגלית: New Battle Renderer; הר (בד);

3) נכסים: עיקרי ביט חיסכון

תמונות

WebP/AVIF עבור איורים: מינוס 25-50% לגודל נגד PNG/JPEG.

רשימות ספרייט ואטלסים להפחית שאילתות ותקורה.

& gt; & gt; & gt; & gt; & gt; & gt; & gt; & gt; & gt; & gt; & gt; & gt; & gt; & gt; & gt; & gt; & gt; & gt; & gt; & gt; & gt; & gt; & gt; & gt; & gt; & g

3D/Textures

בסיס/UASTC (KTX2): דחיסה אוניברסלית של טקסטורות GPU (ETC1S/ASTC/BC) - לטעון קובץ אחד, לפרוק אותו בפורמט כרטיס וידאו.

רמות המיפ נטענות בהדרגה: קודם איכות נמוכה, ואז דגימה.

שמע

אופוס במקום MP3/AAC - טוב יותר בביטרטים נמוכים; הזרמת רצועות לפי דרישה (מוסיקה אזורית - לאחר הכניסה לאזור).

קטעי וידאו/חתכים

WebCodecs/Media Source ו-LL-HLS עבור סרטונים קצרים; פוסטר והקטע הראשון - טעינה מראש, השאר - בעצלנות.

4) אתחול מנוע: ראשית ”שלד”, ולאחר מכן ”בשר”

גרף סצנה עצלן

אנו מעמיסים רק צומתי זירה קריטיים (UI, מצלמה, רקע). מודלים/צללים - לפי הצורך.

עבודות על נכסי רקע:

עובד שירות (SW) כ ”מטמון חם”

מותקן בביקור הראשון ומצטייד גרעין הלקוח, אטלס מניפסט, צללים.

עם התחברות מחדש - נכונות מנותקת ו TTFI ~ באופן מיידי.

דוגמה לאסטרטגיית SW (מפושטת):

ג 'ס עצמי. Adderventure Listener (”להביא”, e =>
E.  עם (מטמונים. פתוח ('משחק-v12'). ואז (async =>
const caper = לחכות c. game (e. בקשה);
const טרי = להביא (e. בקשה). ואז (r => *. לשים (e. בקשה, r. שיבוט (); להחזיר r;?);
להחזיר מטמון        טרי;
}));
});

5) WebGL ו ־ WASM: מהירות ”מקומית” בדפדפן

WebGL/WebGPU: shaders and render - on GPU; המעבד נשאר על היגיון.

חלקיו הכבדים של המנוע (פיזיקה, נתיב, פריקת מרקמים) פועלים כמעט כמו ספריות ילידיות.

עובדי רשת: פענוח מרקם/אודיו, פירוק רמות, הכנת מסות - אין מנעולי מיינסטרים.

אופטימיזציה של זמן המסגרת הראשון (FTF):

למען ה-FTF, אנחנו מקריבים ”יופי”: לטעון נמוך-פולי/מיל נמוך, זרם גבוה-res מאוחר יותר.

6) תעדוף טעינה: תן לחשיבות לעבור קודם

רמזים של HTML:

html
<link rel = ”preconnect' href =” https ://cdn. דוגמא. com">
<link rel = "preload" בתור "script" href = "/app. a1b2c3. js" crossorigin>
<link rel = "preload" = "image" href = "/atlases/ui @ 1x. avif” דמיון = ”/ui @ 2x. avif 2x">

הבא סדרי עדיפויות ו ”הבא פריים” &fost

fetchpriority =” גבוה” - אטלסים של JS ו UI.

שאר הנכסים ”נמוכים” כדי לא להפריע לדרך הקריטית.

7) Metrics ו ־ SLO של משחקי HTML5 המהירים

מטרות:

TFB <200-300 ms (עם CDN).
LCP (לובי) <1. 8–2. 5 נמצא בנייד.
זמן לאינטראקציה ראשונה (TTFI) <2-3.
מסגרת ראשונה במשחק <1-2 S לאחר תחילת הסצנה.
הורדה כוללת (הרצה ראשונה): סימון 1-3 MB ללובי, סימון 5-10 MB עד לקרב/רמה הראשונה.
הפעל מחדש: ~ 0-200 KB הודות למטמון SW.

תצפיות: אירועי RUM ברשתות/geo/התקנים, Web Vitals, bootloader progress, timeout assess.

8) כינוס צינור: כיצד להשיג ”בייט ראשון דק” ‏

1. ניתוח צרור (מקור-מפת-חוקר, חבילת-צרור-אנליזה).

2. פיצול קוד על ידי סצנות/תכונות, הסרה של פוליפילס ”עבה” (אנו למקד דפדפנים מודרניים).

3. הגדרה: Terser/ESBuild + CSS Minify, dev logic הסרה.

4. תמונות: ”חד/סקווש” * AVIF/WebP, דור של 'srcset'.

5. מרקמים: מעטפה KTX2 (בסיס/UASTC), היוצרת מיפס.

6. שמע: אופוס VBR 48-96 kbps, קליפים - תצוגות מקדימות מקוצרות.

7. מניפסט נכסים (חפץ) + שמות חשיש + ”בלתי ניתנים לשינוי”.

8. PWA/SW: גרעין טרום מטמון, מטמון זמן ריצה של אטלסים עם ”מעופש בזמן-ביטול”.

9. CDN: רמזים מראש, ”פונדקאית-בקרה”, טיהור רך על ידי תג.

9) ביצועי ריצה: כדי להפוך את המשחק ”לעוף” לאחר טעינה

תקציב חוט ראשי: להחזיק JS-Taski <50 ms; ”כבד בעובדים”.

Render אצווה: קבוצה משיכת קריאות, להשתמש בהתקנה.

לחץ GC: מערך השכרה/חוצץ, להימנע ”זבל” בטיקים משחק.

FPS אדפטיבי: להפחית אפקטים לאחר כאשר FPS טיפות בלי לגעת משחק.

10) אנטי דפוסים (מה שהופך את המשחק לאיטי)

צרור מונוליטי אחד 5-15 מ "מ להתחיל.

מרקמי PNG ללא דחיסת GPU, ללא KTX2/Basis.

'rng% N' in מטעין הנכסים (נחישות חשובה יותר - אבל זה גם על PF).

בקשות ללא ראשי מטמון או ללא שמות חשיש = כל ביקור ”קר”.

פוליפילים לכל העולם (IE, ספארי הישן) - משיכת מגה-בייט לשווא.

מחסור ב ־ SW/עומס מראש - ביקורים חוזרים וקשים לא פחות מהראשון.

גופנים כבדים (מספר סגנונות ללא 'יוניקוד-טווח' ו 'פונט-תצוגה: החלפה').

11) רשימת משחקים מהירה של HTML5

רשת ו ־ CDN

[ ] HTTP/3 מופעל; להתחבר מחדש ל-CDN/ספקים.

[ ] 'Cache-Control: Immutable' + hash-off: ”מעופש-בזמן-לבטל”.

קוד וחבילות

[ קוד ] מפוצל על ידי סצנה; מודולים של ES; רעידת עצים.

[ ] אתחול JS 150KB br; כרטיסי קוד בנפרד.

נכסים

[ ] WebP/AVIF עבור UI; KTX2 בסיס/UASTC למרקמים.

[ ] אטלס ומיפס; אופוס אודיו; סרטונים עצלנים/חתכים.

PWA/Cache

[ עובד שירות ]: גרעין טרום מטמון, מטמון זמן ריצה של אטלסים.

[ ] ביקור שני טעון ”מן המטמון החם”.

סדר עדיפויות

[ ] 'עומס מראש' של נתחים קריטיים/אטלסים; 'Fetchpriority' עבור חשוב.

[ ] בעדיפות נמוכה לזירות משניות.

מדדים

[ ] TTFB/LCP/TTFI/FTF/הורדת תקציב בלוח המחוונים.

[ התראות ] על עלייה במשקל, נפילת CDN יחס פגע.

12) מתכונים כותרת מיני

סטטי (JS/CSS/Atlass):


מטמון בקרה: ציבורי, גיל מקסימלי = 31536000, ללא שינוי
קידוד תוכן: br

מניפסוס סצנת JSON (לעתים קרובות השתנה):


מטמון-בקרה: ציבורי, גיל מקסימלי = 60, מעופש-בזמן-ביטול = 120
פונדקאית-בקרה: גיל מקסימלי = 60, מעופש-אם-טעות = 600

גופנים:


מטמון בקרה: ציבורי, גיל מקסימלי = 31536000, ללא שינוי
מדיניות Cross-Origin-Resource-Policy: cross-resource

משחקי HTML5 טוענים מהר יותר משום שפלטפורמת האינטרנט משלבת תחבורה יעילה (HTTP/2-3 TLS 1. 3), משלוח חכם (CDN, מטמון, טעינה מראש), נכסים קלים (WebP/AVIF, KTX2, Opus) ואתחול אינקרמנטלי (פיצול קוד, סצנות עצלות, מטמון SW). הוספת WebGL/WASM ומשמעת מטרית קפדנית - והמסגרת הראשונה מופיעה בשניות, והכניסה מחדש הופכת כמעט מיידית.