बिना रुकावट के बेहतर तरीके से काम करने की सुविधा

पॉल किनलन
पॉल किनलन

आप और आपके उपयोगकर्ता ऐसे मोबाइल वेब ऐप्लिकेशन चाहते हैं जो स्क्रीन पर अच्छी तरह से प्रतिक्रिया दें और आसानी से स्क्रोल करें. उन्हें डेवलप करना आसान होना चाहिए, लेकिन माफ़ करें, स्क्रोलिंग के दौरान मोबाइल वेब ब्राउज़र टच इवेंट पर कैसी प्रतिक्रिया देते हैं, इसे TouchEvent की खास जानकारी में बताया गया है. यही वजह है कि इन्हें चार कैटगरी में बांटा जा सकता है. इस स्थिति में, स्क्रोल करने के दौरान स्मूदिंग और डेवलपर कंट्रोल बनाए रखने के बीच बुनियादी तनाव दिखता है.

टच इवेंट प्रोसेसिंग के चार अलग-अलग मॉडल?

अलग-अलग ब्राउज़र के बीच के व्यवहार में अंतर को चार मॉडल में बांटा जाता है.

  1. सामान्य सिंक्रोनस इवेंट प्रोसेसिंग

    Touchmove इवेंट, स्क्रोलिंग के दौरान भेजे जाते हैं और हर स्क्रोल को अपडेट होने से तब तक भेजे जाते हैं, जब तक कि Touchmove हैंडलिंग की प्रोसेस पूरी न हो जाए. यह समझने में सबसे आसान है, लेकिन स्क्रोल परफ़ॉर्मेंस के लिए सबसे असरदार, लेकिन खराब है, क्योंकि इसका मतलब है कि स्क्रोल के दौरान हर फ़्रेम को मुख्य थ्रेड पर ब्लॉक होना चाहिए.

    ब्राउज़र: Android ब्राउज़र (Android 4.0.4, 4.3), मोबाइल Safari (div स्क्रोल करते समय)

  2. एसिंक्रोनस टचमूव प्रोसेसिंग

    Touchmove इवेंट, स्क्रोलिंग के दौरान भेजे जाते हैं, लेकिन एसिंक्रोनस तरीके से स्क्रोल किए जा सकते हैं. स्क्रोलिंग शुरू होने के बाद, touchmove इवेंट को अनदेखा कर दिया जाता है. इसकी वजह से, इवेंट "डबल हैंडल" हो सकते हैं. उदाहरण के लिए, जब भी वेबसाइट टचस्क्रीन का इस्तेमाल करके कुछ कार्रवाई करेगी और इवेंट के preventDefault को कॉल करेगा, तो उसे स्क्रोल करना जारी रखेगा. साथ ही, ब्राउज़र को यह अनुमति भी नहीं दी जाएगी कि वह इस कार्रवाई को मैनेज न करे.

    ब्राउज़र: मोबाइल Safari (दस्तावेज़ स्क्रोल करते समय), Firefox

  3. स्क्रोल करते समय टचस्क्रीन को दबाकर रखना

    स्क्रोलिंग शुरू होने के बाद Touchmove इवेंट नहीं भेजे जाते और टचएंड इवेंट के बाद तक फिर से शुरू नहीं किए जाते. इस मॉडल में, स्थिर टच और स्क्रोल के बीच अंतर बताना मुश्किल है.

    ब्राउज़र: Samsung ब्राउज़र (mousemove इवेंट भेजे गए)

  4. स्क्रोल शुरू करने पर टच रद्द करें

    ये दोनों तरीके आपके पास नहीं हो सकते -- जैसे कि स्क्रोल करने का आसान तरीका और डेवलपर कंट्रोल. साथ ही, यह मॉडल पॉइंटर इवेंट की खास बातों की तरह ही स्मूद स्क्रोलिंग और इवेंट हैंडलिंग के बीच के अंतर को बेहतर तरीके से समझाता है. कुछ ऐसे प्रयोग नहीं किए जा सकते जिनमें उंगली को ट्रैक करने की ज़रूरत हो, जैसे कि पुल-टू-रीफ्रेश करने की सुविधा.

    ब्राउज़र: Chrome डेस्कटॉप M32+, Chrome Android

बदलाव क्यों करें?

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

इन इफ़ेक्ट को इस्तेमाल करने के लिए, खास तौर पर हार्डकोड की गई सुविधाएं जोड़ने के बजाय, Chrome का मकसद प्लैटफ़ॉर्म में ऐसे प्रिमिटिव जोड़ने पर फ़ोकस करना होता है जिनसे डेवलपर इन इफ़ेक्ट को सीधे तौर पर लागू कर सकें. इस सिद्धांत को समझने के लिए, एक रैशनल वेब प्लैटफ़ॉर्म देखें.

Chrome का नया मॉडल: थ्रॉटल किया गया Async Touchmove मॉडल

Chrome एक नई सुविधा पेश कर रहा है जिसे स्क्रोल करते समय, दूसरे ब्राउज़र के लिए लिखे गए कोड के साथ बेहतर तरीके से काम करने के लिए डिज़ाइन किया गया है. साथ ही, ऐसी स्थितियों को भी चालू किया जा रहा है जो स्क्रोल करते समय टचप्ले इवेंट पर निर्भर होती हैं. यह सुविधा डिफ़ॉल्ट रूप से चालू होती है और आप इस फ़्लैग, chrome://flags\#touch-scrolling-mode की मदद से इसे बंद कर सकते हैं.

नई सुविधा:

  • पहला टचमूव सिंक के साथ भेजा जाता है, ताकि स्क्रोल को रद्द किया जा सके
  • चालू स्क्रोलिंग के दौरान
    • Touchmove इवेंट, एसिंक्रोनस तरीके से भेजे जाते हैं
    • throttled के लिए 1 इवेंट throttled किया जा सकता है. इसके अलावा, अगर सीएसएस throttled स्लोप क्षेत्र की सीमा से ज़्यादा है
    • Event.cancelable गलत है
  • अगर ऐसा नहीं है, तो स्क्रोल करने की सीमा पूरी होने या यह मुमकिन न हो.
  • टचएंड इवेंट हमेशा तब होता है, जब उपयोगकर्ता अपनी उंगली उठाता है

आप Android के लिए Chrome में इस डेमो को आज़मा सकते हैं और अंतर देखने के लिए chrome://flags\#touch-scrolling-mode फ़्लैग को टॉगल कर सकते हैं.

हमें आपकी राय का इंतज़ार है

Async Touchmove मॉडल में, क्रॉस-ब्राउज़र के साथ काम करने की क्षमता को बेहतर बनाया जा सकता है. साथ ही, हाथ के जेस्चर (हाव-भाव) के नए क्लास को चालू किया जा सकता है. हम डेवलपर के बारे में जानने और इसकी मदद से की जाने वाली क्रिएटिव चीज़ों को देखने में दिलचस्पी रखते हैं.