क्यों HTML5 गेम तेजी से लोड करते हैं

परिचय: गति = रूपांतरण

ब्राउज़र में खेलों के लिए, "तेजी से लोड" का अर्थ है: कम बाइट्स, कम अनुरोध, पहले फ्रेम के लिए कम इंतजार। HTML5 स्टैक (HTML/CSS/JS/WebGL/WASM) बॉक्स से आधुनिक डिलीवरी और कैशिंग देता है, जिसका अर्थ है शॉर्ट टीटीएफबी, लो एलसीपी और फास्ट टाइम-टू फर्स्स्ट-इंटएक्रैक्स्ट I)।

1) नेटवर्क और परिवहन: वेब डिफ़ॉल्ट रूप से तेज क्यों है

HTTP/2 и HTTP/3 (QUIC)

मल्टीप्लेक्सिंग: दर्जनों संपत्ति (स्प्राइट्स, कोड के टुकड़े) एक कनेक्शन में आते हैं - कोई टीसीपी "तूफान" नहीं हैं।

0-RTT и टीएलएस 1। 3: त्वरित हैंडशेक, पहले बाइट के लिए छोटा रास्ता।

थ्रेड प्राथमिकता: महत्वपूर्ण संपत्ति (इंजन इनिशियलाइजेशन, मास्टर एटलस) उच्च प्राथमिकता प

सीडीएन और किनारा कैश

POP खिलाड़ी कैश अपरिवर्तनीय संपत्ति (हैश नाम) के करीब नोड्स।

'बासी-जबकि-पुनर्मूल्यांकन' आपको पुराने संस्करण को दिखाने और एक साथ नए को खींचने के लिए करता है।

शीर्षक (नुस्खा):


कैश-कंट्रोल: सार्वजनिक, अधिकतम आयु = 31536000, अपरिवर्तनीय
सामग्री-एनकोडिंग: br// для JS/CSS (Brotli)
क्रॉस-ओरिजिन-रिसोर्स-पॉलिसी: क्रॉस-ओरिजिन
समय-अनुमति-उत्पत्ति:

2) बंडलिंग और कोड-स्प्लिट: "जितना आपको चाहिए उतना ही" वितरित करना

ईएस मॉड्यूल और गतिशील आयात

कोड को स्तर के पैक में विभाजित करें: "लॉबी", "ट्यूटोरियल", "स्तर 1-3", "स्टोर"।

प्रारंभिक स्क्रीन को केवल इनिशियलाइजेशन चंक (50-150 KB gz/br) प्राप्त होता है। शेष मांग पर है।

ट्री-शेकिंग और मिनीफिकेशन

अप्रयुक्त इंजन/लाइब्रेरी API हटाएँ.

Terser/LightnoCSS + मॉड्यूल साइडइफेक्ट्स = आक्रामक रूप से मृत कोड काटने के लिए गलत।

गतिशील लोडिंग का उदाहरण:

जेएस
//BattalRenderer} = आयात की प्रतीक्षा कर रहा है ('/chunks/BattalRenderer. जेएस ');
नया बैटलरेंडरर ()। माउंट (कैनवास);

3) संपत्ति: मुख्य बाइट बचत

छवियाँ

UI/चित्रण के लिए WebP/AVIF: माइनस 25-50% आकार बनाम PNG/JPEG।

स्प्राइट सूची और एटलस प्रश्नों और ओवरहेड को कम करते हैं।

उपकरण/क्लाइंट संकेत: 'स्वीकारें-CH: DPR, चौड़ाई, व्यूपोर्ट-चौड़ाई' → सर्वर/एज वांछित आकार देता है।

3D/Textures

आधार/UASTC (KTX2): GPU बनावट (ETC1S/ASTC/BC) का सार्वभौमिक संपीड़न - एक फ़ाइल लोड करें, इसे वीडियो कार्ड प्रारूप में अनपैक करें।

मीप स्तर उत्तरोत्तर लोड किए जाते हैं: पहले कम गुणवत्ता - फिर नमूना।

ऑडियो

Opus के बजाय MP3/AAC - कम बिटरेट पर बेहतर; मांग पर स्ट्रीमिंग ट्रैक (ज़ोन संगीत - ज़ोन में प्रवे

वीडियो/कटकनेस

लघु वीडियो के लिए WebCodecs/Media Source और LL-HLS; पोस्टर और पहला खंड - प्रीलोड, बाकी - आलसी।

4) इंजन प्रारंभिक: पहले "कंकाल", फिर "मांस"

आलसी दृश्य ग्राफ

हम केवल महत्वपूर्ण दृश्य नोड्स (UI, कैमरा, पृष्ठभूमि) लोड करते हैं। मॉडल/शेडर्स - जैसा कि जरूरत है।

पृष्ठभूमि परिसंपत्ति कार्य: बूटलोडर एक प्राथमिकता कतार रखता है।

सेवा कार्यकर्ता (SW) एक "गर्म कैश" के रूप में

पहली यात्रा पर स्थापित और क्लाइंट कर्नेल, एटलस मैनिफेस्ट, शेडर्स को कैश करता है।

री-लॉगिन पर - ऑफ़ लाइन तत्परता और TTFI ~ तुरंत।

SW रणनीति का उदाहरण (सरलीकृत):

जेएस स्वयं। AddeventListener ('लाने', e => {
e. (कैश के साथ। ओपन ('गेम-वी 12')। फिर (async c => {
const cached = इंतजार कर रहा है c. मैच (e) अनुरोध);
const ताजा = प्राप्त (ई। अनुरोध)। फिर (r => {c. डाल (e)। अनुरोध, आर। क्लोन ()); रिटर्न आर;});
वापसी संचित        ताजा;
}));
});

5) WebGL और WASM: ब्राउज़र में "देशी" गति

WebGL/WebGPU: shaders और रेंडर - GPU पर; सीपीयू तर्क पर बना हुआ है।

वेबअसेंबली (WASM): इंजन के भारी हिस्से (भौतिकी, पथ, बनावट) लगभग देशी पुस्तकालयों की तरह काम करते हैं।

वेब वर्कर्स: बनावट/ऑडियो डिकोड, लेवल पार्सिंग, मेष तैयार करना - कोई मुख्यधारा के ताले नहीं।

पहली बार फ्रेम (एफटीएफ) अनुकूलन:

एफटीएफ की खातिर, हम "सुंदरता" का त्याग करते हैं: कम-पॉली/लो-रेस लोड करें, बाद में हाई-रेस स्ट्रीम करें।

6) लोडिंग को प्राथमिकता देना: पहले महत्वपूर्ण पास दें

एचटीएमएल संकेत:

html
<link rel = "प्रीकनेक्ट" href = "https ://cdn। उदाहरण। कॉम">
<link rel = "preload" = "स्क्रिप्ट" href = "/app। a1b2c3। js" crossorigin>
<link rel = "preload" = "image" href = "/atlass/ui @ 1x। avif" imamesrcset = "/ui @ 2x। avif 2x">

प्राथमिकताएं और 'लाभ प्राप्ति'

' फेचप्रियोरिटी =" हाई" - इनिशियलाइजेशन जेएस और यूआई एटलस।

बाकी परिसंपत्तियां 'कम' हैं ताकि महत्वपूर्ण मार्ग में हस्तक्षेप न करें।

7) "फास्ट" एचटीएमएल 5 गेम्स के मेट्रिक्स और एसएलओ

लक्ष्य:

TTFB <200-300 ms (CDN के साथ)।
एलसीपी (लॉबी) <1। 8–2. 5 s मोबाइल पर।
टाइम-टू-फर्स्ट-इंटरैक्शन (TTFI) <2-3 с।
दृश्य की शुरुआत के बाद पहला फ्रेम इन-गेम <1-2 s।
कुल डाउनलोड (पहला रन): ≤ 1-3 एमबी प्रति लॉबी, ≤ 5-10 एमबी पहली लड़ाई/स्तर तक।
पुनः प्रारंभ करें: ~ 0-200 KB SW कैश के लिए धन्यवाद।

अवलोकन: नेटवर्क/भू/उपकरणों, वेब विटल्स, बूटलोडर प्रगति, टाइमआउट विफलताओं पर RUM घटनाएं।

8) पाइपलाइन विधानसभा: "पतली पहली बाइट" कैसे प्राप्त करें

1. बंडल विश्लेषण (स्रोत-मानचित्र-खोजकर्ता, वेबपैक-बंडल-विश्लेषक)।

2. दृश्यों/विशेषताओं द्वारा कोड-विभाजन, "मोटी" पॉलीफिल्स को हटाना (हम आधुनिक ब्राउज़र को लक्षित करते हैं)।

3. Minification: Terser/ESBuild + CSS Minify, देव तर्क हटाना।

4. चित्र: 'तेज/स्क्वोश' → AVIF/WebP, 'srcset' की पीढ़ी।

5. बनावट: KTX2 (आधार/UASTC) में लिफाफा, मिप्स बनाना।

6. ऑडियो: ओपस वीबीआर 48-96 kbps, क्लिप - छोटा पूर्वावलोकन।

7. मैनिफेस्ट एसेट्स (आर्टिफैक्ट) + हैश नाम + 'अपरिवर्तनीय'।

8. PWA/SW: कर्नेल प्री-कैश, 'बासी-जबकि-पुनर्नवीनीकरण' के साथ एटलस का रनटाइम कैश।

9. सीडीएन: प्रीलोड-संकेत, 'सरोगेट-कंट्रोल', टैग द्वारा सॉफ्ट-पर्ज।

9) रनटाइम प्रदर्शन: लोड करने के बाद खेल को "उड़ान" बनाने के लिए

मुख्य धागा बजट: JS-taski <50 ms धारण करें; भारी - श्रमिकों में।

बैच रेंडर: समूह ड्रा-कॉल, इंस्टेंसिंग का उपयोग करें।

जीसी दबाव: किराया सरणियों/बफर्स, गेम टिक्स में "कचरा" से बचें।

अनुकूली एफपीएस: गेमप्ले को छूने के बिना एफपीएस गिरने पर पोस्ट-इफेक्ट को कम करें।

10) एंटी-पैटर्न (जो खेल को धीमा बनाता है)

एक अखंड बंडल 5-15 एमबी "शुरू करने के लिए।"

GPU संपीड़न के बिना PNG बनावट, नहीं।

'rng% N' in एसेट लोडर (दृढ़संकल्प अधिक महत्वपूर्ण है - लेकिन यह पीएफ के बारे में भी है)।
कैश हेडर के बिना या हैश नाम के बिना अनुरोध - प्रत्येक यात्रा "ठंडा"।
पूरी दुनिया के लिए पॉलीफिल्स (IE, पुरानी सफारी) - व्यर्थ में मेगाबाइट्स खींचना।
एसडब्ल्यू/प्रीलोड की कमी - बार-बार यात्राएं पहले की तरह मुश्किल हैं।
"हेवी" फोंट ('यूनिकोड-रेंज' और 'फॉन्ट-डिस्प्ले: स्वैप' के बिना कई शैलियाँ)।

11) फास्ट HTML5 गेम चेकलिस्ट

नेटवर्क और सीडीएन

HTTP/3 सक्षम; CDN/प्रदाताओं के लिए 'preconnect'।
'कैश-कंट्रोल: अपरिवर्तनीय' + हैश- имена; 'बासी-जबकि-पुनर्जागरण'।

कोड और बंडल

दृश्य से कोड विभाजित; ईएस मॉड्यूल; पेड़ हिलाना।
इनिशियलाइजेशन JS br; कोड कार्ड अलग से।

आस्तियाँ

UI के लिए WebP/AVIF; KTX2 बनावट के लिए आधार/यूएएसटीसी।
एटलस और मिप्स; ओपस ऑडियो; आलसी वीडियो/कटकनेस।

PWA/कैश

सेवा कार्यकर्ता: कर्नेल प्री-कैश, एटलस का रनटाइम कैश।
एक दूसरी यात्रा "गर्म" कैश से लोड की जाती है।

प्राथमिकताएं

महत्वपूर्ण चंक/एटलस का 'प्रीलोड'; महत्वपूर्ण के लिए 'fetchpriority'।
द्वितीयक दृश्यों के लिए कम प्राथमिकता

मेट्रिक्स

डैशबोर्ड पर TTFB/LCP/TTFI/FTF/डाउनलोड-बजट।
वजन बढ़ ने पर अलर्ट, हिट-अनुपात सीडीएन गिरता है।

12) मिनी शीर्षक व्यंजनों

स्थिर (JS/CSS/Atlases):


कैश-कंट्रोल: सार्वजनिक, अधिकतम आयु = 31536000, अपरिवर्तनीय
सामग्री-एनकोडिंग: br

JSON दृश्य घोषणापत्र (अक्सर बदल दिया गया):


कैश-कंट्रोल: सार्वजनिक, अधिकतम आयु = 60, बासी-जबकि-पुनर्नवीनीकरण = 120
सरोगेट-नियंत्रण: अधिकतम आयु = 60, बासी-यदि त्रुटि = 600

फ़ॉन्ट्स:


कैश-कंट्रोल: सार्वजनिक, अधिकतम आयु = 31536000, अपरिवर्तनीय
क्रॉस-ओरिजिन-रिसोर्स-पॉलिसी: क्रॉस-ओरिजिन

HTML5 गेम तेजी से लोड होते हैं क्योंकि वेब प्लेटफॉर्म कुशल परिवहन (HTTP/2-3 TLS 1) को जोड़ ती है। 3), स्मार्ट डिलीवरी (सीडीएन, कैश, प्रीलोड), लाइट एसेट्स (वेब/एवीआईएफ, KTX2, ओपस) और वृद्धिशील इनिशियलाइजेशन (कोड स्प्लिट, आलसी दृश्य, एसडब्ल्यू कैश)। WebGL/WASM और सख्त मीट्रिक अनुशासन जोड़ें - और पहला फ्रेम सेकंड में दिखाई देता है, और फिर से प्रवेश लगभग तात्कालिक हो जाता है।