CloudFlare का रॉकेट लोडर वास्तव में कैसे काम करता है (और एक डेवलपर संगतता कैसे सुनिश्चित कर सकता है)?


31

CloudFlare में रॉकेट-लोडर (फ्री और पेड अकाउंट दोनों) नामक एक ग्राउंड-ब्रेकिंग तकनीक है । लेकिन यह वास्तव में कैसे काम करता है?

वे एक है जोड़ी के पृष्ठों है कि प्रौद्योगिकी का वर्णन है, लेकिन नहीं तकनीकी जानकारी का एक बहुत। एक मुख्य विशेषता यह है कि यह गैर-अवरुद्ध फैशन (अतुल्यकालिक) में सभी जावास्क्रिप्ट लोड करता है, जो काफी अविश्वसनीय उपलब्धि है! इसका मतलब है कि HTML / CSS को स्क्रिप्ट्स को लोड करने और चलाने के लिए इंतजार किए बिना प्रदान किया जा सकता है।

CloudFlare रॉकेट लोडर आरेख

वो कैसे संभव है?

निश्चित रूप से यह केवल <script>उपयोग करने के लिए सभी टैग को बदल नहीं सकता है async="true"या defer="true"क्योंकि यह कई चीजों को तोड़ देगा ...

  1. लिपियों को अभी भी सही क्रम में लोड करने की आवश्यकता है (उदाहरण के लिए, आप jQuery प्लगइन्स लोड नहीं कर सकते हैं जब तक कि jQuery लाइब्रेरी लोड न हो।)
  2. document.write()इन लिपियों में कॉल को कार्य करने की आवश्यकता होती है ( जाहिर है कि ये विशिष्ट async लिपियों में कुछ नहीं करते हैं )।
  3. DOMContentLoaded घटना के बारे में क्या? यदि इसके बाद कुछ स्क्रिप्ट लोड हो जाती हैं, तो क्या उनके इवेंट-हैंडलर अनियंत्रित हो जाते हैं?

और एक डेवलपर के रूप में, क्या मेरी साइट / स्क्रिप्ट / प्लगइन्स को रॉकेट लोडर के साथ संगत बनाए रखने के लिए मुझे कुछ और जानना चाहिए?

जवाबों:


26

CloudFlare रॉकेट लोडर का इस तरह वर्णन करता है ...

रॉकेट लोडर एक सामान्य-उद्देश्य वाला एसिंक्रोनस जावास्क्रिप्ट लोडर है जो हल्के आभासी ब्राउज़र से जुड़ा होता है जो कि विंडो.ऑन लोड के बाद किसी भी जावास्क्रिप्ट कोड को सुरक्षित रूप से चला सकता है।

रॉकेट लोडर चीजों का एक गुच्छा करता है:

  1. यह सुनिश्चित करता है कि आपके पृष्ठ की सभी स्क्रिप्ट लोड होने से आपके पृष्ठ की सामग्री को अवरुद्ध नहीं करेंगी;
  2. अपने पृष्ठ की सभी स्क्रिप्ट्स को लोड करता है, जिसमें तृतीय पक्ष स्क्रिप्ट शामिल हैं, अतुल्यकालिक रूप से;
  3. एक ही अनुरोध में सभी स्क्रिप्ट अनुरोधों को बंडल करता है, जिस पर कई प्रतिक्रियाओं को स्ट्रीम किया जा सकता है;
  4. अधिकांश ब्राउज़रों पर लोकलस्टोरेज का उपयोग करता है और लगभग सभी स्मार्ट फोन स्क्रिप्ट को स्टोर करने के लिए और अधिक बुद्धिमानी से करता है ताकि जब तक वे आवश्यक न हों, तब तक रिफ्लेक्ट न हो।

तो यह बहुत अच्छा है, लेकिन यह इसे कैसे प्राप्त करता है?

मैंने अपनी साइट पर CloudFlare + Rocket Loader चलाने से जो कुछ पढ़ा और खोजा है, वह लगभग इसी तरह काम करता है ...

  1. क्लाउड वेब सर्वर से HTML पेज का अनुरोध करने पर, इसे मूल वेब होस्ट से लोड करने के बाद, यह सभी टैग को फिर से लिखता है <script type="text/rocketscript">

  2. ब्राउज़र स्वाभाविक रूप से स्क्रिप्ट टैग को अनदेखा कर देते हैं क्योंकि वे "टेक्स्ट / रॉकेटस्क्रिप्ट" प्रारूप को नहीं समझते हैं।

  3. CloudFlare cloudflare.min.jsउस पृष्ठ पर एक अतिरिक्त स्क्रिप्ट भी इंजेक्ट करता है जो जादू करता है ( यहाँ स्वरूपित संस्करण देखें )। यह केवल ब्राउज़र द्वारा शुरू की गई स्क्रिप्ट है (एसिंक्रोनस रूप से)।

  4. यह स्क्रिप्ट किसी भी स्क्रिप्ट के लिए पेज को "टेक्स्ट / रॉकेटस्क्रिप्ट" टाइप करती है।

  5. यह तब जांचता है कि क्या इनमें से कोई स्क्रिप्ट पहले से ही ब्राउज़र के स्थानीय भंडारण में मौजूद है। यदि नहीं, तो यह CloudFlare CDN से उनके लिए एक AJAX अनुरोध करता है (तार्किक बंडलों में संयुक्त)। मुझे पूरा यकीन नहीं है कि यह कैसे काम करता है कि कैसे स्क्रिप्ट को एक साथ समूहित किया जाए।

  6. सीडीएन सर्वर स्क्रिप्ट को इकट्ठा करते हैं (जो कई अलग-अलग सर्वरों से आ सकते हैं: Google, ट्विटर, फेसबुक, अन्य सीडीएन आदि), या तो उनके कैश से, या मूल सर्वर से, और फिर उन्हें वापस भेजने से पहले उन्हें संयोजित, छोटा और संयोजित करें। ब्राउज़र को।

  7. इस आभासी ब्राउज़र की बात है कि वे बस कुछ जावास्क्रिप्ट होना चाहिए कि फिर सही क्रम में इन लिपियों में से प्रत्येक चलाता है:

    • document.write()पृष्ठ पर सही स्थान पर उस सामग्री को कॉल और इंजेक्ट करने के लिए सभी को पकड़ने । (संभवतः write()कस्टम के साथ ब्राउज़र के फ़ंक्शन को अधिलेखित करके ?)
    • DOMContentLoaded और लोड के रूप में घटनाओं को पीछे छोड़ना

मैं वास्तव में काफी हैरान हूं कि यह काम करता है (हालांकि शायद यह हमेशा नहीं होता है )। लेकिन सामान्य परिस्थितियों में, मुझे नहीं लगता कि डेवलपर्स को अपने जावास्क्रिप्ट को संगत बनाने के लिए कुछ विशेष करने की आवश्यकता है।

यह एक सामुदायिक विकी है, इसलिए कृपया किसी भी अतिरिक्त विवरण को संपादित करें और गायब करें।


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

आभासी ब्राउज़र संभवतः एक है छाया डोम रीढ़ की तरह आधुनिक चौखटे, कोणीय, एंबर, नॉकआउट, आदि के द्वारा प्रयोग किया लोगों की तरह
कैसर

3
यदि हम किसी भी ऐसे क्लाउड-सक्षम पृष्ठ पर जाते हैं, जिसमें यह रॉकेटस्क्रिप्ट चीज़ सक्षम है, तो हम कंसोल में देख सकते हैं जो document.writeवास्तव में उत्परिवर्तित है। मुझे function (b,d,e,g,h){if(u.getActivated())return c.apply(f,arguments);try{return j[a].apply(f,arguments)}catch(i){return j[a](b,d,e,g,h)}}स्ट्रिंग मान के रूप में मिलता है । इसलिए जो परिकल्पना की गई है document.writeवह वास्तव में सही है।
user3459110

उपरोक्त पोस्ट का इटैलियन अनुवाद, अगर किसी को इंट्रस्ट किया गया है
Glauco Zega

5
एक बात मैंने देखी है कि रॉकेट लोडर डॉक्यूमेंट.राइट का उपयोग करता है। Chrome 53 के बाद से, DevTools समस्याग्रस्त दस्तावेज़ के लिए चेतावनी जारी करता है। () कथन और इसका उपयोग चेतावनी को ट्रिगर करता है। वास्तव में, CloudFlare के दस्तावेज़ का उपयोग। राइट () 2G कनेक्शन पर Chrome 53 + द्वारा अवरुद्ध किया जाएगा। अधिक जानकारी के लिए क्रोम डेवलपर्स देखें developers.google.com/web/updates/2016/08/...
davemac
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.