Turbolinks एक अनुकूलन है जो कथित . को बढ़ाता है पृष्ठों को स्विच करने और अपने ऐप में संपत्तियों को पुनः लोड करने के बारे में स्मार्ट होने के द्वारा प्रदर्शन। सशर्त जीईटी अनुरोधों के विपरीत, इसे आपके रेल ऐप में ही रूबी कोड में किसी भी बदलाव की आवश्यकता नहीं है। Turbolinks 5 एक JavaScript लाइब्रेरी है जो हर जगह काम करती है (यहां तक कि रेल के बिना भी, जैसे कि स्थिर पृष्ठों पर) और असमर्थित ब्राउज़रों पर अच्छी तरह से खराब हो जाती है।
टर्बोलिंक 5
Turbolinks को Rails के साथ बंडल किया गया है और Rails 4 के बाद से डिफ़ॉल्ट रूप से नए अनुप्रयोगों में शामिल किया गया है। Turbolinks 5 के साथ 5 जहाजों को रेल करता है, जिसे अब Turbolinks Classic कहा जाता है।
हालांकि यह रेल के साथ आता है, टर्बोलिंक्स का नया संस्करण एक शुद्ध जावास्क्रिप्ट पुस्तकालय है जिसका उपयोग किसी भी HTML पृष्ठ पर <script> में किया जा सकता है। पेज पर टैग करें, या इसे ऐप के JavaScript बंडल में शामिल करें।
जब शामिल किया जाता है, तो Turbolinks स्वचालित रूप से एक ही डोमेन को इंगित करने वाले सभी लिंक ढूंढ लेगा, और एक क्लिक ईवेंट श्रोता संलग्न करेगा। उन लिंक पर किसी भी क्लिक को इंटरसेप्ट किया जाएगा। सामान्य की तरह लिंक का अनुसरण करने के बजाय, यह XMLHttpRequest का उपयोग करके जावास्क्रिप्ट के माध्यम से पृष्ठभूमि में लिंक किए गए पृष्ठ का अनुरोध करता है। . फिर, चार चीज़ें होती हैं:
- वर्तमान पृष्ठ की एक प्रति बाद में उपयोग करने के लिए Turbolinks के कैशे में संग्रहीत है
- यह प्रतिस्थापित करता है वर्तमान पृष्ठ का
<body><body>. के साथ XHR परिणाम से - यह विलीन हो जाता है वर्तमान पेज का
<head><head>. के साथ XHR परिणाम से - यह इतिहास API का उपयोग करके ब्राउज़र में URL को बदल देता है
<head> . को मर्ज करके टैग, ब्राउज़र को सीएसएस और जावास्क्रिप्ट फ़ाइलों जैसी संपत्तियों को पुनः लोड और पुन:प्रस्तुत करने की आवश्यकता नहीं है जो दोनों पृष्ठों पर मौजूद हैं। यह आपके ऐप को महत्वपूर्ण रूप से गति प्रदान कर सकता है, खासकर यदि आपके पास बहुत सारे एसेट हैं जिनका आपके अधिकांश पेजों पर पुन:उपयोग किया जाता है।
कुछ दृश्यों के साथ एक ताजा रेल 5 ऐप में, आप लिंक पर क्लिक करके और बैक बटन दबाकर टर्बोलिंक्स को कार्रवाई में देख सकते हैं। आपके ब्राउज़र के नेटवर्क टैब में, आप "xhr" के रूप में चिह्नित Turbolinks के माध्यम से लोड किए गए पृष्ठों के लिए अनुरोध देखेंगे। साथ ही, आपके एसेट हर अनुरोध के लिए फिर से लोड नहीं किए जाएंगे.
कैशिंग और पेज पूर्वावलोकन
उसी पृष्ठ पर बाद के अनुरोधों को गति देने के लिए, टर्बोलिंक्स हाल ही में देखे गए पृष्ठों का कैश रखता है। उदाहरण के लिए, बैक बटन दबाने पर यह पिछले पृष्ठ को तुरंत रेंडर करने की अनुमति देता है।
धीमे पृष्ठों के कथित प्रदर्शन को तेज़ करने के लिए, टर्बोलिंक पृष्ठ का पूर्वावलोकन दिखाएगा यदि वह कैश में मौजूद है। लिंक पर क्लिक करने के बाद, कैश्ड संस्करण दिखाया जाता है जबकि ताज़ा संस्करण लोड होता है।
चेतावनी
Turbolinks आपके ब्राउज़र की कुछ डिफ़ॉल्ट सुविधाओं को फिर से लागू करता है, इसलिए कुछ चीज़ें बिना Turbolinks के सक्षम होने के साथ अलग तरीके से काम करती हैं।
turbolinks:load और <script> टैग
चूंकि प्रत्येक लिंक क्लिक के बाद पेज रीफ्रेश नहीं होता है, window.onload का उपयोग करके पेज लोड पर जावास्क्रिप्ट लोड करना या DOMContentLoaded अब काम नहीं करता। इसे ठीक करने के लिए, Turbolinks turbolinks:load . की आपूर्ति करता है घटना, जिसका आप इसके बजाय उपयोग कर सकते हैं:
document.addEventListener("turbolinks:load", function() {
// ...
})
ब्राउज़र लोड होने की स्थिति
पृष्ठों के बीच स्विच करते समय, ब्राउज़र आपके ब्राउज़र में लोडिंग संकेतक नहीं दिखाएगा क्योंकि अनुरोध पृष्ठभूमि में निष्पादित किया गया है।
इसे ठीक करने के प्रयास में, Turbolinks यह इंगित करने के लिए कि पृष्ठ लोड हो रहा है, 500 मिलीसेकंड के बाद पृष्ठ के शीर्ष पर एक नीली पट्टी (जिसे CSS के साथ स्टाइल किया जा सकता है) दिखाएगा।
$ rails new --skip-turbolinks ?
Turbolinks 5 Turbolinks Classic के बाद से एक लंबा सफर तय कर चुका है, जब Turbolinks ऐसा लग रहा था कि आपने एक नया रेल ऐप बनाते समय छोड़ दिया था। एक सुंदर रूप से अपमानजनक शुद्ध जावास्क्रिप्ट प्लगइन होने के नाते जो अब रेल पर निर्भर नहीं है, यह अधिकांश ऐप्स के लिए बॉक्स से बाहर काम करता है, अगर आप चेतावनियों को ध्यान में रखते हैं।
बदले में, Turbolinks एक अच्छी गति को बढ़ावा देता है और आपकी स्थिर संपत्तियों को प्रत्येक पृष्ठ दृश्य पर पुनः लोड होने से रोकता है, जो कुछ नेटवर्क अनुरोधों को बचाता है। एक नया रेल ऐप बनाते समय, यह देखने के लिए टर्बोलिंक्स को रखने का प्रयास करें कि यह क्या करता है। मौजूदा ऐप्स पर, Turbolinks को आज़माएं!
यह टर्बोलिंक्स के हमारे अवलोकन को समाप्त करता है। क्या आप अपने किसी ऐप में Turbolinks का उपयोग कर रहे हैं? हमें आपसे सुनकर अत्यंत खुशी होगी! साथ ही, हम यह जानने के लिए उत्सुक हैं कि आपको यह और AppSignal अकादमी के पिछले लेख कैसे पसंद आए, या आप इसके बारे में @AppSignal पर आगे क्या पढ़ना चाहते हैं।