एक अलग धारा में रोमांच। यैंडेक्स रिपोर्ट

चिकनी यूआई को बनाए रखते हुए, क्लाइंट पर छवियों के साथ कैसे काम करें? इंटरफ़ेस डेवलपर पावेल स्मिरनोव ने बाजार पर तस्वीरों के लिए खोज विकसित करने के अनुभव के आधार पर इसके बारे में बात की। रिपोर्ट से, आप सीख सकते हैं कि वेब वर्कर्स और ऑफस्क्रीन कैन्वास का सही तरीके से उपयोग कैसे करें।



- इस आधे घंटे के लिए हम रोमांच के बारे में बात करेंगे। मैं आपको अपने साहसिक कार्य के बारे में बताऊंगा और वास्तव में आशा करता हूं कि मेरी रिपोर्ट आपको प्रेरित करेगी और आप घर पर भी ऐसा ही करेंगे।

सबसे पहले मैं कुछ नई या बहुत नई तकनीकों के बारे में बात करना चाहता था जो हमारे ब्राउज़र हमें देते हैं और जो हमें शांत चीजें करने की अनुमति देती हैं। लेकिन मुझे लगता है कि यह बहुत मजेदार नहीं होगा, क्योंकि हर कोई एमडीएन में जा सकता है और कुछ पढ़ सकता है। इसलिए, मैं एक विशेषता की कहानी बताता हूं जो मैंने मार्केट टीम के साथ की थी।

आइए पहले अपना परिचय दें। मेरा नाम पाशा है, मैं मार्केट टीम में एक इंटरफ़ेस डेवलपर हूं।



मैं मुख्य रूप से मोबाइल इंटरफेस - मैप सर्च, ऑफर कार्ड से निपटता हूं। मैं पुराने स्टैक से नए को कोड भी लिखता हूं, और फिर नए से नए स्टैक तक। और मैं अपने इंटरफेस को अच्छा बनाने की कोशिश करता हूं। यहां यह कहने योग्य है कि एक अच्छा इंटरफ़ेस क्या है।

अच्छे इंटरफेस की अलग विशेषताएं हैं। सबसे पहले, यह सुविधाजनक है, दूसरे, यह सुंदर है, तीसरा, यह सस्ती है। लेकिन आज मैं जिन विशेषताओं के बारे में बात करना चाहता हूं उनमें से एक है गति। और गति अक्सर अपने काम की चिकनाई में ही प्रकट होती है। यहां तक ​​कि छोटे फ्रेज़ हमारे इंटरफेस के उपयोगकर्ता अनुभव को बहुत बदल सकते हैं।



चलिए आज मेरी बातचीत की योजना पर चलते हैं। सबसे पहले हम उस कार्य के बारे में बात करेंगे जो मैंने किया था: बाजार पर एक चित्र खोजना। आगे, मैं आपको बताता हूँ कि इस कार्यक्षमता को लागू करने के लिए मुझे किन समस्याओं का समाधान करना था। यहां हम थोड़ा याद करते हैं कि ब्राउज़र में आपकी स्क्रिप्ट कैसे काम करती है, और उन तकनीकों को देखें जिन्होंने मेरी मदद की। स्मॉल स्पॉइलर: ये वेब वर्कर्स और ऑफस्क्रीन कैन्वास हैं।

आइए कार्य पर वापस जाएं। कुछ महीने पहले, हमारे उत्पाद प्रबंधक, ल्यूबा, ​​ने मुझसे संपर्क किया। लाइबा बाजार पर उत्पाद चुनने की समस्याओं से निपटता है। अब हमारे पास माल खोजने के लिए कई विकल्प हैं। उनमें से एक खोज पट्टी में कुछ दर्ज करना है।



उदाहरण के लिए, "समारा में एक लाल आईफोन एक्स खरीदें।" और हमें कुछ मिलेगा। या हम कैटलॉग ट्री का उपयोग कर सकते हैं। इस कैटलॉग में हमारे पास श्रेणियां और उपश्रेणियाँ हैं।

लेकिन क्या होगा अगर मैं बाजार पर कुछ ढूंढना चाहता हूं, यह जानना नहीं है कि इसे क्या कहा जाता है, लेकिन या तो मेरे पास इस चीज की तस्वीर है, या मैं इसे किसी की पार्टी में देखता हूं?



मैं एक वास्तविक मामला बताऊंगा। मैं एक बार अपने दोस्तों के साथ एक कैफे में गया। हमने वहां नींबू पानी का आर्डर दिया, आप जानते हैं, ऐसे ही एक जग में, और इस जग में ऐसी अजीब बात थी। मैंने एक फोटो भी रख ली। यह इरादा था कि जब आप एक गिलास में नींबू पानी डालते हैं, तो बर्फ इसमें नहीं मिलती है। हमने सोचा था कि यह एक अच्छी बात थी, लेकिन इस बारे में हमारी अलग-अलग राय थी कि इस चीज को क्या कहा जाता है और सामान्य तौर पर इसका क्या मकसद था। इसलिए, हमने इसे Yandex.Pictures पर पाया।

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

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

पहला डेमो देखें

मैं प्रोडक्शन पर दिखाऊंगा। आइए सबसे पहले मैं वह चीज अपलोड करता हूं जिसकी हम तलाश कर रहे थे, और देखें कि क्या होता है।

हमें कुछ सामान मिले और विशेष रूप से यह बात। इस चीज को स्ट्रेनर कहा जाता है। कुछ और खोजने के लिए, मैंने कल एक सहकर्मी के डेस्क पर एक किताब खींची, आइए इसे देखें। यहाँ इस तरह की एक किताब है, शायद किसी ने इसे पढ़ा। इसे "परफेक्ट कोड" कहा जाता है। वह इसे किसी तरह भी पाता है, और किसी कारण से 18+ की सीमा के साथ। यह शायद थोड़ा अजीब है।

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



हम यह कैसे करेंगे? हमारे पास एक फाइल है। और हम किसी तरह इस फाइल को पढ़ेंगे। हम FileReader API का उपयोग करके पढ़ेंगे। मैं आपको संक्षेप में बताऊंगा कि यह क्या है।



यह एक ऐसा ब्राउज़र एपीआई है जो हमें डाउनलोड की गई फ़ाइल को पढ़ने और इसके साथ कुछ करने की अनुमति देता है। आप विभिन्न तरीकों से पढ़ सकते हैं, हम इसे अभी देखेंगे। यहां इसकी विशेषताएं हैं, और हमारे पास किसी प्रकार की वस्तु है जो परिवर्तन घटना द्वारा इनपुट से हमारे पास लौटी है। आइए इसे पढ़ने की कोशिश करते हैं।



कोड इस तरह दिखेगा। यहां अभी कुछ भी जटिल नहीं है। हमारे पास FileReader कंस्ट्रक्टर से बना एक रीडर ऑब्जेक्ट है, जिस पर हम लोड इवेंट के डेवलपर को लटकाते हैं। आगे हम इस फाइल को DataURL के रूप में पढ़ेंगे। DataURL - एक स्ट्रिंग जो बेस 64 के माध्यम से एन्कोड की गई फ़ाइल की सामग्री का प्रतिनिधित्व करती है। जैसे हम पढ़ते हैं, हमें इसे किसी तरह काटने की जरूरत है। सबसे पहले, यह सब एक तस्वीर में लोड करते हैं। हमारे पास एक टैग या आईएमजी तत्व है, और हम इसे वहीं लोड करते हैं।



कोड कुछ इस तरह दिखेगा। हम एक img तत्व बनाते हैं, लोड रीडर ईवेंट द्वारा हम अपनी लाइन को src विशेषता में लोड करते हैं और जब हमारी लाइन img में लोड हो जाती है तो हम सब कुछ आगे करेंगे।

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



कुछ इस तरह। एक और छोटा अस्वीकरण: यहां कोड बहुत सरल है, मैं सब कुछ निर्दिष्ट नहीं करता हूं। हमारे पास त्रुटि से निपटने और अन्य चीजें हैं, लेकिन इतना है कि सब कुछ स्लाइड पर फिट बैठता है और रिपोर्ट में स्पष्ट है, मैंने कुछ विवरणों को छोड़ दिया।

हमारे पास चित्र आकार हैं, हम बस उन्हें देखते हैं। हमारे लिए कुछ स्थिरांक की अनुमति है। यदि चित्रों का आकार हमारे स्थिरांक से अधिक है, तो हम उन्हें उनके नीचे ट्रिम कर देते हैं और हमारे कैनवास को इन समान आकारों में सेट करते हैं।

आगे हम इस कैनवस पर अपनी तस्वीर बनाएंगे।



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

इसके अलावा, इस कैनवस से, हम अपने DataURL एनकोडेड Base64 स्ट्रिंग को ठीक उसी तरह से लेंगे और इसे बूँद में बदल देंगे - एक विशेष ऑब्जेक्ट जो हमारे लिए सर्वर पर भेजने के लिए सुविधाजनक है। लगता तो सब है। सब कुछ काम करता है। चित्र को क्रॉप किया गया है, चित्र भेजा गया है, चित्र पहचाना गया है।

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

मेरे साथ ऐसा कभी नहीं हुआ, और मैंने इसे ठीक करने का फैसला किया। यह एक समस्या बन गई। यदि छवि बड़ी है, तो फसल, संपीड़न के साथ जोड़तोड़ के दौरान, हमें कुछ समय लगा, और इस छोटे से छोटे समय में, हमारा इंटरफ़ेस अप्रतिसादी था।

पहले तो मुझे लगा कि ऐसा क्यों हो रहा है। यहाँ यह याद रखने लायक है कि जावास्क्रिप्ट ब्राउज़र में कैसे काम करता है। मैं विवरण में नहीं जाऊंगा, यह एक बड़ी रिपोर्ट का विषय है। बस कुछ बिंदु याद हैं।



हमारे पास जावास्क्रिप्ट एक एकल धागे में चल रहा है, चलो इसे मुख्य कहते हैं। और हमारे पास ब्राउज़र में इवेंट लूप के रूप में ऐसी चीज है। यहां हम तुरंत कहते हैं कि यह एक मॉडल है। कुछ ब्राउज़रों में, ईवेंट लूप को अलग तरीके से व्यवस्थित किया जाता है, लेकिन जैसा कि नाम से पता चलता है, सामान्य तौर पर यह एक लूप है। यह कतार में कुछ कार्यों को क्रम से संसाधित करता है।

एक अप्रिय क्षण: जब तक वह एक कार्य को संसाधित नहीं करता, तब तक वह अगले पर नहीं जाएगा। मैं जो डेमो देखूंगा, वह वह दिखाएगा। वह एक क्लासिक है।

दूसरा डेमो देखें

मेरे पास एक GIF छवि और सीएसएस एनीमेशन अलग-अलग तरीकों से किया गया है: एक ट्रांसलेक्स का उपयोग करके, दूसरा स्थिति का उपयोग करते हुए: सापेक्ष छोड़ दिया, तीसरा जावास्क्रिप्ट का उपयोग करके, अर्थात् requestAnimationFrame। यह वह जगह है जहाँ हाथी कताई है। मैं क्या करूंगा?

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

क्या होगा? आपने तुरंत देखा कि हेजहोग ने कताई बंद कर दी, और निचली बिल्ली, जो ट्रांसलेक्स का उपयोग करके एनिमेटेड है, ने भी सवारी करना बंद कर दिया। लेकिन चलो एक और ब्राउज़र में एक ही डेमो देखें, उदाहरण के लिए सफारी। GIF बिल्ली ने दौड़ना बंद कर दिया।

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

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

तीसरा डेमो देखें

मेरे पास यहां एक शक्तिशाली मैकबुक है, और सब कुछ अधिक ठोस दिखने के लिए, हम प्रोसेसर को छह गुना धीमा कर देंगे। यह आपको DevTools करने की अनुमति देता है। हमारी फोटो अपलोड करें। परफेक्ट कोड हमें फिर से मदद करेगा। जैसा कि हम देखते हैं, मुख्य धागे को अवरुद्ध करते समय भी यही होता है।

आइए फिर अपने काम पर लौटते हैं और सोचते हैं कि हम इससे कैसे निपटेंगे।



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

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



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

हमारे पास एक टूल है जो आपको वर्कर्स को कुछ ट्रांसफर करने और वर्कर्स से कुछ वापस करने की अनुमति देता है। एक उदाहरण देखते हैं।



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



समर्थन क्या है? यहां सब कुछ अच्छा है। श्रमिक एक प्रसिद्ध उपकरण है, एक नया नहीं है, लेकिन मेरे कई दोस्त सोचते हैं कि वे हमेशा समर्थित नहीं हैं। ऐसा नहीं है।



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



समर्थन के साथ क्या है? जैसा कि आप देख सकते हैं, बहुत लाल है। OffscreenCanvas आमतौर पर केवल क्रोम में समर्थित है। फ़ायरफ़ॉक्स के साथ एक विकल्प भी है, लेकिन अभी तक एक ध्वज है, और कैनवस केवल WebGL संदर्भ के साथ काम करता है। यहाँ आप पूछ सकते हैं - मैं ऑफ़स्क्रीन कैन्वास जैसी ऐसी मस्त चीज़ की बात क्यों कर रहा हूँ, जो कहीं काम नहीं करती?



एक छोटा सा विषयांतर। बाजार में हमारे पास ब्राउज़र स्तर के कुछ स्तर हैं। और हमारे पास दो मात्राएँ हैं। एक मान ब्राउज़र को चिह्नित करता है, जिसे हम बिल्कुल भी समर्थन नहीं करते हैं। यह ब्राउज़र की लोकप्रियता का लगभग आधा प्रतिशत है।

और एक दूसरी मात्रा है। इसमें वे ब्राउज़र शामिल हैं जिनका हम समर्थन करते हैं, लेकिन केवल महत्वपूर्ण कार्यक्षमता। यहां, वर्कर्स के बिना, सभी खोज कार्यक्षमता काम करती है, लेकिन छोटे फ्रिज़ के साथ। मुझे लगता है कि यह ठीक है, और हमारी टीम का मानना ​​है कि यह ठीक है। आइए देखें कि हम इसे कैसे लागू करेंगे।



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



हमारे कार्यकर्ता के लिए कोड देखें। सबसे पहले, हम उस चौड़ाई और ऊँचाई के साथ एक ऑफ़स्क्रीन कैन्वास का उदाहरण बनाते हैं जिसकी हमें आवश्यकता होती है।

इसके अलावा, जैसा कि मैंने कहा, छवि तत्व वर्कर्स संदर्भ में हमारे लिए उपलब्ध नहीं है, इसलिए यहां हम createImageBitmap विधि का उपयोग करते हैं, जो हमें डेटा संरचना प्रदान करेगा जो हमारी तस्वीर की विशेषता है।

दिलचस्प से: हम यहाँ स्व। जो लोग वेब वर्कर्स से परिचित नहीं हैं, यह बात निष्पादन के संदर्भ में इंगित करती है। यह हमारे लिए यहाँ कोई बात नहीं है, खिड़की या यह, हम स्वयं का उपयोग करते हैं। यह विधि अतुल्यकालिक है, मैंने कॉम्पैक्टनेस और सुविधा के लिए यहां इंतजार किया है, क्यों नहीं?

अगला, हमें वही छवि मिलती है और वही काम करते हैं जो हमने पहले किया था। कैनवास पर ड्रा करें और वापस लौटें।

सरल से। हम DataURL लेते थे और सब कुछ बूँद में परिवर्तित करते थे। लेकिन यहाँ ConvertToBlob मेथड तुरंत हमारे लिए उपलब्ध है। मैंने पहले इसका उपयोग क्यों नहीं किया? क्योंकि समर्थन बदतर था। लेकिन जब से हम यहाँ सभी तरह से गए और ऑफ़स्क्रीन कैन्स का उपयोग करते हैं, क्या हमें कन्वर्टटब्लो का उपयोग करने से रोकता है?



हम इस बूँद को मूल रूप से एक धारा में लौटा देंगे, जहाँ से हम इसे सर्वर पर भेजेंगे। या, जैसा कि डेमो में है, इसे ड्रा करें।

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

आइए अपने डेमो पर वापस जाएं।

चौथा डेमो देखें

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

लेकिन क्या इस फैसले में सुधार किया जा सकता है?



यहाँ, वैसे, प्रोफाइलर। यहां हम पांच सेकंड के लिए विशाल माइक्रोट्रॉक्स नहीं देखते हैं जो हमने पहले देखा था।

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

मैं "पसंद" क्यों कहता हूं? जब हम इस डेटा को वर्कर्स को ट्रांसफर करते हैं, तो हम उन पर मुख्य धारा में नियंत्रण खो देते हैं - हम उनके साथ किसी भी तरह से बातचीत नहीं कर सकते हैं। यहां एक दूसरी सीमा है। हम सभी डेटा प्रकारों को वेब वर्कर्स में स्थानांतरित नहीं कर सकते हैं। हम इसे एक तार के साथ नहीं कर सकते, हम इसे अलग तरीके से करेंगे।



कोड को देखते हैं। सबसे पहले, हम डेटा को थोड़ा अलग तरीके से प्रसारित करते हैं। यहाँ हमारा पोस्टमैसेज है। आप देखते हैं, loadEvent.target.result के साथ इस तरह की एक सरणी है। इस तरह का एक इंटरफेस हमें अपने डेटा को हस्तांतरणीय वस्तुओं के रूप में स्थानांतरित करने की अनुमति देता है, उन पर नियंत्रण खो देता है।

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



वापस हमारे ImageWorkers के लिए। यहां यह और अधिक दिलचस्प हो गया। सबसे पहले, हम अपना बफर लेते हैं और Uint8ClampedArray के रूप में ऐसा भयानक काम करते हैं। यह एक टाइप्ड ऐरे है। जैसा कि नाम से पता चलता है, इसमें डेटा साइन नंबर हैं, यानी शून्य से 255 तक की संख्या जो हमारी छवि के पिक्सेल का प्रतिनिधित्व करेगी।

तीसरा तर्क, हम इस तरह की एक अजीब चीज से गुजरते हैं, जैसे कि चौड़ाई, ऊंचाई से गुणा, चार से गुणा। आखिर चार क्यों? बिल्कुल सही, RGBA। प्रति रंग तीन मान और एक अल्फा चैनल प्रति है।

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

चलिए निष्कर्ष पर चलते हैं। आज मैंने आपको एक काम के बारे में बताया जो मैंने बहुत पहले नहीं किया था। मैंने इसमें क्या नोटिस किया?



इंटरफ़ेस की चिकनाई बहुत महत्वपूर्ण है। जब उपयोगकर्ता थोड़ा सा पिछड़ जाता है, तो थोड़ा जमता है, बटन दबाया नहीं जाता है, इससे UX की मजबूत गिरावट हो सकती है। ब्राउजर अलग तरीके से काम करते हैं। हमने Safari और Yandex.Browser के साथ एक गोलाकार उदाहरण देखा। हम देखते हैं कि यदि आपने एक ब्राउज़र में चिकनाई के लिए अपने इंटरफ़ेस की जाँच की है, तो आपको दूसरों को देखना चाहिए।

यदि वे लंबे समय तक जारी रहें तो आपको ब्लॉकिंग स्क्रिप्ट के साथ कुछ करने की आवश्यकता है। मेरे मामले में, मैंने इसे वेब वर्कर्स पर रखा। लेकिन शायद अन्य दृष्टिकोण हैं, आप किसी तरह उन्हें छोटे लोगों में विभाजित कर सकते हैं, यहां आपको सोचना होगा। , Web Workers, .

? . . . , 200 , .

Web Workers . , , .

:

• How Browsers Work: Behind the scenes of modern web browsers
• WebGL/Three.js OffscreenCanvas -
• OffscreenCanvas — Speed up Your Canvas Operations with a Web Worker

.