क्लाइंट और सर्वर पर जटिल एसवीजी

यह बड़े और जटिल एसवीजी पर राफेलजेएस को गति देने के प्रयास में पीड़ा, दर्द, उतार-चढ़ाव की एक छोटी कहानी है। यदि आप ऐसी समस्याओं से पीड़ित हैं, तो आपको चांदी की गोली के लिए इस लेख के अंत में इंतजार नहीं करना चाहिए, लेकिन मुझे उम्मीद है कि समाधान खोजने के हमारे तरीके के बारे में सभी को पढ़ना दिलचस्प होगा।

यह सब कैसे शुरू हुआ?

यह सब इस तथ्य से शुरू हुआ कि रेजुम में हम svg खींचते हैं, इसे बहुत अधिक और खूबसूरती से खींचते हैं।



ऐतिहासिक रूप से, यह सब उत्कृष्ट राफेलजेएस पुस्तकालय की मदद से बनाया गया है (यहां कोई विडंबना नहीं है, इसके लिए दिमित्री बारानोव्स्की के लिए धन्यवाद)। जैसे ही परियोजना पर काम शुरू हुआ, राफेल एकमात्र समाधान था जिसने सभी को लागू करने के लिए संभव बनाया, जो डिजाइनरों ने उचित समय में आकर्षित किया।

लेकिन हमारा आनंद समय से पहले था: सामान्य ब्राउज़र में सामान्य मशीनों पर औसतन 5-7 सेकंड के लिए एक रेज़्यूमे खींचना (जब कोई एक स्थिति "असामान्य" स्थिति में चली गई - 30 तक! सेकंड)। यह स्पष्ट है कि लंबे समय में यह किसी के अनुकूल नहीं था और अनुकूलन विधियों की तलाश करना आवश्यक था।

भाग 1. (टैंगो और) कैश

तो हमारे पास क्या है?

• js कोड का एक गुच्छा जो सुंदर चित्र खींचता है
• 5 से 30 सेकंड से निष्पादन समय
• थोड़ा समय और इसे पूरा करने के लिए बहुत सारी इच्छा

हर किसी के दिमाग में सबसे पहले यही आता है कि राफेल इतने लंबे समय तक पेंटिंग क्यों करता रहा। लाइब्रेरी कोड में थोड़ा गोता लगाने से दिलचस्प विशेषताएं सामने आईं कि ब्राउज़र svg के साथ कैसे काम करता है, यह विभाजन केवल दो शिविरों में चला गया: जो लोग इनलाइन svg को समझते हैं और जो नहीं करते हैं।
इसलिए, पुराने ब्राउज़रों के साथ संगतता के लिए, राफेल दस्तावेज़ के डोम ट्री के साथ सीधे काम करता है (यह सब बहुत अशिष्ट है, लेकिन वास्तव में सच है), यह स्पष्ट है कि जब बहुत सारे तत्व होते हैं, तो सामान्य ब्राउज़र में भी एक कठिन समय होता है (और अगर याद है कि प्रतिपादन करते समय, तर्क है, यह वास्तव में बुरा है)

ज्ञान के साथ सशस्त्र और यह महसूस करते हुए कि हम राफेल को जल्दी से ठीक नहीं कर पाएंगे, हमने सर्वर साइड पर रेंडर करने के परिणाम को बायपास और कैश करने का निर्णय लिया। आविष्कार किया - किया गया, इस तरह योजना बनी:

1. एक आदमी फिर से शुरू होता है
2. प्रत्येक 10 ब्लॉक को सर्वर पर भेजा और भेजा जाता है।
3. जब आप फिर से शुरू करते हैं, तो ब्लॉक को पहले से ही सर्वर साइड पर सीधे टेम्पलेट में डाला जाता है, राफेल को भी नहीं बुलाया जाता है
4. यदि कुछ ब्लॉक कैश में नहीं है, तो केवल इसे खींचा जाता है

इससे हमें पृष्ठ लोड को एक सेकंड तक कम करने की अनुमति मिली, जो अभी भी काफी था, लेकिन 5-7 के बाद अविश्वसनीय रूप से तेज लग रहा था। एकमात्र समस्या ब्राउज़र इनलाइन svg समर्थन के बिना है, उन्होंने सब कुछ और हमेशा चित्रित किया। (हमने आधुनिकीकरण का उपयोग करते हुए ब्राउज़र की क्षमताओं का परीक्षण किया)

भाग 2. हम सर्वर पर svg आकर्षित करते हैं। घटिया अनुभव

तो, अब हमारे पास क्या है?

• js कोड का एक गुच्छा जो सुंदर चित्र खींचता है
• निष्पादन समय 1 से 5-30 सेकंड तक
• थोड़ा समय और व्यापार सर्वर पर svg आकर्षित करने की जरूरत है

चूंकि अनुकूलन के लिए जुनून अंतहीन है, इसलिए हमने वर्तमान कैशिंग प्रणाली पर ध्यान नहीं दिया और समस्या को किसी भी तरह से अधिक मौलिक रूप से हल करने का फैसला किया। और फिर हमें सर्वर पर हमारे रिज्यूमे और रिक्तियों को खींचने की संभावना का अध्ययन करने के लिए अधिकारियों के कार्य का सामना करना पड़ता है।

पहला कदम मैंने देखा कि रूबी की दुनिया में इसके लिए क्या है (हमारी पटरियों पर एक बैकेंड), लेकिन मुझे कुछ भी समझदार नहीं मिला। हां, अगर मुझे मिल भी गया था, तो कोड के पूरे झुंड को फिर से लिखने की कोई इच्छा नहीं थी जो ब्लॉक प्रदान करने के लिए जिम्मेदार है।

यानी पहली अनिवार्य आवश्यकता दिखाई दी - वर्तमान जेएस-कोड ड्राइंग ब्लॉकों को छोड़ने के लिए।

बहुत पहले समाधान जो हमने कोशिश करने का फैसला किया है वह सब कुछ रूबीर के तहत चलाने के लिए है, v8 के आसपास एक आवरण जो आपको रूबी में js कोड चलाने की अनुमति देता है।
लेकिन समस्या यह है कि v8 js की व्याख्या करने के लिए एक मशीन है, लेकिन ब्राउज़र नहीं है, और तदनुसार, इसमें कोई DOM ट्री नहीं है, इसलिए राफेल ने आराम किया, लेकिन कुछ भी आकर्षित नहीं करना चाहता था। लेकिन हम पहले से बहुत दूर हैं जिन्होंने एक ब्राउज़र का अनुकरण करने के कार्य का सामना किया, इसलिए जल्दी से समाधान - jsdom को google करें

इस योजना ने उड़ान भरी, लेकिन जब हमने पूरे फिर से शुरू होने वाले डेटाबेस को खींचने की कोशिश की, तो हम पहले ही 10 वें स्थान पर गिर गए, क्योंकि त्रुटि स्मृति को आवंटित नहीं कर सकी। हमने आँकड़ों को देखा, मेमोरी खपत को मापा और लगभग 50-70 मेगाबाइट लीकेज और 8 सेकंड्स को अंजाम दिया। लेकिन स्वयं तथ्य: आप सर्वर पर एसवीजी को प्रस्तुत करने के लिए मौजूदा कोड का उपयोग कर सकते हैं, इसलिए हम संतुष्ट थे।

इसलिए, हमने योजना को थोड़ा सरल बनाने और रूबी को बाहर निकालने का फैसला किया। 2011 में मुख्य प्रवृत्ति और उपहास की वस्तु को याद रखना - विशेष रूप से v8 के तहत पूरी तरह से काम करने के बाद से नोड्ज।

इस फ्रेंकस्टीन को एक्सप्रेसजेस में अटकाने के बाद, हम, हालांकि एक खरोंच के साथ, लेकिन हमारी तस्वीर मिल गई। गति 4-5 सेकंड तक बढ़ गई, रिसाव 40-50 तक गिर गया।
लंबे प्रोफाइलिंग के बाद, वे इस निष्कर्ष पर पहुंचे कि लीक से छुटकारा पाने का एकमात्र तरीका jsdom से छुटकारा पाना है। लेकिन इसके लिए पूरी तरह से अलग दृष्टिकोण की आवश्यकता थी।

भाग 3. हम ब्राउज़र में एसवीजी बनाना जारी रखते हैं। पहली उम्मीद

पहले अजीब प्रयोगों के बाद, हमने फैसला किया कि आधे उपाय हमारी मदद नहीं करेंगे और हमें और अधिक वैश्विक बदलावों के लिए जाना होगा।

मुख्य विचार यह था कि हम SVG रेंडरिंग प्रक्रिया को दो चरणों में अलग करना चाहते थे:

• एक अमूर्त मॉडल बनाना जो भविष्य की तस्वीर का वर्णन करता है
• इस मॉडल को एसवीजी में परिवर्तित करना

इस दृष्टिकोण के कई फायदे हैं:

• नोडज में DOM की कमी के साथ समस्या का समाधान किया और सर्वर पर फिर से शुरू करने में सक्षम थे
• इनलाइन svg समर्थन वाले ब्राउज़र के लिए, हम अब एसवीजी को पाठ के रूप में उत्पन्न कर सकते हैं, और फिर इसे सीधे दस्तावेज़ में पेस्ट कर सकते हैं, जो एक गंभीर स्पीडअप होगा
• भविष्य में हमारे मॉडल के लिए अलग-अलग एडेप्टर अलग-अलग विचारों का उपयोग करके उत्पन्न करने का अवसर प्रदान किया (उदाहरण के लिए, IE8 के लिए VML)

सबसे पहले, विचार राफेल को आंतने और उसमें से सभी तर्क को बाहर निकालने के लिए आया, जो डोम तत्वों के निर्माण से बंधा नहीं है, और बाकी को बदलने की कोशिश करते हैं। हालांकि, संस्करण 2.0 के स्रोत कोड के कई घंटों के सावधानीपूर्वक अध्ययन के बाद, यह स्पष्ट हो गया कि यह एक सप्ताह के लिए काम कर रहा था, जबकि समय सीमा तेजी से आ रही थी।

सोचने के बाद, हमने राफेल इंटरफ़ेस को कॉपी करके हमारे कार्यान्वयन को लिखने का फैसला किया। फिर सब कुछ सरल है: फिर से शुरू पर प्रत्येक ब्लॉक एक अलग वर्ग था, जिसमें पर्यावरण के आधार पर, हम या तो एक राफेल या हमारी बाइक का एक उदाहरण फेंक देंगे।

इसलिए बेली का जन्म हुआ।

परिणाम है:



उपयोगकर्ता रेल के लिए एक अनुरोध करता है, रेल नोड्स के लिए दस्तक देता है, नोड्ज रेज्यूमे ब्लॉक के कोड को कॉल करता है और एसवीजी डेटा के साथ जेन्स को रेल भेजता है, और रेल, बदले में, जंक्शन को एसवीजी में परिवर्तित करना होगा, इसलिए अबिन्थ पैदा हुआ था।

योजना ने काम किया, लेकिन उत्पादन समाधान अभी भी बहुत दूर था: प्रतिपादन में औसतन 0.5 सेकंड का समय लगा और स्केलिंग के साथ बहुत सारे प्रश्न उत्पन्न हुए।

भाग 4. पूर्णता की कोई सीमा नहीं है

एक प्रोटोटाइप था, लेकिन मैं इसे ध्यान में लाना चाहता था, इसलिए हमने उन आवश्यकताओं की एक सूची बनाने का फैसला किया जो इस समय हमें संतुष्ट करेगी:

• कोड की एकता: मैं क्लाइंट साइड पर काम करने वाले कोड से किसी भी तरह से अलग नहीं होने के लिए सर्वर पर कोड ड्राइंग चाहता था
• मैं रूबी-भाग को कम से कम करना चाहता था और एसवीजी के पूरे प्रतिपादन को मुख्य परियोजना के ढांचे के बाहर करना चाहता था

परिणामस्वरूप, यह पता चला कि हमने मुख्य रिपोजिटरी से 4 और परियोजनाओं का चयन किया:

1. टेट्रिस - पुस्तकालय से सारगर्भित सभी ब्लॉक रेंडरिंग कोड जिसके साथ इसे तैयार किया जाएगा
2. बेली - राफेल इंटरफ़ेस की नकल करता है, भविष्य के एसवीजी वस्तुओं का एक विवरण देता है। हमने इसे बहुत बार फिर से लिखा है, getBBox फ़ंक्शन को रिडीम किया है, और आम तौर पर इसे बहुत तेज किया है।
3. Absinthe - उन्होंने फैसला किया कि यह माणिक सर्वर की तरफ रखने का कोई मतलब नहीं है, कॉफ़ीस्क्रिप्ट पर सब कुछ फिर से लिखना और एक npm पैकेज को एक साथ रखा, इसे जमानतदारों द्वारा दिए गए जोंस की समझ के अनुकूल बनाना
4. Polyomino एक्सप्रेस पर एक सर्वर एप्लिकेशन है, जो मुख्य एप्लिकेशन से एक अनुरोध और डेटा प्राप्त करता है, बेली और एब्सिन्थ को कॉल करता है, परिणाम देता है।

नतीजतन, हमें npm पैकेज के रूप में और रेल की ओर से परिसंपत्ति पाइपलाइन से जोड़कर, दोनों तरफ नोड पर tetris का उपयोग करने का अवसर मिला (इसके लिए हमने बस एक साधारण रत्न इकट्ठा किया जो कि tetris + bteys + absinthe को इसके साथ न्यूनतम तरीके से करता है)।



वर्तमान बेंचमार्क बताते हैं कि हम औसतन 70ms के लिए फिर से शुरू करते हैं, जो पहले से ही बहुत अच्छा परिणाम है, यदि आप प्रारंभिक 7 सेकंड याद करते हैं।

हमारी भविष्य की योजनाओं में पूरी रेंडरिंग प्रणाली को बेली और एबिन्थ के एक समूह में स्थानांतरित करना और राफेल की पूरी अस्वीकृति शामिल है। उसी ब्राउज़र के लिए जो इनलाइन svg का समर्थन नहीं करते हैं, सर्वर पर प्रदान किए गए SVG को इंगित करते हुए img देते हैं।

यदि किसी कारण से नोडजेस प्रतिक्रिया नहीं करते हैं, तो आप हमेशा क्लाइंट पर एसवीजी रेंडरिंग मोड पर स्विच कर सकते हैं।

हमारे पास बेलीज़ और एबिन्थे कोड खोलने के लिए उज्ज्वल विचार हैं और जो चाहे उसे सभी के साथ सर्वोत्तम प्रथाओं को साझा कर सकते हैं।

यदि आप अंत तक पहुँच चुके हैं, तो आपके पास एक बोनस है - हमारी टीम का शुभंकर:



आपके ध्यान के लिए धन्यवाद, कोई 32 और टर्मिनल आपके साथ थे