एक एकल एमएस ट्रेनिंग चैन डिजाइन: गैर जनरेशन तक तकनीकी अनुभव के एक एकल चैन बनाना

WeChat मिनी-ऐप लंबे समय से AppService और WebView के द्वितीयक थ्रेड मॉडल पर आधारित है। आधिकारिक “Skyline रेंडरिंग इंजन परिचय” में स्वीकार किया गया है: वेब का पुराना बोझ भारी है, और जब तार्किक प्रक्रिया तथा रेंडरिंग एक ही प्रकार के थ्रेड मॉडल में एक साथ रखे जाते हैं, तो इंटरफ़ेस स्क्रिप्ट से अवरुद्ध हो जाता है। Skyline ने रेंडरिंग के लिए एक अलग थ्रेड शुरू किया है, जो Layout, Composite और Paint का काम करता है, और AppService में उस JS तथा तर्क निर्माण की प्रक्रिया को अलग कर दिया है, जो पहले WebView द्वारा संभाला जाता था। परिणामस्वरूप, पृष्ठ तार्किक प्रक्रिया से अधिक कठिनता से अवरुद्ध होता है, प्रत्येक पृष्ठ के लिए एक नया JS इंजन बनाने की आवश्यकता नहीं होती, पृष्ठों के बीच अधिक संसाधन साझा किए जा सकते हैं, और फ्रेमवर्क के भीतर JSBridge का उपयोग कम हो जाता है। बेसिक लाइब्रेरी 3.0.0 के आधिकारिक संस्करण के साथ ही ऑनलाइन निरीक्षण में यह देखा गया है: क्लिक से पूर्ण रेंडरिंग (LCP) तक का समय WebView के 2492 मिलीसेकंड से घटकर Skyline के 2052 मिलीसेकंड हो गया है, जो लगभग 17.6% की कमी है; फ्रेमवर्क द्वारा तर्क निर्माण से पूर्ण रेंडरिंग तक का समय 626 मिलीसेकंड से घटकर 312 मिलीसेकंड हो गया है, जो लगभग 50% की कमी है। ये आंकड़े ऑनलाइन चल रहे मिनी-ऐप्स के हैं, न कि प्रयोगशाला के चरम मूल्यों के, इन्हें माइग्रेशन के अनुमान के रूप में लिया जाना चाहिए, न कि अनुबंध में दिए गए गारंटीकृत मूल्यों के।

एक, संगतता एक बल है, और धीरे-धीरे आगे बढ़ना एक अनुशासन है

अधिकारी ने जोर देकर कहा: जो कोड Skyline की नई सुविधाओं का उपयोग नहीं करता है, वह कम वर्जन या असमर्थित प्लेटफ़ॉर्म पर WebView में वापस चला जाएगा। WXS को AppService में स्थानांतरित करने के बाद, पृष्ठ की जानकारी पढ़ने का इंटरफ़ेस असिंक्रोनस हो जाएगा, और जटिल एनीमेशन को रेंडरिंग थ्रेड के अधिक करीब Worklet का उपयोग करके बदल देना चाहिए। माइग्रेशन के सर्वोत्तम अभ्यास में क्रम को सख्ती से लिख दिया गया है:पहले आवश्यकतानुसार इंजेक्शन को सक्रिय करें और दुष्प्रभावों का परीक्षण पूरा करें, फिर धीरे-धीरे हर पृष्ठ पर Skyline को खोलें। जमा परियोजनाओं को प्राथमिकता दी जाती है, जिससे कुंजी मार्ग का स्थानांतरण होता है; नए पृष्ठों के लिए डिफ़ॉल्ट Skyline होता है; नई परियोजनाओं को मेमोरी बदलने के लिए सार्वभौमिक रूप से खोला जा सकता है। पहले हफ्ते में ही पूरे साइट पर स्विच न करें, अन्यथा स्टाइल के सरलीकरण से होने वाले विस्थापन के कारण प्रदर्शन में मिलने वाले लाभ संगतता सूची में विलीन हो जाएंगे।

1.1 आवश्यकतानुसार इंजेक्शन क्यों पहले करना चाहिए

Skyline आवश्यकतानुसार इंजेक्शन पर निर्भर करता है। इसे चालू करने से कुछ पृष्ठों का व्यवहार बदल जाता है, और आधिकारिक रूप से अनुरोध है कि अनुकूलन समस्याओं को पहले से ही समझ लिया जाए। कई टीमें “बैग वॉल्यूम ऑप्टिमाइज़ेशन” को केवल छवियों को कम करने के रूप में समझती हैं, लेकिन मुख्य बैग को अभी भी सभी पृष्ठों के जावास्क्रिप्ट का भार उठाने के लिए छोड़ देती हैं। आवश्यकतानुसार इंजेक्शन और सब-बैगिंग के साथ ही Skyline के साझा इंजन के फायदे सामने आ सकते हैं: कई Skyline पृष्ठ एक ही रेंडरिंग इंस्टेंस में चलते हैं, और ग्लोबल स्टाइल तथा सार्वजनिक कोड को प्रत्येक पृष्ठ के लिए एक बार नकल करने की आवश्यकता नहीं होती है।

दो, उपठेका और पूर्व-डाउनलोड के निर्णय से यूजर की धैर्यता तय होती है

मुख्य पैकेज में केवल लॉन्च और होमपेज की आवश्यकता है। सूची, ऑर्डर, मेरा, एक्टिविटी पेज को स्वतंत्र सब-पैकेज में विभाजित किया जाना चाहिए; शेयर कार्ड से सीधे पहुंचने वाले विवरण पृष्ठ को स्वतंत्र सब-पैकेज में विभाजित करने पर विचार किया जा सकता है, लेकिन इसे सीधे पढ़ने की अनुमति नहीं हैapp.jsसामग्री की स्थिति का खर्च। प्री-डाउनलोड नियमों को उन पृष्ठों पर लिखा जाना चाहिए, जो वास्तव में अगले स्टेशन पर जाते हैं, और इसे जितना संभव हो Wi-Fi तक सीमित करना चाहिए। क्लाइंट वेबव्यू को प्री-हीट करने की तरह स्काईलाइन को स्वचालित रूप से प्री-हीट नहीं करता है, आधिकारिक रूप से प्रदान किया गया हैwx.preloadSkylineView, सुझाव है कि जिन मार्गों पर Skyline पृष्ठ में कूदने की संभावना है, उन पर, औरonShowअंदर विलंबित कॉल, ताकि वापसी के समय एक बार फिर से कोल्ड स्टार्ट का भुगतान न करना पड़े।

तीन, लंबी सूची सबसे अधिक मूल्यवान पृष्ठ है

स्काईलाइन कास्क्रॉल-व्यूसीधे उपनोड के नजदीक होने पर ही रेंडर किया जाता है, और दूर होने पर रिकवर कर लिया जाता है; समान नोड्स शैली की गणना को भी साझा कर सकते हैं। प्रोडक्ट फ़्लो, वर्कऑर्डर फ़्लो और स्टॉक फ़्लो को दूसरे चरण के माइग्रेशन ऑब्जेक्ट के रूप में सबसे अच्छा चुना जा सकता है। बाधा यह है कि उपयोग का तरीका आधिकारिक संरचना के अनुरूप होना चाहिए; अगर एक व्यू के अंदर असंगठित रूप से स्क्रॉल किया जाता है, तो ऑप्टिमाइज़ेशन प्रभावी नहीं होगा। glass-easel ट्री बनाने के समय को कम करता है, लेकिन एक बार में नहीं बचा सकता हैडेटा सेट करेंसेट इंटरफ़ेस का डिज़ाइन। रेंडरिंग इंजन को स्थानांतरित करते हुए, इंटरफ़ेस को अभी भी पृष्ठवत् बनाया जाना चाहिए।

चार, दो सप्ताह के लिए सत्यापन करें, न कि एक बड़े संस्करण पर जोखिम लें

पेज के JSON में Skyline खोलते समय, आमतौर पर एक साथ घोषणा करनी पड़ती हैरेंडररस्काईलाइन के लिए,कंपोनेंट फ्रेमवर्कglass-easel के रूप में है, और आधिकारिक उदाहरण के अनुसार कॉन्फ़िगर किया गया हैडिफ़ॉल्ट डिस्प्ले ब्लॉकऔरडिफ़ॉल्ट कंटेंट बॉक्स, WebView के डिफ़ॉल्ट बॉक्स मॉडल से अंतर को कम करें। सुझाए गए न्यूनतम सत्यापन सेट में हैं: स्टार्टअप पेज, एक महत्वपूर्ण रूपांतरण पेज (ऑर्डर देना या अपॉइंटमेंट), और एक लंबी सूची। डेवलपर टूल्स के Skyline डिबगिंग और Worklet कंपाइलिंग को चालू करें, और Audits तथा Performance का उपयोग करके LCP, फ्रेम रेट और setData फ्रीक्वेंसी को देखें। मेमोरी कमी को कई पेजों के आने-जाने में टेस्ट करना चाहिए; एक ही पेज का स्क्रीनशॉट इसे नहीं दिखा सकता। आधिकारिक आंकड़े को तुलना के रूप में लिया जा सकता है, लेकिन हर इंडस्ट्री का पैकेज आकार और इंटरफ़ेस का आकार अलग होता है, इसलिए अपने ही रियल डिवाइस बेसलाइन को बोलने दें। अगर शेयर किए गए अलग-अलग सब-पैकेज पेज भी Skyline का उपयोग करते हैं, तो शुरुआती इनिशियलाइज़ेशन को अलग से हैंडल करना याद रखें, यह मानकर न चलें कि मुख्य पैकेज की ग्लोबल स्टेट अभी तक लागू हो चुकी है।

Skyline के स्थानांतरण का प्रतिद्वंद्वी WebView नहीं, बल्कि “एक बार में सब कुछ ठीक करना चाहते हैं” वाला कैलेंडर है। पहले हफ्ते में आवश्यकतानुसार इंजेक्शन को रखें, दूसरे हफ्ते में दो महत्वपूर्ण पृष्ठों को, और तीसरे हफ्ते में लंबी सूची को—यह एक “समग्र Skyline अनुकूलन” के लिए त्रैमासिक परियोजना की तुलना में आधिकारिक सर्वोत्तम प्रथाओं के अधिक करीब है। जब क्रिटिकल पाथ स्थिर हो जाए, तब ही नए पृष्ठों को डिफ़ॉल्ट रूप से नए इंजन पर चलने दें—उपयोगकर्ता इसे संस्करण विवरण में पढ़ने के बजाय, अपनी उंगलियों पर पहले महसूस करेंगे।