फेसबुक से ब्राउज़र एपीआई में पहला योगदान

एक लोकप्रिय वेबसाइट के मालिकों के रूप में हमारी स्थिति - और लोकप्रिय रिएक्ट प्लेटफॉर्म का समर्थन करने में हमारा काम - हमें "कतार" समस्या को हल करने के लिए उपयोग किए जाने वाले ब्राउज़र के साथ काम करने के अद्वितीय अवसर और समझ प्रदान करता है। वेब मानक समुदाय (W3C) के एक सक्रिय सदस्य के रूप में, हमने कई नवाचारों की चर्चा में भाग लिया, जिसमें सेवा कार्यकर्ता और सीएसएस-ओवरक्रोल शामिल हैं , लेकिन हाल तक हमने वेब ब्राउज़र को बेहतर बनाने के लिए कभी भी अपनी पहल नहीं की। उत्पादकता में उल्लेखनीय वृद्धि प्राप्त करने के लिए, एक नया एपीआई प्रस्तावित किया गया था, जो कि Google क्रोम से हमारे सहयोगियों के साथ घनिष्ठ सहयोग के परिणामस्वरूप, परीक्षण संस्करण के लिए प्रदान किया गया था। Chrome v74 में isInputPending API शामिल है , और इसका उपयोग समग्र जावास्क्रिप्ट निष्पादन समय और घटना प्रतिक्रिया समय दोनों को बेहतर बनाने के लिए किया जा सकता है। यह वेब पर जावास्क्रिप्ट योजना में सुधार करने के लिए सिर्फ पहला कदम है। हम एपीआई की अंतिम संस्करण बनाने के लिए डेवलपर की प्रतिक्रिया प्राप्त करने और उनका उपयोग करने की उम्मीद करते हैं।

आधुनिक वेब में सबसे महत्वपूर्ण प्रदर्शन संकेतकों में से एक उपयोगकर्ता घटना (एक बटन पर क्लिक करने या एक क्षेत्र में प्रवेश करने) पर प्रतिक्रिया करने के लिए आवश्यक समय है, इसके पूर्ण दृश्य के साथ। फेसबुक पर, हम घटनाओं को चार चरणों में साझा करते हैं और मापते हैं:

• ऑपरेटिंग सिस्टम डेटा प्राप्त करता है
• प्रसंस्करण की वास्तविक शुरुआत
• एक घटना के जवाब में स्क्रीन पर परिवर्तन प्रदर्शित करना शुरू करें
• प्रसंस्करण पूरा हो गया है और परिणाम कल्पना है

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

फास्ट बूट या त्वरित प्रतिक्रिया: एक चुनें

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

कई अन्य साइटों की तरह, हम जावास्क्रिप्ट को छोटे ब्लॉकों में तोड़कर इस समस्या को हल करते हैं। जब पृष्ठ लोड हो रहा है, हम कुछ जावास्क्रिप्ट लॉन्च करते हैं और फिर ब्राउज़र पर नियंत्रण वापस करते हैं। फिर ब्राउज़र इनपुट इवेंट कतार की जांच कर सकता है और देख सकता है कि क्या संभालना है। ब्राउज़र को जावास्क्रिप्ट ब्लॉक चलाने पर वापस आ सकते हैं क्योंकि वे जोड़े जाते हैं। यह मदद करता है, लेकिन अन्य समस्याओं का कारण हो सकता है। हर बार जब हम ब्राउज़र पर नियंत्रण वापस करते हैं, तो इनपुट घटनाओं की बारी की जाँच करने, घटनाओं को संसाधित करने और अगले जावास्क्रिप्ट ब्लॉक का चयन करने में कुछ समय लगता है। इस प्रकार, हालांकि ब्राउज़र तेजी से घटनाओं का जवाब देता है, फिर भी हमें कोड ब्लॉक के आकार और उस आवृत्ति के साथ संतुलन खोजने की आवश्यकता है जिसके साथ हम ब्राउज़र से नीच हैं। यदि हम अक्सर नियंत्रण बदलते हैं, तो पृष्ठ बहुत धीरे-धीरे लोड होता है, यदि इसके विपरीत, कम बार, ब्राउज़र को उपयोगकर्ता की घटनाओं पर प्रतिक्रिया देने में अधिक समय लगता है, और लोग निराश होते हैं।

यदि हम बड़े जावास्क्रिप्ट ब्लॉक चलाते हैं, तो ब्राउज़र एक लंबी देरी (ऊपर) के साथ उपयोगकर्ता की घटनाओं को भेज सकता है; यदि हम छोटे ब्लॉक चलाते हैं, तो पेज लोड (नीचे) होने में अधिक समय लेता है।

InputPending समाधान है

जब हमने पहली बार कतार में देरी का पता लगाया, तो हमने क्रोम में अपने सहयोगियों की ओर रुख किया। हम यह देखना चाहते थे कि अगर हम एक नया डाउनलोड अप्रोच लेकर आएंगे तो सब कुछ कैसा दिखेगा तो यह समझौता दुविधा को खत्म कर देगा। उनके साथ बात करने के बाद, हमने सुझाव दिया कि InInPPending। TheInputPending API वेब पर उपयोगकर्ता घटनाओं के लिए इंटरप्ट की अवधारणा का उपयोग करने वाला पहला है।

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

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

कैसे काम करता है InputPending वर्क्स

जैसा कि नाम से ही स्पष्ट है, isInputPending आपको बताता है कि क्या इनपुट की प्रतीक्षा कर रहे इवेंट हैं। डेवलपर्स इस जानकारी का उपयोग जावास्क्रिप्ट को चलाने के दौरान यह तय करने के लिए कर सकते हैं कि वे ब्राउज़र का नियंत्रण प्राप्त करना चाहते हैं या नहीं। ठीक से उपयोग किया जाता है, IsInPPending तेजी से लोडिंग और अन्तरक्रियाशीलता की दुविधा को पूरी तरह से समाप्त कर सकता है।

एपीआई के साथ काम करने के लिए, navigator.scheduling.isInputPending() । अनिवार्य रूप से, यदि ब्राउज़र को घटना को भेजे जाने की उम्मीद है, तो यह विधि true । जब बिना किसी तर्क के बुलाया जाता है, तो सभी समर्थित ईवेंट प्रकारों की जाँच की जाती है। इसके अलावा, मैन्युअल रूप से घटना प्रकारों की एक सूची निर्दिष्ट करना संभव है: माउस, पहिया, स्पर्श, जो लंबित इनपुट के लिए जांच की जानी चाहिए।

उदाहरण: किसी भी प्रकार के आयोजन के लिए जाँच करना

 while (workQueue.length > 0) { if (navigator.scheduling.isInputPending()) { //       break; } let job = workQueue.shift(); job.execute(); } 

उदाहरण: विशिष्ट इनपुट घटनाओं के लिए जाँच

 while (workQueue.length > 0) { if (navigator.scheduling.isInputPending(['mousedown', 'mouseup', 'keydown', 'keyup'])) { //       'mousedown'  'mouseup'  'keydown'  'keyup' break; } let job = workQueue.shift(); job.execute(); } 

आगे क्या है?

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

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

लेखक नोट

आपके द्वारा आवश्यक नया API आज़माने के लिए:

• Google Chrome ब्राउज़र 74-76 संस्करण स्थापित करें
• ध्वज को सक्षम करें प्रायोगिक वेब प्लेटफ़ॉर्म सुविधाएँ