छवियाँ और तस्वीरें · छवि कन्वर्टर और कंप्रेसर
वेब वर्कर्स और ऑफस्क्रीनकैनवास कैसे छवि रूपांतरण को प्रतिक्रियाशील बनाए रखते हैं
· यह काम किस प्रकार करता है
ब्राउज़र-प्रसंस्करण कैनवास वेब-कार्यकर्ता
एक बड़ी छवि को एन्कोड करने में वास्तविक CPU समय लगता है, और इसे मुख्य थ्रेड पर करने से पेज फ़्रीज़ हो जाएगा। यह पोस्ट बताती है कि वेब वर्कर्स और ऑफस्क्रीन कैनवस उस काम को UI थ्रेड से कैसे हटाते हैं और उस आर्किटेक्चर का गोपनीयता और सीमाओं के लिए क्या मतलब है।
वह टैब जो फ़्रीज़ हो जाएगा - क्या होता है जब थ्रेड पर एक भारी एनकोड चलता है जो पेज भी खींचता है
किसी बैच को डिकोड करने, दोबारा बनाने और एन्कोड करने के लिए CPU कार्य और डिकोडेड पिक्सेल मेमोरी की आवश्यकता होती है। यदि प्रत्येक ऑपरेशन एक ही इवेंट लूप में चलता है जो नियंत्रण, प्रगति अपडेट और पेंटिंग को संभालता है, तो इंटरफ़ेस फ़ाइल समाप्त होने तक प्रतिक्रिया देना बंद कर सकता है। इसलिए केंद्रित पैनल एक ऐसे विज़िटर के लिए स्टार्टअप लागत का भुगतान करने के बजाय आलसी तरीके से एक मॉड्यूल कार्यकर्ता बनाता है जब पहला रूपांतरण शुरू होता है जो कभी परिवर्तित नहीं होता है।
जवाबदेही एक वास्तुशिल्प लक्ष्य है, वादा किया गया समय संख्या नहीं। डिवाइस लोड, छवि आयाम, ब्राउज़र कार्यान्वयन और बैच संरचना अभी भी यह निर्धारित करती है कि पेज कितना तरल लगता है। महत्वपूर्ण टूलों पर प्रतिनिधि फ़ाइलों से सत्यापित करें; सार्वभौमिक रूपांतरण अवधि प्रकाशित न करें या यह दावा न करें कि कोई कर्मचारी महंगा काम मुफ़्त में करता है।
मुख्य थ्रेड और यह कीमती क्यों है - लेआउट, इनपुट और स्क्रिप्ट के लिए एक थ्रेड, और कितने लंबे कार्य इन तीनों को रोकते हैं
मुख्य थ्रेड के पास DOM और विज़िटर द्वारा स्पर्श किए जाने वाले नियंत्रण हैं। ToolAcre इसका उपयोग चयनों को मान्य करने, स्रोत आयामों के लिए संक्षेप में डीकोड करने, सेटिंग्स बनाने, स्थिति प्रस्तुत करने और परिणाम डाउनलोड करने के लिए करता है। बैच का बार-बार डिकोड, कैनवास ड्रा और एनकोड लूप `image.worker.js` के पीछे रहता है, जिससे फाइलों के बीच प्रगति संदेशों को वापस आने की अनुमति मिलती है।
एक कार्यकर्ता प्रत्येक मुख्य-थ्रेड कार्य को समाप्त नहीं करता है। प्रत्येक चयनित फ़ाइल को शुरू में पैनल में जांचा और मापा जाता है, और परिणाम बाद में पूर्वावलोकन और डाउनलोड क्रियाओं में बदल दिए जाते हैं। डिज़ाइन ब्राउज़र APआई और प्रस्तुति को उस संदर्भ में रखते हुए बार-बार भारी पाइपलाइन को इंटरफ़ेस स्वामित्व से दूर ले जाता है जहां प्रत्येक संबंधित है।
वेब वर्कर्स: एक दूसरा थ्रेड जिसमें कोई DOM नहीं है - एक कार्यकर्ता क्या छू सकता है और क्या नहीं, और फ़ाइलें उस तक कैसे पहुंचती हैं
कार्यकर्ता के पास कोई सामान्य DOM पहुंच नहीं है। यह क्रमबद्ध आइटम विवरण, सेटिंग्स और प्रत्येक फ़ाइल का ArrayBuffer प्राप्त करता है। प्रत्येक आइटम के लिए यह इंटरफ़ेस द्वारा उपयोग की जाने वाली समान शुद्ध रूपांतरण योजना बनाता है, एक ब्लॉब बनाता है, डिकोड-ड्रा-एनकोड निष्पादित करता है, परिणामी ब्लॉब को बाइट्स में परिवर्तित करता है और बाकी बैच को छोड़े बिना प्रति-फ़ाइल विफलता रिकॉर्ड करता है।
वह अलगाव त्रुटि प्रबंधन को भी आकार देता है। एक भ्रष्ट फ़ाइल विफलता सरणी में प्रवेश कर सकती है जबकि बाद के आइटम जारी रहते हैं। कार्यकर्ता आइटमों के बीच रद्दीकरण की जाँच करता है और वर्तमान फ़ाइल नाम के साथ प्रगति की रिपोर्ट करता है। UI बिना किसी स्पष्टीकरण के अक्षम बटन छोड़ने के बजाय कम या छोटी छवियों को आज़माने की सलाह में एक कार्यकर्ता टाइमआउट का अनुवाद करता है।
ऑफस्क्रीनकैनवस: दृश्यमान तत्व के बिना ड्राइंग और एन्कोडिंग - कैसे एक कार्यकर्ता को अपना स्वयं का कैनवास मिलता है और ConvertToBlob को कॉल करता है
कंस्ट्रक्टर मौजूद होने पर `createCanvas` `OffscreenCanvas` को प्राथमिकता देता है। उस पथ के अंदर, `encodeCanvas` लक्ष्य MIME प्रकार और वैकल्पिक गुणवत्ता के साथ `convertToBlob` को कॉल करता है। वही रेंडरर एक HTML कैनवास भी बना सकता है और कॉलबैक-आधारित `toBlob` का उपयोग कर सकता है, उन संदर्भों के लिए फ़ॉलबैक संरक्षित कर सकता है जहां ऑफ़स्क्रीनकैनवास अनुपलब्ध है।
फ़ॉलबैक का सटीक वर्णन करना महत्वपूर्ण है। ऑफस्क्रीनकैनवास को प्राथमिकता दी जाती है, यह स्रोत में एकमात्र संभावित कैनवास नहीं है। इसी तरह, ब्राउज़र WebP एन्कोडिंग को डिकोड समर्थन से ग्रहण करने के बजाय अंतिम एन्कोड परिणाम द्वारा जांचा जाता है। एप्लिकेशन एक त्रुटि का वादा करता है जब अनुरोधित एनकोडर प्रारूप का उत्पादन नहीं कर सकता है, किसी अन्य MIME प्रकार के साथ मौन प्रतिस्थापन नहीं।
ट्रांसफ़रेबल्स और प्रतिलिपियाँ - दसियों मेगाबाइट की नकल किए बिना एक इमेज बिटमैप या ऐरेबफ़र को एक कार्यकर्ता तक ले जाना
कार्यकर्ता को कॉल करने से पहले, पैनल प्रत्येक फ़ाइल को एक ArrayBuffer में पढ़ता है और उन बफ़र्स को स्थानांतरण सूची में शामिल करता है। प्रत्येक इनपुट बफ़र की क्लोनिंग के बजाय स्वामित्व कार्यकर्ता के पास चला जाता है। एन्कोडिंग के बाद, कार्यकर्ता ब्लॉब बाइट्स को Uint8Array में लपेटता है और प्रतिक्रिया पथ पर स्थानांतरण के लिए उस बैकिंग बफर को पंजीकृत करता है।
इससे टाली जा सकने वाली नकल कम हो जाती है, लेकिन डिकोड की गई छवियां और कैनवस अभी भी मेमोरी पर कब्जा कर लेते हैं। `executePlan` प्रत्येक ImageBitmap को `finally` ब्लॉक में बंद कर देता है ताकि इसके डिकोड किए गए पिक्सेल तुरंत जारी किए जा सकें। हस्तांतरणीय, स्पष्ट बिटमैप क्लीनअप और एक पिक्सेल-बजट गार्ड दबाव के विभिन्न स्रोतों को संबोधित करते हैं; कोई भी असीमित बैच दावे को अधिकृत नहीं करता है।
यह आर्किटेक्चर गोपनीयता की कहानी भी क्यों है - पूरी पाइपलाइन आपके टैब में रहती है, और नेटवर्क पैनल चुप रहता है
रूपांतरण कोड फ़ाइल-अपलोड अनुरोध के बिना ब्राउज़र छवि और कैनवास APआई को कॉल करता है। एक यूनिट परीक्षण गार्ड नेटवर्क एक्सेस निषिद्ध के साथ प्रत्येक समर्थित इनपुट-आउटपुट संयोजन की योजना बना रहा है। कॉन्फ़िगरेशन का गोपनीयता कथन तदनुसार संकीर्ण है: टूल कोड फ़ाइल, चिपकाए गए टेक्स्ट या जेनरेट किए गए आउटपुट को ले जाने का कोई अनुरोध नहीं करता है।
पेज अभी भी साइट संपत्तियों को लोड कर सकता है और बाहरी स्क्रिप्ट का खुलासा कर सकता है, इसलिए "साइलेंट नेटवर्क पैनल" को व्याख्या की आवश्यकता है। लोड के बाद DevTools साफ़ करें और नए अनुरोधों में एक विशिष्ट हानिरहित परीक्षण फ़ाइल नाम या पेलोड बाइट्स देखें। स्रोत समीक्षा और रनटाइम अवलोकन मिलकर रूपांतरण पथ के बारे में दावे का समर्थन करते हैं; न ही संपूर्ण ब्राउज़र वातावरण को ऑफ़लाइन सैंडबॉक्स में बदलता है।
सीमाएँ कहाँ से आती हैं - मेमोरी और कैनवास कैप अपलोड कैप की जगह लेते हैं, इसलिए सीलिंग आपका टूल है
स्थानीय प्रसंस्करण अपलोड सीमा को इनपुट सत्यापन, डिकोडेड पिक्सल, कैनवास आवंटन और उपलब्ध डिवाइस मेमोरी की बाधाओं से बदल देता है। प्रत्येक इनपुट फ़ाइल को फ़ोकस पैनल द्वारा 40 MB पर कैप किया गया है। नियोजित आउटपुट ज्यामिति को डिवाइस पिक्सेल बजट में फिट किया जाता है, और जब गार्ड अनुरोध बदलता है तो उपयोगकर्ता को कम आयामों का नामकरण करते हुए एक चेतावनी प्राप्त होती है।
कॉन्फ़िगरेशन में कोई निश्चित बैच गणना नहीं है। बीस छोटे ग्राफ़िक्स और बीस उच्च-रिज़ॉल्यूशन फ़ोटो समान आवंटन नहीं हैं। एक फ़ोन डेस्कटॉप से पहले विफल हो सकता है। सच्ची परिचालन सलाह यह है कि टाइमआउट या मेमोरी विफलता के बाद कम या छोटी फ़ाइलों को संसाधित करें, न कि असमर्थित अधिकतम गिनती या मेगापिक्सेल सीमा प्रकाशित करें।
टेकअवे: भारी सामान उठाना, शांत इंटरफ़ेस - छवि कन्वर्टर और कंप्रेसर आपके डिवाइस पर मुख्य थ्रेड से रूपांतरण कैसे करता है
इंटरफ़ेस शांत रहता है क्योंकि एक कार्यकर्ता में बार-बार पाइपलाइन चलती है, इसका कैनवास ऑफस्क्रीन हो सकता है और बड़े बाइट बफ़र्स हस्तांतरणीय के रूप में यात्रा करते हैं। वे ठोस स्रोत गुण हैं, विपणन आशुलिपि नहीं। वे बताते हैं कि काम कहां होता है और प्रगति कैसे वापस आती है, बिना यह दावा किए कि प्रत्येक ब्राउज़र इसे समान रूप से शेड्यूल करता है।
आपके वर्कफ़्लो द्वारा वास्तव में उपयोग की जाने वाली छवियों के साथ आर्किटेक्चर का परीक्षण करें। रूपांतरण के दौरान नियंत्रण देखें, प्रति-फ़ाइल प्रगति की पुष्टि करें, विफलताओं का निरीक्षण करें और परीक्षण मार्कर के लिए नेटवर्क पैनल की जांच करें। ToolAcre का डिज़ाइन आपको अवलोकन योग्य साक्ष्य देता है: एक अपारदर्शी दूरस्थ कार्य के बजाय एक वास्तविक कार्यकर्ता मॉड्यूल, मापा आउटपुट और स्थानीय डाउनलोड बाइट्स।