कम शब्दों में सटीक: अपने DOM एलिमेंट का फिर से इस्तेमाल करें और उन एलिमेंट को हटाएं जो पेज से बहुत दूर हैं व्यूपोर्ट. देर से मिलने वाले डेटा के लिए, प्लेसहोल्डर का इस्तेमाल करें. यहाँ है डेमो और इनफ़ाइनाइट के लिए कोड स्क्रोलर.
इनफ़ाइनाइट स्क्रोलर, पूरे इंटरनेट पर पॉप-अप होते हैं. Google Music की कलाकारों की सूची पहला, Facebook की टाइमलाइन एक है और Twitter की लाइव फ़ीड भी. आपने लोगों तक पहुंचाया मुफ़्त में नीचे की ओर स्क्रोल करते हुए सबसे नीचे पहुंचने से पहले, नया कॉन्टेंट शानदार तरीके से दिखता है बेमतलब की चीज़ें दिखती हैं. इससे लोगों को बेहतरीन अनुभव मिलेगा और अपील देखें.
हालांकि, इनफ़ाइनाइट स्क्रोलर के पीछे की तकनीकी चुनौती, इससे ज़्यादा मुश्किल है दिखता है. The दाईं चीज़ का काम करते समय, आपको आने वाली समस्याओं की अलग-अलग सीमा विशाल है. यह आसान चीज़ों से शुरू होता है, जैसे कि फ़ुटर में लिंक व्यावहारिक रूप से पहुंच से बाहर है, क्योंकि सामग्री फ़ुटर को बाहर धकेलती रहती है. हालांकि, समस्याएं तो मुश्किल हो जाती हैं. जब कोई व्यक्ति अपनी वेबसाइट पर फ़ोन को पोर्ट्रेट से लैंडस्केप तक या फ़ोन को हिलने-डुलने से कैसे रोका जा सकता है जब सूची बहुत लंबी हो जाए, तो उसमें रोकना बंद हो जाता है?
सही बातTM
हमें लगा कि रेफ़रंस को लागू करने के लिए यही काफ़ी वजह है जो इन सभी समस्याओं को फिर से इस्तेमाल करने लायक तरीके से हल करने का तरीका दिखाती है. परफ़ॉर्मेंस के मानकों को बनाए रखना.
हम अपने लक्ष्य को हासिल करने के लिए तीन तकनीकों का इस्तेमाल करेंगे: डीओएम रीसाइकलिंग, टूमस्टोन और स्क्रोल ऐंकर करें.
हमारा डेमो केस एक Hangouts जैसी चैट विंडो होगी, जिसमें के बारे में बताएँगे. हमें सबसे पहले, चैट का कभी न खत्म होने वाला सोर्स चाहिए मैसेज. तकनीकी तौर पर, अनंत स्क्रोलर कोई भी वाकई नहीं है अनगिनत हैं, लेकिन इन तक पहुंचने के लिए काफ़ी डेटा उपलब्ध है स्क्रोलर भी देखे जा सकते हैं. सरलता के लिए, हम बस एक हार्ड-कोड चैट मैसेज का सेट और इस पर मैसेज, लेखक और समय-समय पर मिलने वाली इमेज अटैचमेंट चुनें कुछ हद तक बनावटी देरी के साथ रीयल नेटवर्क.
DOM को रीसाइकल करना
डीओएम को रीसाइकल करने की तकनीक, डीओएम नोड की संख्या को कम रखने के लिए कम इस्तेमाल की जाती है. कॉन्टेंट बनाने इसके लिए, पहले से बनाए गए ऐसे डीओएम एलिमेंट का इस्तेमाल किया जाना चाहिए जो स्क्रीन पर न हों काफ़ी अहम है. हम जानते हैं कि डीओएम नोड सस्ते होते हैं, लेकिन वे मुफ़्त नहीं हैं, क्योंकि उनमें से हर एक मेमोरी, लेआउट, स्टाइल और पेंट में अतिरिक्त कीमत जोड़ता है. अगर कम कीमत वाले डिवाइस पूरी तरह से काम करना बंद कर दें, तो वे काफ़ी धीमा हो जाएंगे वेबसाइट में मैनेज करने के लिए बहुत बड़ा DOM है. यह भी ध्यान रखें कि हर रिलेआउट और आपकी स्टाइल को दोबारा इस्तेमाल किया जा सकता है. यह ऐसी प्रोसेस है जो क्लास के ट्रिगर होने पर ट्रिगर होती है नोड को नोड से जोड़ा या हटाया जाता है – बड़े DOM के साथ ज़्यादा महंगा होता है. डीओएम नोड को रीसाइकल करने का मतलब है कि हम डीओएम की कुल संख्या बनाए रखेंगे नोड काफ़ी कम होते हैं, जिससे इन सभी प्रोसेस में तेज़ी आती है.
पहली चुनौती खुद को स्क्रोल करने की है. क्योंकि हमारे पास इसका सिर्फ़ एक छोटा सबसेट होगा किसी भी समय DOM में सभी उपलब्ध आइटम की समीक्षा करते हैं, तो हमें दूसरा तरीका ढूंढने की ज़रूरत होती है ताकि ब्राउज़र का स्क्रोलबार ठीक से पहचान सके कि और सैद्धांतिक तौर पर वहां पहुंच जाएंगे. हम ट्रांसफ़ॉर्म के साथ 1 पिक्सल x 1 पिक्सल वाले सेंटिनल एलिमेंट का इस्तेमाल करेंगे उस एलिमेंट को ज़बरदस्ती लागू करने के लिए जिसमें आइटम मौजूद हैं – रनवे – आइटम पर आधारित ऊंचाई. हम रनवे में हर एलिमेंट को अपनी-अपनी लेयर में प्रमोट करेंगे, ताकि ताकि रनवे की लेयर पूरी तरह से खाली हो जाए. कोई बैकग्राउंड रंग नहीं, कुछ नहीं. अगर रनवे की लेयर खाली नहीं है, तो यह ब्राउज़र की और हमें अपने ग्राफ़िक्स कार्ड पर एक टेक्सचर स्टोर करना होगा, जिसमें कुछ सौ हज़ार पिक्सल तक की ऊंचाई होती है. पक्के तौर पर इस तरह से व्यवहार नहीं किया जा सकता मोबाइल डिवाइस.
जब भी हम स्क्राेल करेंगे, तो हम जांच करेंगे कि व्यूपोर्ट ज़रूरत के मुताबिक है या नहीं का खत्म हो चुका है. अगर ऐसा है, तो हम सेंटिनल को आगे बढ़ाकर और वे आइटम जिन्हें व्यूपोर्ट से बाहर रखा गया है उन्हें रनवे तैयार कर सकता है और उन्हें नया कॉन्टेंट अपलोड कर सकेगा.
दूसरी दिशा में स्क्रोल करने पर भी ऐसा ही होता है. हालांकि, हम कभी भी ऐसा नहीं करेंगे लागू करने में रनवे को छोटा करें, ताकि स्क्रोलबार की पोज़िशन बनी रहे एक जैसा.
टूंबस्टोन
जैसा कि हमने पहले बताया था, हमारी कोशिश रहती है कि हमारा डेटा सोर्स कुछ इस तरह काम करे असली दुनिया में खो जाएं. नेटवर्क इंतज़ार के समय और बाकी सभी चीज़ों के साथ. इसका मतलब है कि अगर हमारा इसमें लोग फ़्लिकी स्क्रोलिंग का इस्तेमाल करते हैं. साथ ही, वे आखिरी एलिमेंट को आसानी से स्क्रोल करके आगे बढ़ सकते हैं तो हमारे पास इसका डेटा है. अगर ऐसा होता है, तो हम कब्र के पत्थर से बना एक आइटम रखेंगे – प्लेसहोल्डर – जब डेटा आ गया है. मकबरे भी रीसाइकल किए जाते हैं और इनके लिए एक अलग पूल भी होता है ऐसे डीओएम एलिमेंट जिन्हें फिर से इस्तेमाल किया जा सकता है. हमें इसकी आवश्यकता है, ताकि हम एक अच्छे सामग्री से भरे हुए आइटम की कब्र का पत्थर, जो आम तौर पर बहुत जिससे उपयोगकर्ता परेशान हो जाते हैं और असल में वे उन चीज़ों को समझ नहीं पाते जो वे थीं मदद मिलती है.
यहां एक दिलचस्प चुनौती यह है कि असली आइटम की लंबाई कब्र के पत्थर वाला आइटम, क्योंकि हर आइटम के लिए अलग-अलग टेक्स्ट दिया गया है या इमेज. इसे ठीक करने के लिए, हम हर बार स्क्रोल करने की मौजूदा जगह को अडजस्ट करेंगे डेटा आता है और टूमस्टोन को व्यूपोर्ट के ऊपर बदला जाता है, ऐंकरिंग पिक्सल वैल्यू के बजाय किसी एलिमेंट पर स्क्रोल करने की पोज़िशन. यह कॉन्सेप्ट है जिसे स्क्रोल ऐंकरिंग कहते हैं.
स्क्रोल एंकरिंग
या जब विंडो का साइज़ बदलता है (जो तब भी होता है, जब डिवाइस फ़्लिप किया जा रहा है!). हमें यह पता लगाना होगा कि सूची में, सबसे ज़्यादा दिखने वाला एलिमेंट कौनसा है तो व्यूपोर्ट ही. उस एलिमेंट का कुछ ही हिस्सा दिख सकता था. इसलिए, हम ऑफ़सेट को एलिमेंट के ऊपर सेव करें, जहां से व्यूपोर्ट शुरू होता है.
अगर व्यूपोर्ट का साइज़ बदला जाता है और रनवे में बदलाव होता है, तो हम जो दिखने में उपयोगकर्ता जैसी लगती है. जीतें! साइज़ बदलने को छोड़कर विंडो का अर्थ है कि प्रत्येक आइटम की ऊंचाई संभावित रूप से बदल गई है, तो हम क्या आपको यह जानकारी है कि ऐंकर किया गया कॉन्टेंट कितना नीचे रखा जाना चाहिए? हमारे पास नहीं है! पता लगाने के लिए हमें ऐंकर किए गए आइटम के ऊपर के हर एलिमेंट का लेआउट बनाना होगा और इन सभी को उनकी ऊंचाई; इस वजह से, साइज़ बदलने के बाद आपके चैनल के डेटा पर काफ़ी ज़्यादा असर पड़ सकता है. हालांकि, हम इस दौरान चाहते हैं. इसके बजाय, हम यह मानकर चलते हैं कि ऊपर दिए गए हर आइटम का साइज़ एक ही है को कब्र के पत्थर की तरह बनाया जा सकता है और उसी हिसाब से हमारी स्क्रोल स्थिति को अडजस्ट किया जा सकता है. जैसे कि एलिमेंट रनवे पर स्क्रोल किया, तब हमने स्क्रोल करने की जगह में बदलाव किया. लेआउट ज़रूरत के समय काम करता है.
लेआउट
मैंने एक ज़रूरी जानकारी स्किप कर दी है: लेआउट. डीओएम एलिमेंट का हर बार रीसाइकल करना आम तौर पर, पूरे रनवे का 60 फ़्रेम प्रति सेकंड का टारगेट है. इससे बचने के लिए, हम उन लेआउट खुद तैयार हो जाता है और ट्रांसफ़ॉर्म वाले एलिमेंट का इस्तेमाल करता है. इस तरह हम यह दिखा सकते हैं कि रनवे पर आगे के सभी एलिमेंट एक ही जगह पर हैं जब असल में खाली जगह होती है, तो वह जगह लेना. जब से हम कर रहे हैं हम उन स्थितियों को कैश मेमोरी में सेव कर सकते हैं जहां हर आइटम खत्म होता है. साथ ही, हम जब उपयोगकर्ता पीछे की ओर स्क्रोल करे, तो कैश मेमोरी से सही एलिमेंट को तुरंत लोड करें.
आम तौर पर, आइटम को डीओएम से अटैच करने पर ही फिर से पेंट किया जाता है और रनवे में अन्य आइटम में कुछ जोड़ने या हटाने से परेशान नहीं होना चाहिए. यानी लेकिन ऐसा सिर्फ़ मॉडर्न ब्राउज़र में किया जा सकता है.
ब्लीडिंग-एज में बदलाव
हाल ही में, Chrome ने सीएसएस कंटेनमेंट के लिए सहायता जोड़ी, यह एक सुविधा है
इससे हम डेवलपर को ब्राउज़र को यह बता पाते हैं कि कोई एलिमेंट
लेआउट और पेंट काम करते हैं. हम यहां लेआउट बना रहे हैं. इसलिए, यह हमारे लिए सबसे ज़रूरी
COVID-19 की रोकथाम के लिए आवेदन करना होगा. जब भी हम रनवे में कोई एलिमेंट जोड़ते हैं, तब हम जानते हैं
अन्य आइटम पर रिलेआउट से असर नहीं पड़ेगा. इसलिए, हर आइटम को
contain: layout पाएं. हम अपनी बाकी वेबसाइट को भी प्रभावित नहीं करना चाहते,
इसलिए, रनवे को भी यह स्टाइल डायरेक्टिव मिलना चाहिए.
हमने एक अन्य चीज़ पर भी विचार किया
IntersectionObservers का इस्तेमाल यह पता लगाने के तरीके के तौर पर किया है कि
उपयोगकर्ता ने हमारे एलिमेंट को रीसाइकल करने और नए
डेटा शामिल है. हालांकि, IntersectionObserver को इंतज़ार का समय ज़्यादा होना चाहिए (जैसे कि
requestIdleCallback का इस्तेमाल कर रहे हैं, तो हो सकता है कि हम इन्हें काम करें
इंटरसेक्शन ऑब्ज़र्वर. यहाँ तक कि हमारी मौजूदा
scroll इवेंट में यह समस्या है, क्योंकि स्क्रोल इवेंट को
“सबसे अच्छी कोशिश” के आधार पर. आखिर में, हुडीनी का कंपोज़िटर वर्कलेट
एक सुझाव के तौर पर, इस समस्या का हाई फ़िडेलिटी समाधान होगा.
यह अब भी सटीक नहीं है
फ़िलहाल, डीओएम रीसाइकलिंग को सही तरीके से लागू नहीं किया जा सकता, क्योंकि इसमें सभी एलिमेंट जोड़े जाते हैं जो व्यूपोर्ट से पास हो जाता है, न कि सिर्फ़ उन चीज़ों की परवाह करता है जो स्क्रीन पर. इसका मतलब है कि जब आप वास्तव में तेज़ी से स्क्रोल करते हैं, तो Chrome पर लेआउट और पेंट के लिए इतना काम किया है कि यह ठीक नहीं रहता. आपकी सदस्यता खत्म हो जाएगी सिर्फ़ बैकग्राउंड ही देख सकते थे. यह दुनिया खत्म नहीं हुई है, लेकिन जिसमें सुधार करना होगा.
हम उम्मीद करते हैं कि आपने देखा होगा कि जब आप चाहें, तो छोटी से छोटी समस्याएँ कितनी बड़ी हो सकती हैं उच्च प्रदर्शन मानकों के साथ एक शानदार उपयोगकर्ता अनुभव को संयोजित कर सकते हैं. के साथ प्रोग्रेसिव वेब ऐप्लिकेशन, मोबाइल फ़ोन के लिए मुख्य सुविधा बन रहे हैं. इससे और ज़रूरी हो जाएगा और वेब डेवलपर को इसमें निवेश जारी रखना होगा करने के लिए डिज़ाइन किया गया है.
सभी कोड हमारी डेटा स्टोर करने की जगह में मिल सकते हैं. हमने कर लिया है को फिर से इस्तेमाल करने लायक बनाए रखना है, लेकिन उसे असल लाइब्रेरी के तौर पर पब्लिश नहीं करना है npm या एक अलग रेपो के रूप में. इसका मुख्य इस्तेमाल शिक्षा के मकसद से किया जाता है.