🙍🏾 🎙️ 🌝 ब्राउज़र से सर्वर में स्थानांतरण के दौरान डेटा संपीड़न 🖕 🔐 👨‍🏭

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

लेख में मैं दिखाऊंगा कि कैसे हमने एक नई परियोजना में इस समस्या को हल किया, संपीड़न और आधुनिक जावास्क्रिप्ट विशेषताओं का उपयोग करके।

कार्य विवरण

हैबरूसर ऐनेटो ने मुझसे शिकायत की कि Yandex.Direct बुरी तरह से आपस में कीवर्ड्स के इंटरसेक्शन को हैंडल करता है। इस बीच, कार्य मैन्युअल रूप से प्रासंगिक और व्यावहारिक रूप से अस्वीकार्य है। इसलिए हमने थोड़ी सेवा की जो इस समस्या को हल करती है।

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

विकास के दौरान, हमें दो समस्याएं हुईं:

धीरे-धीरे कनेक्ट करते समय, डेटा बहुत लंबे समय तक स्थानांतरित किया जाता है।
अक्सर डेटा नगनेक्स / अपाचे / php / etc सीमाओं के कारण एक भी पोस्ट अनुरोध में फिट नहीं होता है।

निर्णय

कई समाधान हैं। हमारे मामले में, मैंने आधुनिक मानकों के आधार पर एक संस्करण तैयार किया: टाइपेड एरे , वर्कर्स , एक्सएचआर 2 । संक्षेप में: हम डेटा को सेक करते हैं और इसे बाइनरी रूप में सर्वर को भेजते हैं। इन सरल क्रियाओं ने हमें प्रेषित डेटा के आकार को 2 गुना से अधिक कम करने की अनुमति दी।

आइए एल्गोरिथ्म कदम पर विचार करें।

चरण 0: स्रोत डेटा

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

डाउनलोड कोड और डेटा सबमिशन फंक्शन

<script> function setDemoData(data) { window.initialData = data; } function send(data) { var http = new XMLHttpRequest(); http.open('POST', window.location.href, true); http.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); http.onreadystatechange = function() { if (http.readyState == 4) { if (http.status === 200) { // xhr success } else { // xhr error; } } }; http.send(data); } </script> <script src="http://nodge.ru/habr/demoData.js"></script>

आइए डेटा को भेजने का प्रयास करें और डीबगर को देखें:

 var data = JSON.stringify(initialData); send(data);

एक सरल स्थानांतरण के साथ, अनुरोध मात्रा 9402 Kb है। बहुत, हम काट देंगे।

चरण 1: डेटा संपीड़न

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

हमने सभी तीन विकल्पों का उपयोग करने की कोशिश की, लेकिन PHP के साथ हम केवल LZW दोस्त बनाने में कामयाब रहे। यह एक बहुत ही सरल एल्गोरिथ्म है। उदाहरण में, हम इस कार्यान्वयन का उपयोग करेंगे:

LZW संपीड़न समारोह

 var LZW = { compress: function(uncompressed) { "use strict"; var i, l, dictionary = {}, w = '', k, wk, result = [], dictSize = 256; // initial dictionary for (i = 0; i < dictSize; i++) { dictionary[String.fromCharCode(i)] = i; } for (i = 0, l = uncompressed.length; i < l; i++) { k = uncompressed.charAt(i); wk = w + k; if (dictionary.hasOwnProperty(wk)) { w = wk; } else { result.push(dictionary[w]); dictionary[wk] = dictSize++; w = k; } } if (w !== '') { result.push(dictionary[w]); } result.dictionarySize = dictSize; return result; } };

चूंकि LZW को ASCII के साथ काम करने के लिए डिज़ाइन किया गया है, इसलिए पहले से ही यूनिकोड वर्णों से बच जाते हैं। यहाँ पुस्तकालय लिया जाता है ।
इसलिए, हम डेटा को संपीड़ित करते हैं और इसे सर्वर पर भेजते हैं:

 var data = JSON.stringify(initialData); data = stringEscape(data); data = LZW.compress(data); send(data.join('|'));

अनुरोध मात्रा - 6079 Kb (संपीड़न 65%), 3323 Kb बचाया। अधिक परिष्कृत संपीड़न एल्गोरिथ्म बेहतर परिणाम दिखाएगा, लेकिन हम अगले चरण पर जाते हैं।

चरण 2: बाइनरी डेटा में कनवर्ट करें

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

 //  16-  32-       var type = data.dictionarySize > 65535 ? 'Uint32Array' : 'Uint16Array', count = data.length, buffer = new ArrayBuffer((count+2) * window[type].BYTES_PER_ELEMENT), //        bufferBase = new Uint8Array(buffer, 0, 1), //          LZW bufferDictSize = new window[type](buffer, window[type].BYTES_PER_ELEMENT, 1), bufferData = new window[type](buffer, window[type].BYTES_PER_ELEMENT*2, count); bufferBase[0] = type === 'Uint32Array' ? 32 : 16; //    bufferDictSize[0] = data.dictionarySize; //    LZW bufferData.set(data); //   data = new Blob([buffer]); //  ArrayBuffer  Blob    XHR send(data);

अनुरोध मात्रा - 3686 Kb (संपीड़न 39%), 6079 Kb बचाया। अब अनुरोध का आकार आधा से अधिक हो गया है, दोनों वर्णित समस्याओं का समाधान हो गया है।

चरण 3: सर्वर पर प्रसंस्करण।

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

PHP प्रसंस्करण उदाहरण

 <?php $data = readBinaryData(file_get_contents('php://input')); $data = lzw_decompress($data); $data = unicode_decode($data); $data = json_decode($data, true); function readBinaryData($buffer) { $bufferType = unpack('C', $buffer); //   -   if ($bufferType[1] === 16) { $dataSize = 2; $unpackModifier = 'v'; } else { $dataSize = 4; $unpackModifier = 'V'; } $buffer = substr($buffer, $dataSize); // remove type from buffer $data = new SplFixedArray(strlen($buffer)/$dataSize); $stepCount = 2500; //    2500  for ($i=0, $l=$data->getSize(); $i<$l; $i+=$stepCount) { if ($i + $stepCount < $l) { $bytesCount = $stepCount * $dataSize; $currentBuffer = substr($buffer, 0, $bytesCount); $buffer = substr($buffer, $bytesCount); } else { $currentBuffer = $buffer; $buffer = ''; } $dataPart = unpack($unpackModifier.'*', $currentBuffer); $p = $i; foreach ($dataPart as $item) { $data[$p] = $item; $p++; } } return $data; } function lzw_decompress($compressed) { $dictSize = 256; //   -   $dictionary = new SplFixedArray($compressed[0]); for ($i = 0; $i < $dictSize; $i++) { $dictionary[$i] = chr($i); } $i = 1; $w = chr($compressed[$i++]); $result = $w; for ($l = count($compressed); $i < $l; $i++) { $entry = ''; $k = $compressed[$i]; if (isset($dictionary[$k])) { $entry = $dictionary[$k]; } else { if ($k === $dictSize) { $entry = $w . $w[0]; } else { return null; } } $result .= $entry; $dictionary[$dictSize++] = $w .$entry[0]; $w = $entry; } return $result; } function replace_unicode_escape_sequence($match) { return mb_convert_encoding(pack('H*', $match[1]), 'UTF-8', 'UCS-2BE'); } function unicode_decode($str) { return preg_replace_callback('/\\\\u([0-9a-f]{4})/i', 'replace_unicode_escape_sequence', $str); }

अन्य भाषाओं के लिए, मुझे लगता है, सब कुछ उतना ही सरल है।

चरण 4: श्रमिक

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

चरण 5: ब्राउज़र समर्थन

स्पष्ट रूप से उपरोक्त जावास्क्रिप्ट कोड IE6 = में काम नहीं करेगा)
काम के लिए, हमें टाइप एरियर , एक्सएचआर 2 और वर्कर्स की आवश्यकता है ।
समर्थित ब्राउज़रों की सूची: IE10 +, फ़ायरफ़ॉक्स 21+, क्रोम 26+, सफारी 5.1+, ओपेरा 15+, आईओएस 5+, एंड्रॉइड 4.0+ (वर्कर्स के बिना)।

सत्यापन के लिए, आप मॉडर्निज़्र, या इस कोड जैसी किसी चीज़ का उपयोग कर सकते हैं:

आवश्यक मानकों के लिए समर्थन को परिभाषित करना

 var compressionSupported = (function() { var check = [ 'Worker', 'Uint16Array', 'Uint32Array', 'ArrayBuffer', // Typed Arrays 'Blob', 'FormData' // xhr2 ]; var supported = true; for (var i = 0, l = check.length; i<l; i++) { if (!(check[i] in window)) { supported = false; break; } } return supported; })();

उदाहरण

लेख का कोड JS Bin: पृष्ठ , कार्यकर्ता पर प्रकाशित किया गया है। पेज खोलें, डेवलपर टूल खोलें और तीन पोस्ट अनुरोधों के आकार को देखें।

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

निष्कर्ष

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

सारांश:

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

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

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

अद्यतन 2:
यदि आप एसएसएल का उपयोग कर रहे हैं या योजना बना रहे हैं, तो इस लेख को पढ़ें। SSL पहले से ही अनुरोधों का दो-तरफ़ा संपीड़न प्रदान करता है।

अद्यतन 3:
यूनिकोड वर्णों से बचने के साथ प्रतिस्थापित64। यह बहुत अधिक कुशल निकला। उपभोक्ता , seriyPS और TolTol के लिए धन्यवाद।

ब्राउज़र से सर्वर में स्थानांतरण के दौरान डेटा संपीड़न