كازينو التشفير
تورنت جير
لماذا يتم تحميل ألعاب HTML5 بشكل أسرع
مقدمة: السرعة = التحويل
بالنسبة للألعاب في المتصفح، تعني كلمة «أحمال أسرع»: عدد أقل من البايت، وطلبات أقل، وطلبات أقل في انتظار الإطار الأول. يوفر مكدس HTML5 (HTML/CSS/JS/WebGL/WASM) التسليم الحديث والتخزين المؤقت خارج الصندوق، مما يعني قصر TTFB ومنخفض LCP والتفاعل السريع من الوقت إلى الأول (TTFI)
1) الشبكة والنقل: لماذا تكون الويب أسرع افتراضيًا
HTTP/2 и HTTP/3 (QUIC)
تعدد الإرسال: تأتي العشرات من الأصول (العفاريت، أجزاء من الكود) في اتصال واحد - لا توجد «عواصف» TCP.
0-RTT и TLS 1. 3: مصافحة سريعة، طريق أقصر إلى البايت الأول.
تحديد أولويات المواضيع: تحظى الأصول الحيوية (بدء تشغيل المحرك، الأطلس الرئيسي) بأولوية أعلى.
مخبأ CDN والحافة
عقد POP أقرب إلى اللاعب يخبأ الأصول غير القابلة للتغيير (أسماء التجزئة).
«إعادة المصادقة القديمة» تسمح لك بإظهار النسخة القديمة وسحب النسخة الجديدة في نفس الوقت.
العناوين (وصفة):
التحكم في المخبأ: عام، الحد الأقصى للعمر = 31536000، غير قابل للتغيير
ترميز المحتوى: br// для JS/CSS (Brotli)
سياسة الموارد عبر المنشأ: عبر المنشأ
التوقيت - السماح - الأصل:2) التجميع وتقسيم الرموز: تقديم «بقدر ما تحتاج»
وحدات ES والاستيراد الديناميكي
قسّم الكود إلى حزم المستوى: «لوبي»، «تعليمي»، «مستويات 1-3»، «متجر».
تتلقى الشاشة الأولية قطعة التهيئة فقط (50-150 كيلوبايت gz/br). الباقي تحت الطلب.
هز الأشجار وتصغيرها
إزالة واجهات برمجة التطبيقات غير المستخدمة للمحرك/المكتبة.
Terser/LightningCSS + module sideEffects = خطأ في قطع الكود الميت بقوة.
مثال على التحميل الديناميكي:js
//حمل عارض المعركة فقط في بداية المعركة const {BattleRenderer} = انتظر الاستيراد ('./chunks/battleRenderer. js') ؛
New BattleRenderer (). الجبل (القماش) ؛3) الأصول: مدخرات البايت الرئيسية
صور
WebP/AVIF لواجهة المستخدم/الرسوم التوضيحية: ناقص 25-50٪ للحجم مقابل PNG/JPEG.
قوائم Sprite والأطالس تقلل الاستفسارات والنفقات العامة.
تلميحات الجهاز/العميل: «Accept-CH: DPR، Width، Viewport-Width» → الخادم/الحافة يعطي الحجم المطلوب.
3D/Textures
الأساس/UASTC (KTX2): الضغط الشامل لقوام وحدة معالجة الرسومات (ETC1S/ASTC/BC) - قم بتحميل ملف واحد، قم بتفكيكه بتنسيق بطاقة الفيديو.
يتم تحميل مستويات اللقاءات تدريجياً: أولاً جودة منخفضة → ثم عينة.
الصوت
Opus بدلاً من MP3/AAC - أفضل عند البيترات المنخفضة ؛ بث المسارات عند الطلب (موسيقى المنطقة - بعد دخول المنطقة).
الفيديو/المشاهد
WebCodecs/MediaSource وLL-HLS لأشرطة الفيديو القصيرة ؛ ملصق والجزء الأول - التحميل المسبق والباقي - كسول.
4) بدء تشغيل المحرك: أولاً «هيكل عظمي» ثم «لحم»
رسم بياني للمشهد الكسول
نحن نحمل فقط عقد المشهد الحرج (واجهة المستخدم، الكاميرا، الخلفية). نماذج/ظلال - حسب الحاجة.
وظائف الأصول الخلفية: يحمل حامل التمهيد قائمة انتظار ذات أولوية.
عامل الخدمة (SW) باعتباره «مخبأ دافئًا»
تم تركيبه في الزيارة الأولى ويخبئ نواة العميل، بيان الأطلس، الظلال.
عند إعادة تسجيل الدخول - الاستعداد غير المتصل بالإنترنت و TTFI ~ على الفور.
مثال على استراتيجية SW (مبسطة):js الذات. إضافة EventListener («إحضار»، e => {
e. ResponseWith (caches. مفتوح («game-v12»). ثم (async => {
const cached = waite c. match (e. الطلب) ؛
const fresh = getch (e. (. ثم (r => {c. put (e. request, r. استنساخ ()) ؛ العودة r ؛}) ؛
العودة المخبأة طازجة ؛
}));
});5) WebGL و WASM: السرعة «الأصلية» في المتصفح
WebGL/WebGPU: shaders and prender - on GPU; لا تزال وحدة المعالجة المركزية على المنطق.
WebAssembly (WASM): تعمل الأجزاء الثقيلة من المحرك (الفيزياء، المسار، تفريغ القوام) تقريبًا مثل المكتبات المحلية.
عمال الويب: فك تشفير الملمس/الصوت، تحليل المستوى، تحضير الشبكات - لا توجد أقفال سائدة.
التحسين لأول مرة للإطار (FTF):- من أجل FTF، نضحي بـ «الجمال»: تحميل منخفض البولي/منخفض الدقة، تدفق عالي الدقة لاحقًا.
6) إعطاء الأولوية للتحميل: دع المهم يمر أولاً
يلمح HTML:html
<link rel = "preconce" href = "https ://cdn. مثال على ذلك. com'>
<link rel = «preload' as =» script «href = »/app. a1b2c3. js" crossorigin>
<link rel = «preload' as =» image «href = »/atlases/ui @ 1x. avif» imagesrcset = »/ui @ 2x. avif 2x">جلب الأولويات و «الجنين»
"fetchpriority =" high "- atlases JS و UI.
بقية الأصول «منخفضة» حتى لا تتدخل في المسار الحرج.
7) المقاييس و SLO لألعاب HTML5 «السريعة»
الأهداف:- TTFB <200-300 مللي ثانية (مع CDN).
- LCP (لوبي) <1. 8–2. 5 s على الهاتف المحمول.
- Time-to-First-Interaction (TTFI) <2-3 с.
- First Frame In-Game <1-2 s بعد بداية المشهد.
- إجمالي التنزيل (التشغيل الأول): ≤ 1-3 ميجابايت لكل ردهة، ≤ 5-10 ميجابايت حتى المعركة/المستوى الأول.
- إعادة التشغيل: ~ 0-200 كيلوبايت بفضل ذاكرة التخزين المؤقت SW.
إمكانية الرصد: أحداث RUM على الشبكات/geo/devices، Web Vitals، تقدم bootloader، فشل المهلة.
8) تجميع خطوط الأنابيب: كيفية الحصول على «بايت أول رقيق»
1. تحليل الحزمة (مستكشف خرائط المصدر، محلل حزمة الويب).
2. تقسيم الكود بواسطة المشاهد/الميزات، إزالة البوليفيلات «السميكة» (نستهدف المتصفحات الحديثة).
3. Minification: Terser/ESBuild + CSS Minify، إزالة منطق التطوير.
4. الصور: "حاد/سكووش" → AVIF/WebP، جيل "srcset'.
5. القوام: الظرف في KTX2 (الأساس/UASTC)، وإنشاء المشابك.
6. الصوت: Opus VBR 48-96 kbps، مقاطع - معاينات مختصرة.
7. بيان الأصول (قطعة أثرية) + أسماء التجزئة + «غير قابلة للتغيير».
8. PWA/SW: مخبأ النواة المسبق، مخبأ وقت التشغيل للأطالس مع «إعادة التحقق من قديم الوقت».
9. CDN: تلميحات مسبقة، «التحكم البديل»، تطهير ناعم بواسطة علامة.
9) أداء وقت التشغيل: لجعل اللعبة «تطير» بعد التحميل
ميزانية الموضوع الرئيسي: عقد JS-taski <50 ms ؛ ثقيلة - في العمال.
عرض الدفعة: مكالمات السحب الجماعية، استخدم التثبيت.
ضغط GC: صفائف/مخزنات الإيجار، تجنب «القمامة» في تشنجات الألعاب.
FPS التكيفي: قلل من التأثيرات اللاحقة عندما تسقط FPS دون لمس طريقة اللعب.
10) الأنماط المضادة (مما يجعل اللعبة بطيئة)
حزمة واحدة متجانسة 5-15 ميجابايت «للبدء».
قوام بابوا غينيا الجديدة بدون ضغط وحدة معالجة الرسومات، بدون KTX2/Basis.
'rng٪ N' في محمل الأصول (التحديد أكثر أهمية - ولكن هذا أيضًا يتعلق بـ PF).
الطلبات بدون رؤوس مخبأة أو بدون أسماء تجزئة → كل زيارة «باردة».
بوليفيلات للعالم بأسره (IE، سفاري قديم) - تسحب الميجابايت عبثًا.
نقص SW/التحميل المسبق - الزيارات المتكررة صعبة مثل الأولى.
خطوط «ثقيلة» (عدة أنماط بدون «نطاق يونيكود» و «عرض الخط: مبادلة»).
11) قائمة مراجعة لعبة Fast HTML5
الشبكة و CDN
- تمكين HTTP/3 ؛ «إعادة الاتصال» بـ CDN/مقدمي الخدمات.
- «التحكم في المخبأ: غير قابل للتغيير» + هاش - имена ؛ «قديم أثناء إعادة المصادقة».
الرمز والحزم
- رمز مقسم حسب المشهد ؛ ووحدات النظام الموحد ؛ اهتزاز الأشجار.
- الاستهلال JS ≤ 150KB br ؛ بطاقات الرمز بشكل منفصل.
الأصول
- WebP/AVIF لـ UI ؛ أساس KTX2/UASTC للقوام.
- الأطالس والرموز ؛ Opus audio; مقاطع فيديو/مشاهد كسولة.
PWA/Cache
- عامل الخدمة: مخبأ النواة، مخبأ وقت التشغيل للأطالس.
- يتم تحميل زيارة ثانية «من المخبأ الدافئ».
الأولويات
- «تحميل مسبق» من القطع/الأطالس الحرجة ؛ «الأصالة» أمر مهم.
- أولوية منخفضة للمشاهد الثانوية.
المقاييس
- TTFB/LCP/TTFI/FTF/ميزانية التنزيل على لوحة القيادة.
- تنبيهات بشأن زيادة الوزن، انخفاض نسبة الإصابة CDN.
12) وصفات العنوان المصغر
Static (JS/CSS/Atlases):
التحكم في المخبأ: عام، الحد الأقصى للعمر = 31536000، غير قابل للتغيير
ترميز المحتوى: br
Cache-Control: public, max-age = 60, while-while-revalidate = 120
التحكم البديل: الحد الأقصى للعمر = 60، قديم إذا كان خطأ = 600
التحكم في المخبأ: عام، الحد الأقصى للعمر = 31536000، غير قابل للتغيير
سياسة الموارد عبر المنشأ: عبر المنشأيتم تحميل ألعاب HTML5 بشكل أسرع لأن منصة الويب تجمع بين النقل الفعال (HTTP/2-3 TLS 1. 3)، التسليم الذكي (CDN، المخبأ، التحميل المسبق)، الأصول الخفيفة (WebP/AVIF، KTX2، Opus) والتهيئة التدريجية (تقسيم الرمز، المشاهد الكسولة، مخبأ SW). أضف WebGL/WASM والانضباط المتري الصارم - ويظهر الإطار الأول في ثوانٍ، ويصبح إعادة الدخول فوريًا تقريبًا.